搜索到
55
篇与
大祥子
的结果
-
-
-
4行关键JS实现的一个类似于打字的特效，超简单JS实现打字效果 效果展示如下： js实现打字特效 这是只用了4行关键JS实现的一个类似于打字的特效，给你一个不一样的思路! 点击这里可以直接去我的博客! // html文字类似于打字特效 function typewriting(){ // 定义数字长度为零 var index=0; // 获取文字内容，我这里直接在页面上写出来然后隐藏的，也可以动态加载哦 var word=document.getElementById("title").innerHTML; // 封装任务 function type(){ // 获取打字在哪个位置，substring()方法提取字符串（获取到的word里）中介于两个指定下标之间的字符（起始为0，运行一次自增一次）。 document.getElementById("text").innerText = word.substring(0,index++); } setInterval(type, 100); // 100毫秒调用一次type任务 } typewriting(); // 执行typewriting 代码块如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现打字特效</title> <!-- 移动设备 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style type="text/css"> a{ text-decoration: none; display: inline-block; color: black; font-size: 20px; padding: 10px; } div{ width: 330px; height: auto; border: 1px solid #CCC; margin: 10px auto; padding: 10px; text-indent: 10px; border-radius: 10px; box-shadow: 2px 2px 3px #CCC } #title{ display: none; } </style> </head> <body> <span id="title">这是只用了4行关键JS实现的一个类似于打字的特效，给你一个不一样的思路! 点击这里可以直接去我的博客!</span> <div> <a href="https://blog.fxnws.com" id="text"></a> </div> <script type="text/javascript"> // html文字类似于打字特效 function typewriting(){ // 定义数字长度为零 var index=0; // 获取文字内容，我这里直接在页面上写出来然后隐藏的，也可以动态加载哦 var word=document.getElementById("title").innerHTML; // 封装任务 function type(){ // 获取打字在哪个位置，substring()方法提取字符串（获取到的word里）中介于两个指定下标之间的字符（起始为0，运行一次自增一次）。 document.getElementById("text").innerText = word.substring(0,index++); } setInterval(type, 100); // 100毫秒调用一次type任务 } typewriting(); // 执行typewriting </script> </body> </html>
-
JS计算固定时间距当前时间-多少天-多少小时-精确到秒 首先把页面主体显示区域写出来。<h3 id="loveTime">我们已经相爱：<span></span>天<span></span>小时<span></span>分<span></span>秒</h3> 下面来写JS语句获取页面显示区域：var loveTime = document.getElementById("loveTime").getElementsByTagName("span");先声明固定的日期时间和当前日期时间，计算两个时间差，取值取整，页面上显示出来即可，完整代码如下<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h3{ width: 400px; height: 100px; line-height: 95px; border:1px solid #CCC; border-radius: 10px; box-shadow: 2px 2px 3px #CCC; text-align: center; margin: 10px auto; } </style> </head> <body> <h3 id="loveTime">我们已经相爱：<span></span>天<span></span>小时<span></span>分<span></span>秒</h3> </body> <script> var loveTime = document.getElementById("loveTime").getElementsByTagName("span"); setInterval(function(){ var love = "2019-05-07 05:20:14"; // 声明现在的时间和未来的时间 var onTime = new Date(); var time = new Date(love); // 获得两个时间差 var num = onTime.getTime()-time.getTime(); // alert(num.substring(0, num.indexOf('-'))); // 计算天数(24小时60分钟60秒*1000毫秒) parseInt()取整 var day = parseInt(num/(24*60*60*1000)); // 获得去除天数后剩余的毫秒数 num = num%(24*60*60*1000); // 计算小时和获得去除小时后剩余的毫秒数 var hour = parseInt(num/(60*60*1000)); num = num%(60*60*1000); // 计算分钟和获得去除分钟后剩余的毫秒数 var minute = parseInt(num/(60*1000)); num = num%(60*1000); // 计算秒 var seconde = parseInt(num/1000); // 页面上显示 loveTime[0].innerHTML = day; loveTime[1].innerHTML = hour; loveTime[2].innerHTML = minute; loveTime[3].innerHTML = seconde; },100) </script> </html>
-
H5调用win10系统通知 可以复制下来直接保存为.html文件打开即可<!DOCTYPE html> <html> <head> <title>H5调用win10系统通知</title> </head> <body> <script type="text/javascript"> // 先去判断浏览器是否支持唤醒 if (window.Notification) { let popNotice = () => { if (!Notification.permission === 'granted') return const notification = new Notification('您有一个新提醒', { body: '下班啦！快跑，赶紧跑！' }) // 点击事件，点击后通知的跳转 notification.onclick = function () { window.open('https://blog.fxnws.com') notification.close() } } /* 授权过通知 */ if (Notification.permission === 'granted') { popNotice() } else { /* 未授权，先询问授权 */ Notification.requestPermission(function (permission) { popNotice() }) } } </script> </body> </html>
