![](https://img-blog.csdnimg.cn/20200416092320729.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML5
HTML5
舜岳
不积跬步无以至千里 v: shunyue1321
展开
-
vscode 插件 Tailwind CSS IntelliSense 解决 class 提示问题
就是通过 Tailwind CSS IntelliSense 插件配置。正则匹配到了就显示提示。原创 2024-01-31 21:49:11 · 1327 阅读 · 0 评论 -
js解决pdf使用iframe打印报跨域错误问题
把 pdf 转 blob 二进制数据, 通过 createObjectURL 生成本地对象 url, 在创建 iframe 调用打印接口。原创 2024-01-09 10:13:03 · 2873 阅读 · 1 评论 -
谷歌浏览器访问127.0.0.1时报错 Failed to read the ‘sessionStorage‘ property from ‘Window‘
谷歌浏览器访问127.0.0.1时报错Failed to read the'sessionStorage'property from"window"原创 2023-10-17 14:26:28 · 2106 阅读 · 0 评论 -
css全站变灰
css属性全网站变灰:filter: grayscale 使用可以调整元素的灰度值html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%)...原创 2020-04-04 09:41:20 · 668 阅读 · 0 评论 -
BootStrap布局结构 Flex各种布局
1、左右结构<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="west" class="west" style="width: 140px;"> 西 </div> ...原创 2020-03-27 09:42:15 · 1586 阅读 · 0 评论 -
【H5】 移动端的基本事件
【H5】 移动端的基本事件:一、基础事件1、PC端事件onclick 鼠标点击触发onmousedown 鼠标按下触发onmousemove 鼠标移动触发onmouseup 鼠标抬起触发2、移动端触屏事件ontouchstart 手指按下触发ontouchmove 手指移动触发onTouchend 手指抬起触发3、PC端事件和移动端事件的区别通...原创 2019-06-15 08:22:33 · 5918 阅读 · 0 评论 -
【H5】 实现调用相机拍照功能
【H5】 实现调用相机拍照功能:效果图如下:实现代码如下:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>摄像头调用</title> <style> * {margin: 0px;padding...原创 2019-06-15 08:06:46 · 9691 阅读 · 4 评论 -
【H5】 video音频标签
【H5】 video音频标签:多媒体标签 video< video src=""> </ video>src :引入路径autoplay : 自动播放width : 宽height : 高controls: 控件preload: 是否等到加载再播放Autobuffer: 缓存<video src='mp4...原创 2019-06-14 17:06:12 · 1015 阅读 · 0 评论 -
【H5】 svg画贝塞尔曲线方法
【H5】 svg画贝塞尔曲线方法:d属性M(起始坐标),L(结束坐标),H(水平线),V(垂直线),A(圆弧),Z(闭合路劲) C,S,Q,T贝塞尔曲线大写为绝对坐标(具体的坐标位置)小写为相对坐标(相对起始坐标点的具体长度)A命令x-径y半径角度弧长(0小弧1大弧方向(0逆时针1顺时针)终点(x y)C命令:三次贝塞尔曲线(x1,y1,x2,y2,x,y) x1,y1控制点一x2,y2...原创 2019-06-03 08:04:46 · 5740 阅读 · 0 评论 -
【H5】 svg便签内的path标签画椭圆弧:
【H5】 svg便签内的path标签画椭圆:path标签:A(椭圆弧)A命令后面跟7个值:A命令 x-径 y半径 角度 弧长(0小弧/1大弧) 方向(0逆时针/1顺时针) 终点(x,y)<!-- d属性 M(起始坐标), L(结束坐标), H(水平线), 大写...原创 2019-06-02 23:42:57 · 2445 阅读 · 1 评论 -
【H5】 meta标签适配器(兼容所有屏幕)
【H5】 meta标签实现屏幕大小适配器:效果图如下:meta标签内属性解释如下:name = “viewport” 视图窗口content="" 里面写以下属性width=device-width 设备宽度initial-scale=1.0 100px 初始化的比例值maximum-scale=1 最大的比例值user-scalable=no ...原创 2019-06-15 09:48:51 · 1269 阅读 · 0 评论 -
【H5】 两种屏幕宽度大小自适应方式
【H5】 两种屏幕宽度大小自适应方式:第一种由于rem是获取html根属性的字体大小改变html的字体大小,通过rem设置所以样式的宽高://rem为html的字体大小 通过改变html的字体大小达到适配的效果 remChange(); //监听屏幕改变resize事件 触发remChange方法 window.addEventListener("resize", remChange...原创 2019-06-19 22:08:58 · 9776 阅读 · 0 评论 -
【H5】 svg动画 旋转属性与虚线属性
svg 动画旋转: transform:rotate(angle x y) (不要写在style里面) angle 旋转角度 x,y旋转中心绘制虚线: stroke-dasharray:a,b/a,b,c,d…旋转属性 transform:rotate(angle x y)<div id='wrap' style="width: 500px;height: 500px;bord...原创 2019-06-04 09:18:36 · 1063 阅读 · 0 评论 -
【H5】 svg的 defs用法 渐变
defsdefs元素用于预定义一个元素使其能够在SVG图像中重复使用。在元素中定义的图形不会直接显示在SVG图像上。要显 示它们需要使用元素来引入它们 symbol 元素用于定义可重复使用的符号。嵌入在元素中的图形是不会被直接显示 的,除非你使用元素来引用它。一个元素可以有preserveAspectRatio和viewBox属性<div id='wrap' style="width: ...原创 2019-06-04 09:54:11 · 1237 阅读 · 0 评论 -
【H5】 svg旋转
attributeName = 要变化的元素属性名称 可以是元素直接暴露的属性,如 x , y可以是CSS属性begin 动画开始时间,可为具体的时间值,也可以是其他条件触发 animate参数详解attributeName = 要变化的元素属性名称 a、可以是元素直接暴露的属性,如 x , y b、可以是CSS属性 from, to, by, values f...原创 2019-06-04 11:19:02 · 1207 阅读 · 0 评论 -
【H5】 多线程worker
【H5】 多线程worker:实例化多线程:worker.js执行多线程的js文件const w = new Worker("./worker.js");利用//postMessage传输数据 //结果返回给主线程w.postMessage( 50000 )利用onmessage = function(){} 监听接收信息 得出运行结果 运行结果在e中w.onmessa...原创 2019-06-11 08:47:33 · 469 阅读 · 0 评论 -
【H5】 swiper轮播图效果插件(适配所有屏幕)
【H5】 swiper轮播图效果插件(适配所有屏幕)效果图如下:当屏幕发生变化 轮播图等比例不变!全部代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...原创 2019-06-18 15:01:43 · 2645 阅读 · 0 评论 -
【H5】 svg内text、image、path标签的使用
【H5】 svg内text、image、path标签的使用:text标签:<div id='wrap' style="width: 500px;height: 500px;border: 2px solid pink;margin: 50px auto 0;"> <svg xmlns="http://www.w3.org/2000/svg" width='...原创 2019-06-02 22:24:01 · 4573 阅读 · 0 评论 -
【H5】 svg画扇形饼图
【H5】 svg画扇形饼图效果图如下:封装代码如下:代码内有详细注解哦!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...原创 2019-06-07 10:24:25 · 4958 阅读 · 1 评论 -
【H5】 echarts绘制条形统计图,饼状图
[H5] echarts绘制条形统计图b表格需要引入echarts.js:https://echarts.baidu.com/dist/echarts.min.js效果图如下:引入结构:实例化: echarts.init(document.getElementById(‘main’))option:设置指定图表的配置项和数据setOption(option): 将表显示到页面上...原创 2019-06-06 17:59:12 · 2756 阅读 · 0 评论 -
【H5】 拖拽7事件:
【H5】 拖拽7事件被拖拽元素事件:ondragstart 拖拽开始的时触发 (触发一次)ondrag 连续触发拖拽事件ondragend 拖拽结束触发 (触发一次)拖拽进入的元素事件:ondragenter 鼠标进入目标元素内触发 (触发一次)ondragover 鼠标在目标元素内持续触发ondragleave 鼠标离开目标元素时触发事件 (触发一次)ond...原创 2019-05-19 11:14:43 · 679 阅读 · 0 评论 -
【H5】 标记精确拖拽小案例:
【H5】 标记精确拖拽小案例效果图如下:e.dataTransfer //拖拽的时候捕获里面的数据;setData(“name”,index) //设置存储值为index 存储名为namegetData(“name”) //获取存储名name的值实现代码如下:<!DOCTYPE html><html lang="en"><head&g...原创 2019-05-19 11:43:44 · 302 阅读 · 0 评论 -
【H5】 图片拖入浏览器readAsDataURL与createObjectURL处理图片:
【H5】 外部图片拖入浏览器:效果图如下:const file = new FileReader();//读到文件对象的信息file.readAsDataURL(oFile);//读取到文件所以的url,需要转入对象;实现代码如下:<!DOCTYPE html><html lang="en"><head><meta charset="...原创 2019-05-19 12:04:21 · 587 阅读 · 0 评论 -
【H5】 浏览器内拖拽文字与图片:
【H5】 浏览器内拖拽文字与图片:效果图如下:dataTransfer.getData(‘Text’); //拿到的是文本内容let fileData = e.dataTransfer.files.item(0);let reader = new FileReader(); // 读取文本的信息;reader.readAsDataURL(fileData); //读取文件...原创 2019-05-21 10:45:26 · 1110 阅读 · 0 评论 -
【H5】标签class类名属性的动态修改方法:
【H5】标签class类名属性的动态修改方法:box.classList.add(“className”); //添加类名box.classList.remove(“className”); //删除属性box.classList.toggle(‘className’); //转换属性:class类名有className就删除 没有就加上box.classList.conta...原创 2019-05-22 07:22:51 · 3847 阅读 · 0 评论 -
【H5】两种加密解密方法:
【H5】两种加密解码方法:encodeURI(); //加密decodeURI(); //解密加密成base64编码格式btoa() 加密atob() 解密实现代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...原创 2019-05-22 07:48:53 · 7792 阅读 · 1 评论 -
【H5】canvas画布像素的设置与获取:
【H5】canvas画布像素的设置与获取:getImageData() 从Canvas画板上取得指定位置的像素数据putImageData() 将所得到的像素数据描画到Canvas画板上createImageData() 方法创建新的空白像素 ImageData 对象,参数里面也可以直接放ImageData 像素值我们来实践操作一下:<!DOCTYPE html><...原创 2019-05-28 09:32:43 · 5061 阅读 · 7 评论 -
【H5】 canvas图像各种合成详解
本素材来源:https://www.cnblogs.com/hzj680539/p/5068487.html尊重第一作者,把知识奉献给大家!简易直观图:黄色圆为原图,蓝色正方形为新图红色圆为新图,蓝色为原图!globalCompositeOperation = “source-over” 这是默认设置,新图形会覆盖在原有内容之上。destination-over 会在原有内容之下...原创 2019-05-28 10:25:04 · 1533 阅读 · 0 评论 -
【H5】 canvas实现刮刮乐效果
【H5】 canvas实现刮刮乐效果效果图如下:全部实现代码如下:复制粘贴即可运行!代码内有步骤详解哦!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...原创 2019-05-28 11:45:02 · 2989 阅读 · 0 评论 -
【H5】 svg可缩放矢量图形标签
【H5】 svg可缩放矢量图形标签<svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'></svg>circle 画圆:<svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'> <!--...原创 2019-05-31 09:12:26 · 685 阅读 · 0 评论 -
[H5] Canvas画布的使用详解:
Canvas序言:在渲染复杂的动效、把数据可视化图形显示、游戏场景等需求,都会用canvas技术,比dom操作性能更高特点① H5新增的图形标签,通过提供的JavaScript函数绘制各种图表或利用算法实际非常华丽的动效② 在以前是用Flash技术实现,但不能和JS交互,③ 适合动态图形绘制缺点是位图,缩放会模糊API环境 目前只有2d绘制getContext(‘2d’) ...原创 2019-05-24 11:29:15 · 3313 阅读 · 2 评论 -
【H5】canvas绘制太阳系
【H5】canvas绘制太阳系实现效果如下:实现逻辑:Star为一个主逻辑函数,通过调用此函数传递不同的参数和圆的位置来实例化各种球的运动实现代码如下:代码内有详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...原创 2019-05-29 10:04:52 · 1095 阅读 · 0 评论 -
【H5】 经纬度位置获取navigator.geolocation.getCurrentPosition
【H5】 经纬度位置获取navigator.geolocation.getCurrentPositionnavigator.geolocation.getCurrentPosition(function(){})经度 : coords.longitude纬度 : coords.latitude准确度 : coords.accuracy海拔 : coords....原创 2019-06-06 14:42:23 · 26085 阅读 · 5 评论 -
【H5】使用高德地图API
【H5】使用高德地图API1.打开高德地图开放平台 https://lbs.amap.com 注册开发者账号2.获取key,上线项目获取地图需要自己的key验证身份获取结果如下:通过获取的key绘制获取地图地图演示链接: https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show演示代码如下:<...原创 2019-06-06 15:16:35 · 4514 阅读 · 0 评论 -
【H5】 本地存储sessionStorage与localStorage
【H5】 本地存储sessionStorage与localStorageStorage特点: 1.存储量限制 ( 5M ) 2.客户端完成,不会请求服务器处理 3.sessionStorage数据是不共享、 localStorage共享sessionStorage: 作用于当前的页面,新开页面或...原创 2019-06-06 15:35:31 · 236 阅读 · 0 评论 -
【H5】 canvas绘出喷泉告白效果
【H5】 canvas绘出喷泉告白效果效果图如下:代码如下:代码内有详解哦!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...原创 2019-05-29 13:13:56 · 950 阅读 · 0 评论 -
【H5】 拖拽3事件( onmousedown ,onmousemove ,onmouseup )
H5 拖拽案例:用到3个拖拽事件:onmousedown 鼠标按下触发事件onmousemove 鼠标按下时持续触发事件onmouseup 鼠标抬起触发事件效果图如下:以下是实现代码,代码上有详细说明哦!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...原创 2019-05-19 09:59:30 · 3167 阅读 · 0 评论