随着微信等社交App的兴起，语音聊天成为很多App必备功能，大到将语音聊天作为主要功能的社交App，小到电商App的语音客服、店小二功能，语音聊天成为了必不可少的方式。 但是很多人...
网站建设
利用 Canvas实现绘画一个未闭合的带进度条的圆环
最终效果图 一、定义变量 定义半径，定义圆环厚度，定义圆心位置、定义默认填充颜色 let radius = 75let thickness= 10let innerRadius = radius - thicknesslet x = 75let y = 75var canvas = document.getElementByI...
HTML5 播放 RTSP 视频的实例代码
目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 HTML 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 RTSP 流。Electr...
HTML5中的Web Notification桌面通知功能的实现方法
有的时候我们会在桌面右下角看到这样的提示： 这种桌面提示是HTML5新增的 Web Push Notifications 技术。 Web Notifications 技术使页面可以发出通知，通知将被显示在页面之外的系统层面上。能...
Canvas图片分割效果的实现
之前在逛cssdesignawards时发现了一个把图片内容分割的效果（网址：https://weareludwig.com），大家可以点进去看看，感觉挺炫酷的，于是自己试着实现了一下，效果还不错。效果查看https:/...
原生 JS+CSS+HTML 实现时序图的方法
之前本人使用React + AntDesign 实现了一个简单的时序图，但是后来有了更复杂的需求，并且要求同时展示2000个任务的展示，这就涉及到了性能问题，本人先使用React+antd+ts实现了一个基本...
html5 冒号分隔符对齐的实现
!DOCTYPE htmlhtmlhead meta charset=utf-8 meta name=viewport content=width=device-width,initial-scale=1.0,user-scalable=no title冒号对齐/title style .parent{display:flex} .left{width:50%} .left div{text-align: right;} /style/headbodydiv...
如何让pre和textarea等HTML元素去掉滚动条自动换行
HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加br和nbsp;等HTML元素来添加换行和打印空格。 pre去掉滚动条 pre显示文本内容时是不会自动换行的，此时可以添...
前端实现背景虚化但内容清晰且自适应 的实例代
讲干货，不啰嗦，有时候前端会遇到背景虚化但要求内容清晰的需求，先看效果： 以下为具体实现： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title背景虚化/title/headbody div class=main!-- 以下为...
HTML5实现移动端弹幕动画效果
思路 1.把单个内容编辑好，计算自身宽度，确定初始位置 2.移动的距离是屏幕宽度 3.js动态的添加css动画函数，将高度、动画移动时间、动画延迟时间都用随机数控制 代码： html骨架结...
使用canvas压缩图片大小的方法示例
问题来源 这个问题，源于上传图片文件的时候，后台限制了2MB的大小，but在调起相机拍照的时候分分钟超过了2MB,为了不影响用户体验和功能需求，需要前端对大小进行压缩，然后传到...
Canvas多边形绘制的实现方法
前言 Canvas绘制多变形非常简单，只要懂得Canvas路径 + 简单的初中数学知识即可完成 CodePen打开 解析 思路如上，非常简单，计算每一个点的位置通过lineTo()绘制路径即可 核心代码解析如...
HTML 无序列表项目符号使用图片的CSS写法
创建一个HTML页面， 其内容为一个无序列表， 列表中至少包含了5本畅销书，每本书之前的项目符号必须采用概述封面的缩略图。这些信息可以冲Web上获取。 要求采用CSS方法进行布局。...
Canvas高级路径操作之拖拽对象的实现
为了追踪所画内容，诸如画图应用程序、计算机辅助设计系统（computer-aided design system 简称CAD系统）以及游戏等许多应用程序，都会维护一份包含当前显示对象的列表。通常来说，这些...
html显示长度较大的数据时的处理方法
在html中显示长度较大的数据时，可以将数据截取显示，当鼠标滑过时再显示完整数据。 例如，下面这种情况。 实现： 复制代码 代码如下: a title="${siteBoardInfoList.boardUrl}" c:if test="${fn:l...
HTML5实现视频弹幕功能
1.首先展示一下弹幕视频弹幕原图，事实说话 2.代码展示 1html代码展示 div class=barrage video id=myvideo autoplay loop width=100% height=300px source src=video/1.mp4 /video div class=screen div class=content !--内容在...
xHTML与HTML标签的写法有哪些不同
所有标签都必须小写 在XHTML中，所有的标签都必须小写，吐舌头不能大小写穿插其中，也不能全部都是大写。事例如下。 错误：Head/HeadBody/Body 正确：head/headbody/body 标签必须成双成对 像...
HTML5自定义属性的问题分析
问题背景 在页面与js传值中我们经常用到data-id=1的方式，然后通过 e.target.dataset.id 取id的值 今天在获取值时怎么也取不到 问题分析 后来发现e对象有currentTarget和target属性，而dataset就在...
通过label标记实现单选框点击文字也能选中
label 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户...
导出HTML5 Canvas图片并上传服务器功能
导出HTML5 Canvas图片，并上传服务器 最近接触的项目中，经常遇到需要canvas绘制图片的需求，比如拼图，比如图片编辑等。canvas处理后的图片必然涉及到保存， 因此，下面方法也许是你...
网站不允许直接复制页面内容或信息的解除方法
现在许多网站都不允许直接复制页面上的某些内容或者信息，而是要求注册账号或者需要积分等等，但是有时候赶时间，根本就不想去搞个账号，那就只好硬来了。解除限制的方法比较...
html5 canvas实现给图片添加平铺水印
最近项目中遇到一个需求，需要把一张图片加上平铺的水印 类似这样的效果 首先想到的是用canvas完成这种功能，因为我之前也没有接触过canvas，所以做这个功能的时候，就是一步一步...
HTML表单传值示例通过get方式传递
google.html界面如图 代码如图：（比较简单，就是一个input输入框和input提交按钮，注意type为submit，而不是button） 复制代码 代码如下: html head titleWinbobo/title /head body div align="center" form act...
手摸手教你用canvas实现给图片添加平铺水印的实
最近项目中遇到一个需求，需要把一张图片加上平铺的水印 类似这样的效果 首先想到的是用canvas完成这种功能，因为我之前也没有接触过canvas，所以做这个功能的时候，就是一步一步...
浅析用iframe来调用页面会不会缓存页面
最近手里有个项目需要用iframe来调用每天都会变化的页面，后来想到iframe会不会缓存页面呢，于是写了个demo论证了下，结果如下： iframe的src如果是静态页面，就有可能会缓存，因为静态...
解决HTML5中滚动到底部的事件问题
问题：在H5中，我们有这样的需求：例如有列表的时候，滚动到底部时，需要加载更多。 解决方案：可以采用window的滚动事件进行处理 分析：如果滚动是针对整个屏幕而言的（不针对于...
在HTML文档中嵌入CSS的三种常用方式
在HTML中常用以下3种方式定义CSS：Embedding（嵌入式）、Linking（引用式）、Inline（内联式） 一、嵌入式 使用HTML的style元素，在文档中定义CSS样式。 复制代码 代码如下: head style type="text/...
HTML5语义化元素你真的用对了吗
HTML5语义元素 语义学是研究语言中单词和短语的含义。语义元素=具有意义的元素。 语义元素清楚地描述了它对浏览器和开发人员的意义。 非语义元素的示例 ：div和span- 对其内容一无所...
顶部固定div可设置半透明效果
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" title顶部固定/title style type="...
HTML5超炫酷粒子效果的进度条的实现示例
这是一款基于HTML5和JavaScript的进度条应用，这款进度条插件非常有特点，它在进度展示的时候呈现粒子的动画效果，也就是说，进度条在滑动的同时，会产生一些小粒子掉落下来，效果...
html meta用法示例介绍
示例用法 复制代码 代码如下: !DOCTYPE【原URL http://www.nextecloud.cn转载请说明出处】 html !--[if lt IE 7]html class="ie6"![endif]-- !--[if IE 7]html class="ie7"![endif]-- !--[if IE 8]html class="ie8"![endif]-- !--[if IE...
html5 canvas绘制网络字体的常用方法
最近在用canvas绘图时遇到了一个令人头痛的问题：canvas绘制网络字体时没效果，遂开始了一番解决方案查找测试，中间也碰到了不少坑，于是写下此篇文章做个总结，如果大家在用can...
使用thead、tfoot、 tbody制作一个表格
还有人很变态地用这三个标签做出标题能跟随表格，或者tbody固定高度，走出自动出现滚动条的功能。 复制代码 代码如下: titlethead、tfoot 以及 tbody标签/title table border="1" thead tr th科目/...
前端实现打印图像功能
前提：后台返回是绘制医用心电波形报告的数据，前端通过canvas在网页上绘制再进行打印并生成PDF文档！ 一. 尝试LODOP打印插件 之前前端表单打印功能有使用过LODOP打印插件，需安装相...
文字滚动后自动停止效果示例
效果很简单，只需要把下面的代码复制到你自己的页面中去运行一下就行了 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional...
详解canvas绘制网络字体几种方法
最近在用canvas绘图时遇到了一个令人头痛的问题：canvas绘制网络字体时没效果，遂开始了一番解决方案查找测试，中间也碰到了不少坑，于是写下此篇文章做个总结，如果大家在用can...
设置contenteditable属性可编辑HTML标签的内容(可代替
复制代码 代码如下: div contenteditable="true"可以编辑里面的内容/div 如果你在BODY里面加上contenteditable=true，可以发现该属性是多么的神奇。因此我们可以给HTML标签设置contenteditable=true属性则...
HTML5 3D书本翻页动画的实现示例
这是一款十分炫酷的HTML5 3D书本翻页动画，效果相对比较简单，拖拽鼠标模拟用手翻页，更漂亮的是翻页过程中，呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示，非常酷。...
使用SWFObject完美解决HTML插入Flash的各浏览器兼容
下面我们来共同学习一下 一、传统的方法 复制代码 代码如下: object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="a href="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,...
three.js模拟实现太阳系行星体系功能
概况如下： 1、 SphereGeometry 实现自转的太阳； 2、 RingGeometry 实现太阳系星系的公转轨道； 3、 ImageUtils 加载球体和各行星贴图； 4、 canvas 中 createRadialGradient 实现太阳发光效果； 5、 T...
textarea的disabled与readonly属性具体用法介绍
disabled定义和用法 di【原URL 台湾大带宽服务器http://www.558idc.com/tw.html复制请保留原URL】sabled 属性是一个布尔属性。 disabled 属性规定文本区域应该被禁用。 被禁用的文本区域既不可用，...
html5 外链式实现加减乘除的代码
html5 外链式实现加减乘除，具体代码如下所示： !DOCTYPE htmlhtml head meta charset=utf-8 title加减乘除/title script src=a.js/script//引用js /head body pa=3,b=2;/p input type=button onclick=alert(sum(3,2)) value=加 /...
form 在上传文件时用enctype字段有什么用处
FORM元素的enctype属性指定了表单数据向服务器提交时所采用的编码类型，默认的缺省值是application/x-www-form-urlencoded。 这种编码方式在表单发送之前都会将内容进行ur【来源：美国站群服务...
Html5 页面适配iPhoneX(就是那么简单)
前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要...
iframe截取网站部分内容实现思路及代码
复制代码 代码如下: div style="width:630px;height:350px;overflow:hidden;border:0px" div style="width:800px;height:800px;margin:-810px 0px 0px -10px;" iframe src="http://www.sci99.com/" width="960" height="1280" scrolling="no"/iframe...
3种方式实现瀑布流布局小结
前言 今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方...
空格在Html中如何表示( 有什么含义)
在web开发经常会遇到如【文章出处:外国服务器】: nbsp; 这样的字符。它其实是Html将一些特殊字符(Html语法字符)的一种表达方式。 常见的： nbsp; 空格 amp; lt; gt; quot; qpos; '...
做一个能自适应高度的textarea的示例代码
方法 1. HTML结构： div id=container textarea rows=1/textarea /div 2. CSS代码： * { padding: 0; margin: 0; } #container { width: 300px; padding: 10px; border: 1px solid #eee; box-sizing: border-box; } textarea { display: block; width...
iframe框架在IE浏览器下将白色背景设为透明色
最近在做项目的过程中需要频繁的使用iframe画页面的层级框架，大部分浏览器是没有背景的，但是iframe在IE中默认是有一个白色的背景色的，当主背景色不是白色的时候，在这一部分会显...
Adobe Brackets 简单使用图文教程
Adobe Brackets是一款开源、简洁强大的HTML、CSS和JavaScript集成开发环境，支持增加外挂程式以提供额外的功能扩展，目前可用的外挂程式例如支持增加侦错、浏览器特定CSS前缀、JSDoc注解等...