html5
关注
分享
扫一扫
jojo付啾啾
越努力越不想放弃。
展开
-
修改placeholder样式
https://www.cnblogs.com/ooo0/p/6141764.html原创 2021-01-14 15:24:45 · 208 阅读 · 0 评论 -
html + js + css 实现可拖拽音频播放器
效果图index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <原创 2020-06-03 14:15:59 · 1612 阅读 · 0 评论 -
h5 video全屏播放
转自：https://blog.youkuaiyun.com/weixin_34320724/article/details/91446874参考：如何捕获全屏退出事件？转载 2019-11-04 10:36:24 · 918 阅读 · 0 评论 -
html5中video标签设置视频的宽度和高度
转自：https://blog.youkuaiyun.com/hahhahahaa/article/details/94547802转载 2019-10-24 18:58:21 · 4417 阅读 · 0 评论 -
更改audio src路径后，获取duration为NaN的解决方法
转自：https://blog.youkuaiyun.com/chenjineng/article/details/77650870转载 2019-05-20 18:51:01 · 1320 阅读 · 0 评论 -
html5media：兼容、高效的HTML5视频播放器
html5media：兼容、高效的HTML5视频播放器转载 2019-02-15 10:27:01 · 535 阅读 · 0 评论 -
html,body的height设置成100%时，window.scrollY始终为0
原创 2018-12-12 15:52:18 · 2425 阅读 · 0 评论 -
常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介转载 2018-12-04 18:15:35 · 1258 阅读 · 0 评论 -
采用CSS实现Html斜线表头
采用CSS实现Html斜线表头转载 2018-11-14 14:04:27 · 1855 阅读 · 0 评论 -
如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画
转自：如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画当一个元素不设置height时，它的默认值是 auto，浏览器会计算出实际的高度。但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时，该怎么办呢？从 MDN 的可以查到 CSS 支持动画的属性中的 height 属性如下：heigh...转载 2018-10-24 13:54:06 · 3929 阅读 · 0 评论 -
input placeholder属性 样式修改(颜色,大小,位置)
input placeholder属性 样式修改(颜色,大小,位置)转载 2019-02-21 16:52:20 · 415 阅读 · 0 评论 -
关于emoji表情
可以参考链接（未测试）：https://segmentfault.com/q/1010000007643015?_ea=1408899这次有遇到关于输入框输入emoji表情发送到服务端后，数据库里存储的是问号，用的mysql数据库，好像跟mysql的存储有关，准备让后台设置一下用二进制存储，看能不能成功，要是不行就准备试试上面的方法，看会遇到什么问题吧，不知道显示会不会有问题。先打个草稿在这里...原创 2019-04-01 11:38:13 · 1236 阅读 · 0 评论 -
vue.js中使用离线检测
vue.js中使用离线检测转载 2019-04-02 10:16:12 · 720 阅读 · 0 评论 -
网页js获取视频帧图片
转自：https://blog.youkuaiyun.com/zfyj_2004/article/details/72845018转载 2019-07-16 16:04:35 · 1339 阅读 · 0 评论 -
table表头固定表体滚动
转自：https://blog.youkuaiyun.com/Muscleheng/article/details/86715733表头与表体每列对齐参考：https://www.cnblogs.com/fanbi/p/8082025.html转载 2019-07-29 13:47:15 · 494 阅读 · 0 评论 -
去掉input type=file的默认样式
转自：https://www.w3h5.com/post/88.html转载 2019-07-21 20:41:59 · 1069 阅读 · 0 评论 -
audio/video事件触发顺序
原创 2019-07-23 10:22:36 · 1145 阅读 · 0 评论 -
canvas图形变换
1.translate(x,y)——位移，位移会产生叠加，所以在进行下一次位移之前要清除前面已产生的位移，canvas提供了另外一种方法，就是在绘制之前用save()保存一下之前的状态，然后绘制完之后用restore()恢复到之前保存的状态。2.rotate(deg)——旋转3.scale(sx,sy)——缩放，缩放要注意不仅大小缩放了，所有的位置包括线条的宽度都会进行缩放。4.tra...原创 2018-08-07 16:11:49 · 349 阅读 · 0 评论 -
canvas文本自动换行
canvas文本自动换行转载 2018-10-16 10:19:48 · 770 阅读 · 0 评论 -
js写日历插件
慕课网课程网址：DatePicker组件开发<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc原创 2018-09-26 16:37:32 · 1881 阅读 · 0 评论 -
html5页面结构及新增/删除标签
页面结构传统页面结构html5页面结构eg 新增标签1.结构标签 section标签：section表示页面中的一个内容区块，比如章节、页眉、页脚等，也可以和hn（h1、h2...）等一起使用，表示出文档的结构； article标签：article元素表示页面中的一块与上下文不相关的独立内容，比如一篇文章； aside标签：aside元素表示...原创 2018-08-08 15:00:56 · 794 阅读 · 0 评论 -
canvas高级内容
1.阴影context.shadowColor——阴影颜色 context.shadowOffsetX——X轴方向偏移量 context.shadowOffsetY——Y轴方向偏移量 context.shadowBlur——失焦距离2.globalglobalAlpha——设置全局透明度 globalCompositeOperation——图形与图形之间产生遮挡时怎么处理 so...原创 2018-08-08 11:11:37 · 592 阅读 · 1 评论 -
canvas绘制弧形
1.context.arc(cx,cy,r,sAng,eAng,anticlock=false);2.context.arcTo(x1,y1,x2,y2,radius);——两点和半径控制点(x1,y1) 起点(x0,y0)——但不一定是切点 终点是切点，不一定是(x2,y2) 三个点形成两条线，arcTo根据两条线段绘制出与两条线段相切的圆弧，切点可以在延长线上 半径 用法 ...原创 2018-08-07 20:11:56 · 792 阅读 · 0 评论 -
canvas的fillStyle
以下方法也适用于strokeStyle，但是一般不会给strokeStyle设置样式1.线性渐变var lgrd = context.createLinearGradient(xstart,ystart,xend,yend); lgrd.addColorStop(stop,color); context.fillStyle = lgrd;2.径向渐变var rgrd = cont...原创 2018-08-07 18:42:45 · 506 阅读 · 0 评论 -
canvas线条属性
1.lineWidth——设置线条宽度2.lineCap——设置线条两端的形状，只能作用于线段的开始处和结尾处，不能作用于连接处butt(default)——没有 round——圆角 square——方角3.lineJoin——线条和线条相交的时候所呈现出的形态miter(default)——尖角 miterLimit(10)——当使用miter作为衔接方式时，内角和外角之间的...原创 2018-08-07 14:55:48 · 719 阅读 · 0 评论 -
canvas绘制矩形
如果后绘制的图形与前绘制的图形有重叠，则后绘制的图形会覆盖前绘制的图形绘制矩形方法：context.rect(x,y,width,height);// 指定矩形路径，后面还需要stroke()或fill()来绘制context.fillRect(x,y,width,height);// 直接根据指定的路径来填充矩形context.strokeRect(x,y,width,heigh...原创 2018-08-07 10:51:57 · 795 阅读 · 0 评论 -
canvas基本用法
切记：canvas是基于状态绘制的！！！ HTML <canvas id="canvas"></canvas> Javascript var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//下面使用context进行绘制 ...原创 2018-08-06 18:59:35 · 495 阅读 · 1 评论 -
慕课网canvas倒计时时钟
效果：思路：1.数字——都是由原点形成，乍一看这些圆点的排布没有规律，但是仔细观察会发现这些圆点要么在一条横线上，要么在一条竖线上。所以可以用一个点阵来表示，1表示实心圆，0表示空白。eg:所以需要建一个文件，单独存放数字0-9的矩阵A10*7，当然还有冒号A10*4。2.绘制——绘制的时候需要知道具体的时分秒，所以要定义相关的变量hours minutes s...原创 2018-08-06 11:15:34 · 684 阅读 · 0 评论 -
html5存储
html5之前：1.cookies诞生http请求头里会带着 大小4K 主Domain污染（子域名的cookies会带上主域名里设置的cookies）百度首页cookies：（cookies在浏览器存储形态）2.UserData 只有IE支持 最终存储放在一个XML文件里html5存储1.诞生的目的解决4k的大小问题 解决请求头常带存储信息的问题 解决关系...原创 2018-08-15 17:34:48 · 282 阅读 · 0 评论 -
基于websocket与nodejs-websocket的简单聊天室
1.项目目录：websocketChatRoom index.html(客户端) wsServer.js(服务器) 2.安装nodejs-websocket（https://www.npmjs.com/package/nodejs-websocket）npm install nodejs-websocket3.index.html<!DOCTYPE html&g...原创 2018-08-16 14:18:42 · 2207 阅读 · 3 评论 -
js实现图片裁剪效果
注意：img设置clip样式属性时要先设置position:absolute。裁剪的效果其实由两张图叠加形成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=&q原创 2018-09-25 17:52:13 · 7717 阅读 · 1 评论 -
js实现鼠标移入移出元素出来缩进的动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-09-13 16:20:00 · 1571 阅读 · 0 评论 -
慕课网鼠标拖拽效果
注意：为了产生连续移动的效果，所以要用setInterval！！！课程地址 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>慕课网-拖拽效果&l转载 2018-09-13 15:07:41 · 393 阅读 · 0 评论 -
鼠标拖拽缩放面板大小
又是一段不完美的实现，为啥设置样式left和top为空就能解决某一边元素动而右下角元素不动的bug？？？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="原创 2018-09-13 14:50:24 · 1446 阅读 · 0 评论 -
a 标签实现文件下载
没试验！a 标签实现文件下载已试验！可以用！NodeJS下载文件实例转载 2018-09-12 15:09:56 · 483 阅读 · 0 评论 -
很low的带蒙层的弹出效果实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-09-11 18:52:26 · 659 阅读 · 0 评论 -
基于socket.io的简单聊天室
socket.io需要在服务端和客户端都引入，官网：https://socket.io/1.目录结构socketioChatRoom index.html(客户端) wsServer.js(服务端) socket.io.js(客户端要引入的js：https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js)...原创 2018-08-16 15:37:51 · 529 阅读 · 0 评论 -
canvas的arc绘制弧形
1.绘制弧形context.arc( centerx, centery, radius,//圆点坐标和半径 startingAngle,endingAngle,//起始弧度，结束弧度 anticlockwise = false//默认顺时针，绘制路径的方式很重要，因为fill会根据非零环绕原则来进行填充，可以达到剪纸等效果)startingAngle和endin...原创 2018-08-06 10:23:37 · 921 阅读 · 0 评论