强攻 前端HTML5 渡一学习记录
2024-05-10 17:45:34
欢迎关注 掘金 https://juejin.cn/user/2551305355400797
1.内容大纲
1.新增的属性
- placeholder
- Calendar, date, time, email, url, search
- ContentEditable
- Draggable
- Hidden
- Content-menu
- Data-Val(自定义属性)
2.新增的标签
- 语义化标签
- canvas
- svg
- Audio(声音播放)
- Video(视频播放)
3.API
- 移动端网页开发一般指的是h5
- 定位（需要地理位置的功能）
- 重力感应（手机里面的陀螺仪（微信摇一摇，赛车转弯））
- request-animation-frame（动画优化）
- History历史界面（控制当前页面的历史记录）
- LocalStorage（本地存储，电脑/浏览器关闭都会保留）；SessionStorage，（会话存储：窗口关闭就消失）。 都是存储信息（比如历史最高记录）
- WebSocket（在线聊天，聊天室）
- FileReader(文件读取，预览图)
- WebWoker（文件的异步，提升性能，提升交互体验）
- Fetch（传说中要替代AJAX的东西）
2.属性篇_input新增type
1.placeholder
<input type="text" placeholder="用户名/手机/邮箱">
<input type="password" placeholder="请输入密码">
2.input新增type
以前学的
<input type="radio">
<input type="checkbox">
<input type="file">
input新增type
<form><!-- Calendar类 --><input type="date"><!-- 不常用原因之一：chrome支持，Safari,IE不支持 --><input type="time"><!-- 不常用原因之一：chrome支持，Safari,IE不支持 --><input type="week"><!-- 第几周 不常用原因之一：chrome支持，Safari,IE不支持 --><input type="datetime-local"><!-- 不常用原因之一：chrome支持，Safari,IE不支持 --><br><input type="number"><!-- 限制输入，仅数字可以。不常用原因之一：chrome支持，Safari,IE不支持--><input type="email"><!-- 邮箱格式 不常用原因之一：chrome，火狐支持，Safari,IE不支持--><input type="color"><!-- 颜色选择器 不常用原因之一：chrome支持，Safari,IE不支持--><input type="range" min="1" max="100" name="range"><!-- chrome,Safar支持 ，火狐，IE不支持--><input type="search" name="search"><!-- 自动提示历史搜索.chrome支持,Safar支持一点,IE不支持 --><input type="url"><!-- chrome，火狐支持,Safar,IE不支持 --><input type="submit">
</form>
3.ContentEditable
<div>Panda</div>
想修改内容
原生方法：增加点击事件修改
新方法
<div contenteditable="true">Panda</div>
默认值false,没有兼容性问题,可以继承(包裹的子元素),可以覆盖(后来设置的覆盖前面设置的)
常见误区：
<div contenteditable="true"><span contenteditable="false">姓名：</span>Panda<br><span contenteditable="false">姓别：</span>男<br><!-- 会导致删除br等标签 -->
</div>
总结：实战开发可用属性:contenteditable, placeholder
4.Drag被拖拽元素
<div class="a" draggable="true"></div><!-- 谷歌，safari可以，火狐，Ie不支持 -->
默认值false
默认值为true的标签(默认带有拖拽功能的标签)：a标签和img标签
拖拽生命周期
1.拖拽开始，拖拽进行中，拖拽结束
2.组成：被拖拽的物体，目标区域
拖拽事件
var oDragDiv = document.getElementsByClassName('a')[0];
oDragDiv.ondragstart = function (e) {console.log(e);
}// 按下物体的瞬间不触发事件，只有拖动才会触发开始事件
oDragDiv.ondrag = function (e) {//移动事件console.log(e);
}
oDragDiv.ondragend = function (e) {console.log(e);
}
// 从而得出移动多少点
小功能：.a{position:absolute}
<div class="a" draggable="true"></div>
<script>var oDragDiv = document.getElementsByClassName('a')[0];var beginX = 0;var beginY = 0;oDragDiv.ondragstart = function (e) {beginX = e.clientX;beginY = e.clientY;console.log(e);}oDragDiv.ondragend = function (e) {var x = e.clientX - beginX;var y = e.clientY - beginY;oDragDiv.style.left = oDragDiv.offsetLeft + x + "px";oDragDiv.style.top = oDragDiv.offsetTop + y + "px";}
</script>
5.Drag目标元素（目标区域）
.a {width: 100px;height: 100px;background-color: red;position: absolute;
}
.target{width: 200px;height: 200px;border:1px solid;position: absolute;left: 600px;
}
<div class="a" draggable="true"></div>
<div class="target"></div><script>var oDragDiv = document.getElementsByClassName('a')[0];oDragDiv.ondragstart = function (e) {}oDragDiv.ondrag = function (e) {//只要移动就不停的触发}oDragDiv.ondragend = function (e) {}var oDragTarget = document.getElementsByClassName("target")[0];oDragTarget.ondragenter = function (e) {//不是元素图形进入就触发的而是拖拽的鼠标进入才触发的// console.log(e);}oDragTarget.ondragover = function (e) {//类似于ondrag，只要在区域内移动，就不停的触发// console.log(e);// ondragover--回到原处 / 执行drop事件}oDragTarget.ondragleave = function (e) {console.log(e);// 离开就触发}oDragTarget.ondrop = function (e) {console.log(e);// 所有标签元素，当拖拽周期结束时，默认事件是回到原处，要想执行ondrop，必须在ondragover里面加上e.preventDefault();// 事件是由行为触发，一个行为可以不只触发一个事件// 抬起的时候，有ondragover默认回到原处的事件，只要阻止回到原处，就可以执行drop事件// A -> B(阻止) -> C 想阻止c,只能在B上阻止 责任链模式}
</script>6.拖拽demo
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box1 {position: absolute;width: 150px;height: auto;border: 1px solid;padding-bottom: 10px;}.box2 {position: absolute;width: 150px;left: 300px;height: auto;border: 1px solid;padding-bottom: 10px;}li {position: relative;width: 100px;height: 30px;background: #abcdef;margin: 10px auto 0px auto;/* 居中，上下10px */list-style: none;}</style>
</head><body><div class="box1"><ul><li></li><li></li><li></li></ul></div><div class="box2"></div><script>var dragDom;var liList = document.getElementsByTagName('li');for (var i = 0; i < liList.length; i++) {liList[i].setAttribute("draggable", true);//赋予classliList[i].ondragstart = function (e) {console.log(e.target);dragDom = e.target;}}var box2 = document.getElementsByClassName("box2")[0];box2.ondragover = function (e) {e.preventDefault();}box2.ondrop = function (e) {// console.log(dragDom);box2.appendChild(dragDom);dragDom = null;}// 拖回去var box1 = document.getElementsByClassName("box1")[0];box1.ondragover = function (e) {e.preventDefault();}box1.ondrop = function (e) {// console.log(dragDom);box1.appendChild(dragDom);dragDom = null;}</script>
</body></html>7.dataTransfer补充属性
effectAllowed
oDragDiv.ondragstart = function (e) {e.dataTransfer.effectAllowed = "link";//指针是什么样子，只能在ondragstart里面设置
}
/其他光标：link copy move copyMove linkMove alldropEffect
oDragTarget.ondrop = function (e) {e.dataTransfer.dropEffect = "link";//放下时候的效果，只在drop里面设置
}试验不通过？？
8.标签篇_语义化标签
全是div，只是语义化
<header></header>
<footer></footer>
<nav></nav>
<article></article><!--文章，可以直接被引用拿走的-->
<section></section><!--段落结构，一般section放在article里面-->
<aside></aside><!--侧边栏-->9.canvas画线
<canvas id="can" width="500px" height="300px"></canvas>注意：只能在行间样式设置大小，不能通过css
var canvas = document.getElementById('can');//画布
var ctx = canvas.getContext("2d");//画笔ctx.moveTo(100, 100);//起点
ctx.lineTo(200, 100);//终点
ctx.stroke();//画上去
ctx.closePath();// 连续线，形成闭合
ctx.fill();//填充
ctx.lineWidth = 10;// 设置线的粗细 写在哪，都相当于写在moveto的后面？？？？咋不管用想实现一个细，一个粗
一个图形，一笔画出来的，只能一个粗细，想实现，必须开启新图像
ctx.beginPath();closePath()是图形闭合，不是一个图，不能闭合
10canvas画矩形
ctx.rect(100, 100, 150, 100);
ctx.stroke();
ctx.fill();简化
ctx.strokeRect(100, 100, 200, 100);//矩形
ctx.fillRect(100, 100, 200, 100); //填充矩形11. 小方块下落
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}canvas {width: 500px;height: 300px;border: 1px solid;}</style>
</head><body><canvas id="can" width="500px" height="300px"></canvas><!-- --><script>var canvas = document.getElementById('can');//画布var ctx = canvas.getContext("2d");//画笔var height = 100;var timer = setInterval(function () {ctx.clearRect(0, 0, 500, 300);//橡皮擦功能，清屏ctx.strokeRect(100, height, 50, 50);height += 5;//每次画的新的，但是旧的没删除，所以要加上清屏}, 1000 / 30);</script>
</body></html>作业：自由落体
12.canvas画圆
<script>var canvas = document.getElementById('can');//画布var ctx = canvas.getContext("2d");//画笔// 圆心(x,y)，半径(r)，弧度(起始弧度，结束弧度),方向ctx.arc(100, 100, 50, 0, Math.PI * 1.8, 0)//顺时针0;逆时针1ctx.lineTo(100, 100);ctx.closePath();ctx.stroke();
</script>13.画圆角矩形
<script>var canvas = document.getElementById('can');//画布var ctx = canvas.getContext("2d");//画笔// ABC为矩形端点// B(x,y),C(x,y),圆角大小(相当于border-radius)ctx.moveTo(100, 110);ctx.arcTo(100, 200, 200, 200, 10);ctx.arcTo(200, 200, 200, 100, 10);ctx.arcTo(200, 100, 100, 100, 10);ctx.arcTo(100, 100, 100, 200, 10);ctx.stroke();
</script>14.canvas贝塞尔曲线
贝塞尔曲线
var canvas = document.getElementById('can');//画布
var ctx = canvas.getContext("2d");//画笔
ctx.beginPath();
ctx.moveTo(100, 100);
// ctx.quadraticCurveTo(200, 200, 300, 100);二次
// ctx.quadraticCurveTo(200, 200, 300, 100, 400 200); 三次
ctx.stroke();波浪
注意：初始化
ctx.beginPath();波浪demo
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas {width: 500px;height: 300px;border: 1px solid;}</style></head><body><canvas id="can" width="500px" height="300px"></canvas><!-- --><script>var width = 500;var height = 300;var offset = 0;var num = 0;var canvas = document.getElementById('can');//画布var ctx = canvas.getContext("2d");//画笔setInterval(function () {ctx.clearRect(0, 0, 500, 300);ctx.beginPath();ctx.moveTo(0 + offset - 500, height / 2);ctx.quadraticCurveTo(width / 4 + offset - 500, height / 2 + Math.sin(num) * 120, width / 2 + offset - 500, height / 2);ctx.quadraticCurveTo(width / 4 * 3 + offset - 500, height / 2 - Math.sin(num) * 120, width + offset - 500, height / 2);// 整体向左平移整个宽度形成完整的衔接ctx.moveTo(0 + offset, height / 2);ctx.quadraticCurveTo(width / 4 + offset, height / 2 + Math.sin(num) * 120, width / 2 + offset, height / 2);ctx.quadraticCurveTo(width / 4 * 3 + offset, height / 2 - Math.sin(num) * 120, width + offset, height / 2);ctx.stroke();offset += 5;offset %= 500;num += 0.02;}, 1000 / 30)</script></body></html>15.坐标平移旋转与缩放
旋转平移
<script>var canvas = document.getElementById('can');//画布var ctx = canvas.getContext("2d");//画笔ctx.beginPath();ctx.rotate(Math.PI / 6);//根据画布的原点进行旋转 // 要想不根据画布原点,则translate坐标系平移// ctx.translate(100, 100);坐标原点在(100,100),此时配套旋转ctx.moveTo(0, 0);ctx.lineTo(100, 100);ctx.stroke();
</script>缩放
<script>var canvas = document.getElementById('can');//画布var ctx = canvas.getContext("2d");//画笔ctx.beginPath();ctx.scale(2, 2);//x乘以他的系数,y乘以他的系数ctx.strokeRect(100, 100, 100, 100);</script>16.canvas的save和restore
不想让其他的受到之前设置的影响
<script>var canvas = document.getElementById('can');//画布var ctx = canvas.getContext("2d");//画笔ctx.save();//保存坐标系的平移数据，缩放数据，旋转数据ctx.beginPath();ctx.translate(100, 100);ctx.rotate(Math.PI / 4);ctx.strokeRect(0, 0, 100, 50);ctx.beginPath();ctx.restore();//一旦restore，就恢复save时候的状态ctx.fillRect(100, 0, 100, 50);
</script>17.canvas背景填充
<script>var canvas = document.getElementById('can');//画布var ctx = canvas.getContext("2d");//画笔var img = new Image();img.src = "file:///C:/Users/f1981/Desktop/source/pic3.jpeg";img.onload = function () {//因为图片异步加载ctx.beginPath();ctx.translate(100, 100);//改变坐标系的位置var bg = ctx.createPattern(img, "no-repeat");// 图片填充，是以坐标系原点开始填充的// ctx.fillStyle = "blue";ctx.fillStyle = "bg";ctx.fillRect(0, 0, 200, 100);}</script>图片疑难问题
探索
open in live server只能打开同目录下的img
18.线性渐变
<script>var canvas = document.getElementById('can');var ctx = canvas.getContext("2d");ctx.beginPath();var bg = ctx.createLinearGradient(0, 0, 200, 200);bg.addColorStop(0, "white");//数字为0-1之间// bg.addColorStop(0.5, "blue");bg.addColorStop(1, "black");ctx.fillStyle = bg;ctx.translate(100, 100);//起始点依旧是坐标系原点ctx.fillRect(0, 0, 200, 200);</script>19.canvas辐射渐变
<script>var canvas = document.getElementById('can');var ctx = canvas.getContext("2d");ctx.beginPath();// var bg = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);起始圆，结束圆var bg = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);// var bg = ctx.createRadialGradient(100, 100, 100, 100, 100, 100);起始圆里面的颜色全是开始的颜色bg.addColorStop(0, "red");bg.addColorStop(0.5, "green");bg.addColorStop(1, "blue");ctx.fillStyle = bg;ctx.fillRect(0, 0, 200, 200);
</script>20.canvas阴影
<script>var canvas = document.getElementById('can');var ctx = canvas.getContext("2d");ctx.beginPath();ctx.shadowColor = "blue";ctx.shadowBlur = 20;ctx.shadowOffsetX = 15;ctx.shadowOffsetY = 15;ctx.strokeRect(0, 0, 200, 200);
</script>21.canvas渲染文字
<script>var canvas = document.getElementById('can');var ctx = canvas.getContext("2d");ctx.beginPath();ctx.strokeRect(0, 0, 200, 200);ctx.fillStyle = "red";ctx.font = "30px Georgia";//对stroke和fill都起作用ctx.strokeText("panda", 200, 100);//文字描边ctx.fillText("monkey", 200, 250);//文字填充
</script>22.canvas线端样式
<script>var canvas = document.getElementById('can');var ctx = canvas.getContext("2d");ctx.beginPath();ctx.lineWidth = 15;ctx.moveTo(100, 100);ctx.lineTo(200, 100);ctx.lineTo(100, 130);ctx.lineCap = "square"//butt round ctx.lineJoin = "miter";//线接触时候// round bevel miter(miterLimit)ctx.miterLimit = 5;ctx.stroke();
</script>23.SVG画线与矩形
svg与canvas区别
svg:矢量图，放大不会失真，适合大面积的贴图，通常动画较少或者较简单，标签和css画
Canvas:适合用于小面积绘图，适合动画，js画
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.line1 {stroke: black;stroke-width: 3px;}.line2 {stroke: red;stroke-width: 5px;}</style></head><body><svg width="500px" height="300px" style="border:1px solid"><line x1="100" y1="100" x2="200" y2="100" class="line1"></line><line x1="200" y1="100" x2="200" y2="200" class="line2"></line><rect height="50" width="100" x="0" y="0"></rect><!-- 所有闭合的图形，在svg中，默认都是天生充满并且画出来的 --><rect height="50" width="100" x="0" y="0" rx="10" ry="20"></rect></svg></body></html>24.svg画圈，椭圆，直线
<style>
polyline {fill: transparent;stroke: blueviolet;stroke-width: 3px;
}
</style><svg width="500px" height="300px" style="border:1px solid"><circle r="50" cx="50" cy="220"></circle><!--圆--><ellipse rx="100" ry="30" cx="400" cy="200"></ellipse><!-- 椭圆 --><polyline points="0 0, 50 50, 50 100,100 100,100 50"></polyline><!-- 曲线:默认填充 -->
</svg>25.svg画多边形和文本
<polygon points="0 0, 50 50, 50 100,100 100,100 50"> </polygon><!-- 与polylkine区别：多边形会自动首位相连 -->
<text x="300" y="50">邓哥身体好</text>polygon {fill: transparent;stroke: black;stroke-width: 3px;
}text {stroke: blue;stroke-width: 3px;
}26.SVG透明度与线条样式
透明
stroke-opacity: 0.5;/* 边框半透明 */
fill-opacity: 0.3;/* 填充半透明 */线条样式
stroke-linecap: butt;/* （帽子）round square 都是额外加的长度*/stroke-linejoin:;/* 两个线相交的时候 bevel round miter */27.SVG的path标签
<path d="M 100 100 L 200 100"></path>
<path d="M 100 100 L 200 100 L 200 200"></path><!-- 默认有填充 -->
<path d="M 100 100 L 200 100 l 100 100"></path>
<!-- 以上：大写字母代表绝对位置，小写字母表示相对位置 -->
<path d="M 100 100 H 200 V 200"></path><!-- H水平 V竖直 -->
<path d="M 100 100 H 200 V 200 z"></path><!-- z表示闭合区间，不区分大小写 -->path {stroke: red;fill: transparent
}28.path画弧
<path d="M 100 100 A 100 50 0 1 1 150 200"></path>
<!-- A代表圆弧指令，以M100 100为起点，150 200为终点 ，半径100，短半径50 ，旋转角度为0，1大圆弧，1顺时针 -->29.svg线性渐变
<svg width="500px" height="300px" style="border:1px solid"><defs><!-- 定义一个渐变 --><linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%"><stop offset="0%" style="stop-color:rgb(255,255,0)"></stop><stop offset="100%" style="stop-color:rgb(255,0,0)"></stop></linearGradient></defs><rect x="100" y="100" height="100" width="200" style="fill:url(#bg1)"></rect>
</svg>30.svg高斯模糊
<svg width="500px" height="300px" style="border:1px solid"><defs><!-- 定义一个渐变 --><linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%"><stop offset="0%" style="stop-color:rgb(255,255,0)"></stop><stop offset="100%" style="stop-color:rgb(255,0,0)"></stop></linearGradient><filter id="Gaussian"><feGaussianBlur in="SourceGraphic" stdDeviation="20"></feGaussianBlur></filter></defs><rect x="100" y="100" height="100" width="200" style="fill:url(#bg1);filter:url(#Gaussian)"></rect>
</svg>31.SVG虚线及简单动画
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.line1 {stroke: black;stroke-width: 10px;/* stroke-dasharray: 10px; *//* stroke-dasharray: 10px 20px;1,2,3,依次取两个值(数组) *//* stroke-dasharray: 10px 20px 30px;1,2,3,依次取两个值 *//* stroke-dashoffset: 10px;偏移 *//* stroke-dashoffset: 200px--->0;可以实现谈满又情空 */stroke-dashoffset: 200px;animation: move 2s linear infinite alternate-reverse;}@keyframes move {0% {stroke-dashoffset: 200px;}100% {stroke-dashoffset: 0px;}}</style>
</head><body><svg width="500px" height="300px" style="border:1px solid"><line x1="100" y1="100" x2="200" y2="100" class="line1"></line></svg>
</body></html>32.svg的viewbox(比例尺)
<svg width="500px" height="300px" viewbox="0,0,250,150" style="border:1px solid"><!-- viewbox是宽高的一半 --><line x1="100" y1="100" x2="200" y2="100" class="line1"></line>
</svg>总结：SVG开发中不太用
33.audio与video播放器
<audio src="" controls></audio>
<video src="" controls></video>以上：太丑，不同浏览器不统一
34.视频播放器
加载不出来https://blog.csdn.net/qq_40340478/article/details/108309492
var express = require("express");
var app = new express();
app.use(express.static('./'));
app.listen(12306);
// 如果不能改变进度条
// 第36节的黑科技H5进阶
1.geolocation
<script>// 获取地理信息// 一些系统，不支持这个功能// GPS定位。台式机几乎都没有GPS，笔记本大多数没有GPS，智能手机几乎都有GPS// 网络定位 来粗略估计地理位置window.navigator.geolocation.getCurrentPosition(function(position){console.log("======");//成功的回调函数console.log(position);},function(){//失败的回调函数console.log("++++++");});//可以访问的方式：https协议，file协议，http协议下不能获取// 经度最大值180，纬度最大值90</script>https还是不能访问：
- 谷歌浏览器打开谷歌地图，无法定位
- 利用翻墙可以实现
2.四行写个服务器
手机访问电脑
sever.js
npm init
npm i express
var express = require('express');
var app = new express();
app.use(express.static("./page"));
app.listen(12306);//端口号大于8000或者等于80
// 默认访问80端口，express默认访问index.html
想访问里面的hello.html
127.0.0.1:12306
127.0.0.1:12306/hello.htmltest.7z
命令框或者vscode客户端，进入项目路径，node server.js
3.deviceorientation
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>document</title><link rel="stylesheet" href=""></head><body><div id="main"></div><script>// 陀螺仪,只有支持陀螺仪的设备才支持体感// 苹果设备的页面只有在https协议下，才能使用这些接口// 11.1.X以及之前，可以使用。微信的浏览器// alpha:指北(指南针) [0,360) 当为0的时候指北。180指南// beta:平放的时候beta值为0。当手机立起来(短边接触桌面)，直立的时候beta为90；// gamma:平放的时候gamma值为零。手机立起来(长边接触桌面)，直立的时候gamma值为90window.addEventListener("deviceorientation",function(event){// console.log(event);document.getElementById("main").innerHTML = "alpha:" + event.alpha + "<br/>" + "beta:" + event.beta + "<br/>" + "gamma:" + event.gamma});</script></body>
</html>4.手机访问电脑
1.手机和电脑在同一个局域网下
2.获取电脑的IP地址
windows获取ip：终端输入ipconfig
3.在手机上输入相应的IP和端口进行访问
5.devicemotion
<script>// 摇一摇window.addEventListener("devicemotion",function(event){document.getElementById("main").innerHTML = event.accelertion.x + "<br/>" + event.accelertion.y + "<br/>" + event.accelertion.z;if(Math.abs(event.accelertion.x) > 9 || Math.abs(event.accelertion.y) > 9|| Math.abs(event.accelertion.z) > 9){alert("在晃");}});
</script>6.requestAnimationFrame
/*function move(){var square = document.getElementById("main");if(square.offsetLeft > 700){return;}square.style.left = square.offsetLeft + 20 +"px"; }setInterval(move, 10);*/
// 屏幕刷新频率：每秒60次
// 如果变化一秒超过60次，就会有动画针会被丢掉// 实现均匀移动,用requestAnimationFrame,是每秒60针
// 将计就计setInterval(move, 1000/60);会实现同样效果吗
// 1针少于1/60秒，requestAnimationFrame可以准时执行每一帧的
// requestAnimationFrame(move);//移动一次
var timer = null;
function move(){var square = document.getElementById("main");if(square.offsetLeft > 700){cancelAnimationFrame(timer);return;}square.style.left = square.offsetLeft + 20 +"px"; timer = requestAnimationFrame(move);
}
move();
// cancelAnimationFrame基本相当于clearTimeout
// requestAnimationFrame兼容性极差兼容性极差还想使用咋办？
window.cancelAnimationFrame = (function(){return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function(id){window.clearTimeOut(id);}
})();window.requestAnimationFrame = (function(){return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(id){window.setTimeOut(id, 1000 / 60);}
})();7.localStrorage
cookie:每次请求都有可能传送许多无用的信息到后端
localStroage:长期存放在浏览器，无论窗口是否关闭
localStorage.name = "panda";
// localStroage.arr = [1, 2, 3];
// console.log(localStroage.arr);
// localStroage只能存储字符串，要想存储数组
localStorage.arr = JSON.stringify([1, 2, 3]);
// console.log(localStorage.arr);
console.log(JSON.parse(localStorage.arr));localStorage.obj = JSON.stringify({name: "panda",age: 18
});
console.log(JSON.parse(localStorage.obj));sessionStroage:这次回话临时需要存储时的变量。每次窗口关闭的时候，seccionStroage自动清空
sessionStorage.name = "panda";localStorage与cookie
1.localStorage在发送请求的时候不会把数据发出去，cookie会把所有数据带出去
2.cookie存储的内容比较(4k) ，localStroage可以存放较多内容(5M)
另一种写法
localStorage.setItem("name", "monkey");
localStorage.getItem("name");
localStorage.removeItem("name");相同协议，相同域名，相同端口称为一个域
注意：
www.baidu.com不是一个域。
http://www.baidu.com https://www.baidu.com,是域。这是不同域
8.history
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>document</title><style type="text/css"></style><script>// A -> B - C// 为了网页的性能，单页面操作var data = [{name: "HTML"}, {name: "CSS"}, {name: "JS"}, {name: "panda"}, {name: "dengge"}];function search() {var value = document.getElementById("search").value;var result = data.filter(function (obj) {if (obj.name.indexOf(value) > -1) {return obj;}});render(result);history.pushState({ inpVal: value }, null, "#" + value);}function render(renderData) {var content = "";for (var i = 0; i < renderData.length; i++) {content += "<div>" + renderData[i].name + "</div>";}document.getElementById("main").innerHTML = content;}window.addEventListener("popstate", function (e) {// console.log(e);document.getElementById("search").value = e.state.inpVal ? e.state.inpVal : "";var value = document.getElementById("search").value;var result = data.filter(function (obj) {if (obj.name.indexOf(value) > -1) {return obj;}});render(result);});// 关于popstate和hashchange// 只要url变了，就会触发popstate// 锚点变了(hash值变了)，就会触发hashchangewindow.addEventListener("hashchange", function (e) {console.log(e);})</script></head><body><input type="text" id="search"><button onclick="search()">搜索</button><div id="main"></div><script>render(data);</script></body></html>9.worker
<script>// js都是单线程的// worker是多线程的, 真的多线程, 不是伪多线程// worker不能操作DOM,没有window对象,不能读取本地文件。可以发ajax,可以计算// 在worker中可以创建worker吗？ // 在理论上可以，但是没有一款浏览器支持/*console.log("=======");console.log("=======");var a = 1000;var result = 0;for (var i = 0; i < a; i++) {result += i;}console.log(result);console.log("=======");console.log("=======");*/// 后两个等号只有等待算完才执行var beginTime = Data.now();console.log("=======");console.log("=======");var a = 1000;var worker = new Worker("./worker.js");worker.postMessage({num: a});worker.onmessage = function (e) {console.log(e.data);}console.log("=======");console.log("=======");var endTime = Data.now();console.log(endTime - beginTime);worker.terminate(); //停止this.close();//自己停止</script>worker.js
this.onmessage = function(e){//接受消息// console.log(e);var result = 0;for (var i = 0; i < e.data.num; i++) {result += i;}this.postMessage(result);
}worker.js里面可以通过importScripts("./index.js")引入外部js文件
强攻 前端HTML5 渡一学习记录相关推荐
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- 前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(二) 前言 定义 Model connect 起来 更新state 拥抱变化 主题切换 更换页面 获取当前设备类 ...
- 第一周前端web学习记录
第一周前端web学习记录 #什么是HTML.CSS? 如何写代码以及在哪里写 vs code 的基本使用方法 浏览器 网站开发 HTML 的结构基础和属性 创建标签 嵌套 HTML标签 设置属性 HT ...
- html5学习记录总结
文章目录 学习时间: 学习方式: 学习内容: 学习产出: 一.HTML简介 二.网页相关概念 2.1 概念 2.2 什么是HTML 2.3 网页的形成 2.4 常用的浏览器和内核 三.Web标准(重点 ...
- 前端逻辑练习题+学习记录 不定期更新
编程题 1.返回数组中最大的数字(reduce函数) largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1 ...
- 前端学习记录 —— HTML篇（下）
前端学习记录 -- HTML篇(下) 一.表格标签 table,tr,td 1. 表格标题 <caption></caption><caption></cap ...
- 前端学习记录 —— JavaScript（一）
前端学习记录 -- JavaScript(一) 前言 一.初识 JavaScript JavaScript 的特点 JavaScript的作用 编程语言与标记语言的区别 HTML/CSS/JS 的关系 ...
- 前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(一) 前言 现在的效果 安装 dva-cli 创建新应用 预览项目 文件结构简单介绍 使用 antd做页面 定义 ...
- 前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素 滑动门技术 微信导航栏实现 静态轮播图实现 网上引用的图标字体设置 过渡效果(transit ...
最新文章
- matlab读取一个文件的图片大小,Matlab读取文件夹中子文件夹中的图片并修改尺寸...
- 为什么每月工资一样，但扣的个税不一样？
- Java性能调优之让程序“飞”起来-Java 代码优化
- Linux 命令之 who -- 打印当前登录用户/显示目前登入系统的用户信息。
- 【面向对象】面向对象程序设计测试题4-Java中的类和对象测试
- 教育类网页设计灵感|容易阅读，条理清晰！
- Windows Phone本地数据库（SQLCE）：13、更新数据（翻译）
- MicroSIP软电话的安装和使用--从电脑上接听和拨打电话
- 计算机网络文化基础心得体会,提高计算机文化基础教学效果的几点心得
- pe系统进服务器2008,怎么用U盘启动win server 2008 pe？
- php接入外汇购物,兑换难！这些外币最好别带回国
- 转『天涯杂谈』那些让人惊艳的歌词（整理版），很经典，与大家分享。
- 区块链基本概念和名词解释
- Linux CreateRepo创建Repomd (xml-rpm-metadata)存储库
- 数据集处理之python生成.lst文件
- 机械臂末端执行器汇总
- JS实现文件下载(适应多种浏览器)
- 零基础学习HTML(7)——块级元素和行内元素
- 黑客入侵微软邮件服务器、Windows零日漏洞可获管理员权限｜11月23日全球网络安全热点
- 考研数据结构历年真题(选择题)整理