使用canvas仿Echarts实现金字塔图的实例代码
前言最近公司项目都偏向于数字化大屏展示🥱，而这次发给我的项目原型中出现了一个金字塔图🤔️， 好巧不巧，由于我们的图表都是使用Echarts，而Echarts中又不...
2021-11-15
手把手教你怎么使用html+css实现轮播图效果（代码分享）
推动轮播实现效果图如下首先写Html部分，你可以理解这个div标签，如果你写CSS或者JS的时候可以用到这几个div标签，<div id="container">就是 一个ID为container的div，先不说多，下面...
2021-08-27
浅析微信小程序和web之间的交互（代码分享）
背景通常我们写了一套自适应的web程序，想在多种环境中使用.比如app里，微信小程序里,各种app分享中，假如只是能使用app浏览，问题不大，但是要在被嵌入app里面和app本身交互，就要做各...
2021-08-17
html篇：网页中如何实现输入框效果（代码详解）
<input> 标签指定：搜集用户信息并且输入字段很多种形式，比如：文本字段、复选框、单选按钮、等等。添加输入框的方法<input type="">这个type是告诉它是个什么类型，比如txt文本类...
2021-08-17
教你用HTML5画一个馋人的西瓜
不知道各位对HTML5掌握了多少，或许大家可以在本地自己写一个能实现半圆弧西瓜样式的代码，小小提醒一下：西瓜典型的配色就是红配绿~下面是我给出的一个实现方法，大家可以直接复制...
2021-08-11
如何使用html制作一个简洁的提交表单（代码详解）
html制作一个表单的方法网页中常见的“登录”“注册”等功能通常都是使用表单实现的，比如下方是一张登录表单示例，其中就配合使用了<input>和<button>代...
2021-08-02
某些HTML字符打不出来怎么办
大家了解字符实体吗？防止某些小伙伴不了解，我们先来说一下字符实体。字符实体通俗讲就是网页文件中复杂的符号代码和一些标点的代码。例如小于号< ，大于号> ，双引号“&rdqu...
2021-08-02
html5实现点击弹出图片功能
下面给大家分享html5点击弹出图片，分为前台代码和js代码，具体内容如下所示：前台代码：<a href="javascript:;" onclick="repeat()"> <div id="modal_volume" style="position: fi...
2021-07-16
html5 录制mp3音频支持采样率和比特率设置
13年的时候做过html5录音，一个问题是保存的wav格式文件很大，当初用了一个迂回的方式，上传到服务器后调用 lame 编码器转换，但由于文件大，上传较慢。不得不说，前端技术发展真是日新...
2021-07-16
html+css实现环绕倒影加载特效
本文主要介绍了html+css实现环绕倒影加载特效，具体如下：先看效果（完整代码在底部）：实现（可一步一步边看效果边编写）：※先初始化（直接复制）： *{ margin: 0; paddi...
2021-07-16
html5表单的required属性使用
描述今天无意之中发现form有自带非空判断功能,查了资料发现,required 属性是 HTML5 中的新属性定义和用法required 属性是一个布尔属性
required 属性规定必需在提交之前填...
2021-07-16
html输入两个数实现加减乘除功能
一、parseFloat() 函数
在网页中制作一个简单的计算器，在文本框输入两个数，能够实现两个数的加减乘除。
parseFloat() 函数可解析一个字符串，并返回一个浮点数。
该函数指定字...
2021-07-02
html5调用摄像头实例代码
最近在学习在做HTML5的项目，看了博客上html5调用摄像头拍照的文章，但各有瑕疵。于是自己查阅书籍写了一个demo，主要分三步，废话不多说上代码。HTML代码部分：<!--video用于显示媒...
2021-06-29
HTML5页面音频自动播放的实现方式
最近有这么一个需求，需要在手机加载一个页面的时候，自动播放音乐资源。一般情况下，这个问题也就解决了，但是要保证各种手机上表现一致，那就相当困难了，至少要费点儿周折。 下面有...
2021-06-29
html中显示特殊符号(附带特殊字符对应表)
问题重现在使用html进行编辑的时候，特殊符号往往会显示错误，极端情况下更可能导致网页崩溃。如下面这段代码：<table><tr><td>中_国_人</td></tr></table>在网页中则显示为：这里...
2021-06-29
html实现弹窗的实例
上午闲来无事，用html及原生js写个弹窗，供参考。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ margin: 0p...
2021-06-09
关于html选择框创建占位符的问题
我在文本输入中使用占位符，效果很好。但我也想为我的选择框使用一个占位符。当然，我可以使用以下代码：<select> <option value="">Select your option</option> <option...
2021-06-09
html2 canvas svg不能识别的解决方案
最新有个功能需要截取网页成图片，于是用到比较流行的html2canvas，本来以为能顺顺利利的搞定，后来发现网页上的流程图连接线不在截图中。于是各种百度、bing，也搜到好多，但是...
2021-06-05
HTML+VUE分页实现炫酷物联网大屏功能
效果demo.html<html> <head> <meta charset="UTF-8"> <title>数据大屏</title> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src=...
2021-05-27
HTML5来实现本地文件读取和写入的实现方法
最近有这样一个需求，就是在html页面中有个按钮导出，点击它，将构造一个文档并存储到本地文件系统中。另外还有个按钮，点击它，从本地文件系统中读取一个文件并对内容进行分析。说白...
2021-05-25
HTML中的表单Form实现居中效果
之前碰到一个作业，给了一张图片，让按照图片样式做一个表单，但在所有功能都实现后，发现无法让表单居中，一直缩在左上角，看起来很难看。在经过了各种修改后，终于成功将表单居中，下面分...
2021-05-25
HTML 罗盘式时钟的实现
代码块：<!DOCTYPE html> <html lang="zh-hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...
2021-05-20
html5怎么禁止缓存
html5：<HEAD> <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store"> <meta HTTP-EQUIV="expires" CONTENT="0"></HEAD>chr...
2021-05-17
HTML通过表单实现酒店筛选功能
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html:charset=utf-8"/><title>通过表单实现酒店筛选</...
2021-05-17
HTML5简单实现添加背景音乐的几种方法
这里推荐两种方法，就是两个标签 <embed> 或者<audio >常用 <audio > +css布局 隐藏播放器 做网站比较实用！<!DOCTYPE html><html><head> <title>html5添加音乐</title>...
2021-05-12
哪些html元素有for属性
for属性适用的html元素 元素名 说明 <label> for与<label>元素一起使用时，for属性指定标签绑定到哪个表单元素。 <output> for与<output>元...
2021-05-11
canvas绘制折线路径动画实现
最近有读者加我微信咨询这个问题：其中的效果是一个折线路径动画效果，如下图所示：要实现以上路径动画，一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来实现。...
2021-05-11
Html5生成验证码的示例代码
利用Html5的canvas标签生成画布,在画布上利用随机生成的数字画上验证码，背景为随机生成的颜色和杂乱的直线与点点。进阶：利用表单插件属性绑定验证码数据(json)可以在发送时候...
2021-05-11
HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手
很多小伙伴在前端学习的时候，发现盒子模型默认为正方形。如何把盒子变成想要的模型呢？ 首先我们来看一下默认的情况----<!DOCTYPE html><html lang="en"><head> <meta char...
2021-05-10
html5中sharedWorker实现多页面通信的示例代码
是这样的，今天玩github，先是在没有登录浏览了一些页面，然后在某一页面进行了登录。这时再切换的其他页面时就看到了下面的提示：那么这是怎么做到的呢？我们可以想到，一种办法是 loc...
2021-05-07
html5语义化标签有哪些
HTML语义化：每个HTML标签都有自己特定含义（语义），语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。看过一个比较形象的例子：盖一栋...
2021-05-06
如何将JSON转换为HTML格式并显示
将JSON转换为HTML格式并显示的方法：ABAP接口程序开发中时常会用到JSON格式来传输数据，在监控传输的JSON串内容时，把JSON转换为HTML格式来显示会很便利。下面提供一个简单例子来...
2021-04-27
HTML5中 rem适配方案与 viewport 适配问题详解
H5 端 rem 适配方案与 viewport 适配remrem 是 CSS3 新增的一个相对单位（root em，根 em）
只根据当前页面 HTML 页面的 font-size 设置，如果根目录的 font-size 为 18px，则 1rem=1...
2021-04-26
如何设置HTML select下拉框的默认值？
默认情况下，具有“selected”属性的option标签将显示在下拉列表select标签中。语法：<option value="value" selected>选项名称</option>示例1：使用selected属性<!DOC...
2021-04-26
html如何选择li的偶数列
可以使用li:nth-of-type(even) {......}来选择li的偶数列实例：<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8" /> <title></title> <style>...
2021-04-23
html的i标签有什么作用
<i> 标签显示斜体文本效果。<i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不...
2021-04-23
HTML5轮播图全代码
轮播图原理大概是这样的，假定三张图片需要做轮播效果，首先需要将这三张图片并列放置，然后将这个整体并列向左移动，每当一张图片完整的从显示框走出，则将这张图片放置到最后面，循环...
2021-04-23
HTML+CSS+JS实现图片的瀑布流布局的示例代码
前言瀑布流布局简而言之就是类似瀑布流的布局嘛，这么一讲大家可能还是不是了解的很明白，来来来，那现在我给大家上一个常见的实例:相信大家在百度上搜索图片时的时候，网页图片的...
2021-04-21
html+css如何实现自定义图片上传按钮
普通的input[type=‘file’]的效果很朴素
可以自定义一个file选择文件的按钮：思路为：用定位将自定义的按钮遮住原来的选择文件按钮，再让点击自定义按钮时触发原来的...
2021-04-21
在HTML5 localStorage中存储对象的示例代码
我想在HTML5中存储一个JavaScript对象localStorage，但是我的对象显然正在转换为字符串。我可以使用来存储和检索原始JavaScript类型和数组localStorage，但是对象似乎无法正常...
2021-04-20
HTML5中外部浏览器唤起微信分享
最近在做一个手机站，要求点击分享可以直接打开微信分享出去。而不是jiathis，share分享这种的点击出来二维码。在网上看了很多，都说APP能唤起微信，手机网页实现不了。也找了很多...
2021-04-20
canvas多重阴影发光效果实现
前言在一个项目中，客户提了一个发光的效果，效果图如下：
阴影有的人可能会说，这个用阴影其实就可以实现。但是从图中可以看出，是一个比较强烈的发光效果。实际的应用过程中我们会...
2021-04-19
html5移动端禁止长按图片保存的实现
在移动端访问H5页面的时候，长按图片就会把图片保存起来，为了能够让用户体验更好一些，我们需要长按的时候也不保存图片。那该如何实现呢？下面给出3种解决方案。方案一：使用 pointe...
2021-04-19
使用PDF.js渲染canvas实现预览pdf的效果示例
一、PDF.js的下载从官网直接下载即可，地址：http://mozilla.github.io/pdf.js/getting_started/#download建议下载稳定版本，如下图所示：下载完成后将压缩包解压放在项目下，按照正...
2021-04-17
详解如何在Canvas中添加事件的方法
作为一个前端，给元素添加事件是一件司空见惯的事情。可是在Canvas中，其所画的任何东西都是无法获取的，更别说添加事件，那么我们对其就束手无策了吗？当然不是的！我们在平时项目中肯...
2021-04-16
Html5调用企业微信的实现
前言基于H5的页面调通 企业微信的API （已调通demo）一、环境企业微信管理员 添加应用 ，地址指向H5程序的地址。（企业微信通过内部游览器访问你自己发布出来的web端的手机项目，不做...
2021-04-15
Canvas三种动态画圆实现方法说明(小结)
前言canvas是HTML5出来的绘图API容器，对于图形的处理非常强大，下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。
这里我个人总结了3种实...
2021-04-15
Html5新增了哪些功能
介绍
HTML5 是下一代的 HTML, 将成为 HTML、XHTML 以及 HTML DOM 的新标准。起步
HTML5 是 W3C 与 WHATWG 合作的结果。为 HTML5 建立的一些规则： 新特性应该基于 HTML、C...
2021-04-15
详解Html5项目适配系统深色模式方案总结
一、背景随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。...
2021-04-14
HTML页面滚动时部分内容位置固定不滚动的实现
本文主要介绍了HTML页面滚动时部分内容位置固定不滚动，对布局有一定的帮助作用，废话不多说，具体如下：效果截图：页面源代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"...
2021-04-14
