人间小美味695
探索云世界
人间小美味695
前端博主 | 人间小美味695，一个佛系博主，一个充满好奇心的前端从业者，撸过JS原生，写过JQ后台，做过VUE移动端，玩过mini-program微信小程序，微信订阅号同名【人间小美味695】。愿意学习和尝试，乐于帮助和分享。
内容介绍 最近事情有点多，参加新星计划也接近尾声，顾不上更新文章是个问题，最后决定水一篇，但是又不能太水，所以就有了学习时候的这个案例（论如何光明正大的水）。一、效果图二、实现代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一个按钮控制定时器的开始与暂停</title> <script type="text/javascript"> var intervalId; var i = 0; var count = 0; function startTime() { var hour = document.getElementById("hour"); var minute = document.getElementById("minute"); var second = document.getElementById("second"); var ms = document.getElementById("ms"); var buttonEle = document.getElementById("start"); if (i % 2 == 0) { buttonEle.innerHTML = "暂停计时"; intervalId = setInterval(function() { count += 1; var thehour = parseInt(count / 360000); var theminute = parseInt(count / 6000 % 60); var thesecond = parseInt(count / 100 % 60); var thems = parseInt(count % 100); if (thehour >= 10) { hour.innerHTML = thehour + " "; } else { hour.innerHTML = "0" + thehour + " "; } if (theminute >= 10) { minute.innerHTML = theminute + " "; } else { minute.innerHTML = "0" + theminute + " "; } if (thesecond >= 10) { second.innerHTML = thesecond + " "; } else { second.innerHTML = "0" + thesecond + " "; } if (thems >= 10) { ms.innerHTML = thems + "&nbsp;"; } else { ms.innerHTML = "0" + thems + "&nbsp;"; } }, 10) } else { buttonEle.innerHTML = "开始计时"; clearInterval(intervalId); } i++; } </script> <style type="text/css"> body, html { background: violet; /*position: relative;*/ } #firstDiv { height: 50%; width: 50%; position: absolute; margin-left: 350px; margin-top: 150px; background: #ffcccc; } #twoDiv { height: 200px; width: 100%; position: absolute; margin-top: 130px; margin-left: 130px; ; } span { font-size: 30px; } button { font-size: 20px; } </style> </head> <body> <div id="firstDiv"> <div id="twoDiv"> <span><span id="hour">00&nbsp;</span>时</span> <span><span id="minute">00&nbsp;</span>分</span> <span><span id="second">00&nbsp;</span>秒</span> <span><span id="ms">00&nbsp;</span>毫秒</span> <button id="start" onclick="startTime()">开始计时</button> </div> </div> </body> </html>三、注案例不分大小，有想法的小伙伴可以优化结构布局，重新封装函数，或者增加更多有趣的功能，如重置按钮、分段计时等。标签：JavaScript，定时器更多演示案例，查看 案例演示欢迎评论留言!
内容介绍 结合table表格和checkbox复选框实现单选与全选功能（本文只考虑功能实现，样式不要在意，虽然及丑，但我看不到 φ(>ω<*) ）。一、效果图 :point_down: :point_down: :point_down: :point_down: :point_down:三、实现代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>单选与全选</title> </head> <body> <h1>单选与全选：</h1> <table border="1"> <tr> <th><input type="checkbox"></th> <th>单元格2</th> <th>单元格3</th> <th>单元格4</th> </tr> <tr> <td><input type="checkbox"></td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> </tr> <tr> <td><input type="checkbox"></td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> </tr> <tr> <td><input type="checkbox"></td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> </tr> </table> <script> var oneChecked = document.querySelectorAll('td>input'); var allChecked = document.querySelector('th>input'); allChecked.onclick = function() { for (var i = 0; i < oneChecked.length; i++) { if (this.checked) { oneChecked[i].checked = true; } else { oneChecked[i].checked = false; } } } oneChecked.forEach(function(ele) { ele.onclick = function() { var checkedEle = document.querySelectorAll('td>input:not(:checked)'); if (!checkedEle.length) { allChecked.checked = true; } else { allChecked.checked = false; } } }) </script> </body> </html>三、注理清 thead 与 tbody 复选框是否选中的关联关系即可。标签：JavaScript，单选与全选更多演示案例，查看 案例演示欢迎评论留言!
内容介绍 我们在浏览网页的过程中经常会有看到一些丧心病狂的广告，这些广告不仅影响正常浏览，甚至会遮挡主要内容，给用户造成极大困扰。今天分享一去除广告或者指定元素的优秀插件——Adblock Plus。1、屏蔽前2、屏蔽后3、安装Adblock Plus插件⑴ 安装方法https://blog.csdn.net/cainiaoyihao_/article/details/115486986⑵ 插件项目⑶ 设置项目①、拦截特定元素标签：Adblock Plus，去除广告，Chrome浏览器，插件更多演示案例，查看 案例演示欢迎评论留言!
内容介绍 navigator对象中有一些不常用的API，以下主要介绍vibrate振动,deviceorientation重力感应,online联网状态，getBattery系统电量信息，visibilitychange页面可见性，toDataURL（canvas转base64），orientationchange监听屏幕旋转和fullScreen元素全屏显示。一、vibrate振动1、判断设备是否支持振动// 判断设备是否支持振动（部分浏览器不支持）——vibrate var vibrateStatus = window.navigator.vibrate();2、单次震动// 单次震动200ms window.navigator.vibrate(200); window.navigator.vibrate([200]);3、间接振动// 间接振动（振动100ms,暂停200ms,继续振动300ms,暂停400ms...,奇数振动,偶数暂停） window.navigator.vibrate([100, 200, 300, 400]);4、停止振动// 停止振动（空白,[0]或数组全部为0） window.navigator.vibrate(); window.navigator.vibrate([0]); window.navigator.vibrate([0, 0, 0]);5、持续振动// 持续振动（使用setInterval和clearInterval控制开始和停止） var vibrateInterval; function startVibrate(duration) { navigator.vibrate(duration); } function stopVibrate() { if (vibrateInterval) clearInterval(vibrateInterval); navigator.vibrate(0); } function startPeristentVibrate(duration, interval) { vibrateInterval = setInterval(function() { startVibrate(duration); }, interval); }二、deviceorientation重力感应// 重力感应方向输出——deviceorientation if (window.DeviceOrientationEvent) { window.addEventListener("deviceorientation", function(event) { // alpha: 在Z轴上的角度 var rotateDegrees = event.alpha; // gamma: 从左到右 var leftToRight = event.gamma; // beta: 从前到后的运动 var frontToBack = event.beta; handleOrientationEvent(frontToBack, leftToRight, rotateDegrees); }, true); } var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) { // TODO };三、online浏览器联网状态1、获取当前联网状态// 获取当前联网状态 if (navigator.onLine) { alert('online') } else { alert('offline'); }2、监听联网变化状态// 监听联网变化状态 window.addEventListener("offline", function(e) { alert("offline"); }) window.addEventListener("online", function(e) { alert("online"); })四、getBattery系统电量信息 getBattery提供系统电量信息，返回一个battery的promise对象，然后resolve得到BatteryManager对象// getBattery提供系统电量信息，返回一个battery的promise对象，然后resolve得到BatteryManager对象 navigator.getBattery().then(function(battery) { console.log(battery) // 布尔值，当前是否正在充电 let charging = battery.charging, // 数字，代表距离充电完毕还剩多少秒， 0 为充电完毕 chargingTime = battery.chargingTime, // 数字， 代表距离电池耗空并挂起还需多少秒 dischargingTime = battery.dischargingTime, // 代表电量，0.0-1.0 level = battery.level; // 电池充电状态更新时调用 battery.addEventListener('chargingchange', function() { alert(battery.charging ? '在充电' : '没在充电') }) // 电池充电时间更新时触发 battery.addEventListener('chargingtimechange', function(info) { console.log(info) }) // 电池断开充电时间更新时触发 battery.addEventListener('dischargingtimechange', function(info) { console.log(info) }) // 电池电量更新时触发 battery.addEventListener('levelchange', function(info) { console.log(info) }) });五、visibilitychange页面可见性// 页面可见性： document.addEventListener("visibilitychange", function() { document.title = document.hidden ? "用户离开了" : "用户回来了"; });六、toDataURL（canvas转base64）<canvas width="200" height="500"></canvas>let canvas = document.querySelector('canvas'); let pen = canvas.getContext('2d'); pen.lineTo(100, 50); pen.lineTo(150, 100); pen.lineTo(100, 100); pen.lineTo(100, 50); pen.lineTo(100, 300); pen.lineTo(80, 300); pen.lineTo(50, 330); pen.lineTo(150, 330); pen.lineTo(120, 300); pen.lineTo(100, 300); pen.strokeStyle = 'red'; pen.stroke(); var img = document.createElement("img"); img.src = canvas.toDataURL("image/png"); // 输出base64 console.log(img.src);七、orientationchange监听屏幕旋转window.addEventListener("orientationchange", () => { document.body.innerHTML += `<p>屏幕旋转后的角度值：${window.orientation}</p>`; }, false);可结合vconsole在移动端进行测试，使用方法如下：移动端调试工具vconsole使用方法：https://blog.csdn.net/cainiaoyihao_/article/details/115461949<!-- 引入vconsole --> <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>// 初始化 var vConsole = new VConsole();完整代码：<body> <!-- 引入vconsole --> <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script> <script> // 初始化 var vConsole = new VConsole(); window.addEventListener("orientationchange", () => { console.log(window.orientation); document.body.innerHTML += `<p>屏幕旋转后的角度值：${window.orientation}</p>`; }, false); </script> </body>八、fullScreen元素全屏显示// Esc退出全屏状态 // document.documentElement.webkitRequestFullScreen(); document.getElementById("csdn-toolbar").webkitRequestFullScreen();注： 部分浏览器不支持，注意兼容性标签：javascript，navigator，振动，重力感应，联网状态，系统电量，页面可见性，canvas转base64，监听屏幕旋转，元素全屏显示更多演示案例，查看 案例演示欢迎评论留言!
2023年02月
回答了问题
2023-02-01 22:53:53
2022年11月
发表了文章
2022-11-24 15:25:01
发表了文章
2022-11-22 23:45:13
发表了文章
2022-11-20 11:39:08
发表了文章
2022-11-19 16:26:02
发表了文章
2022-11-18 15:57:43
发表了文章
2022-11-24
发表了文章
2022-11-22
发表了文章
2022-11-20
发表了文章
2022-11-19
发表了文章
2022-11-18
