JS中的Date对象,网站运行计时器的制作
Date,在JS中用于处理日期和时间。
通过它可以做出计时器、倒计时以及各种与时间有关的触发行为。
参考内容:
经常使用的命令有:
Date() 返回当日的日期和时间。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
略微常用的命令有:
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份(四位数字)。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
解释:
运行Date(),浏览器将返回运行代码时的当时时间。
Date() //"Sun Apr 11 2021 19:51:39 GMT+0800 (中国标准时间)"
获取其中的单个具体时间,比如小时,则需要用到get开头的命令。
var aaa = new Date() aaa.getDate() //11
需要注意,有几个例外:
aaa.getDay() //0 aaa.getMonth() //3
程序是从0开始跑的,歪果仁的第一天是周日。
所以,周日会是周0,四月会是3月。
so,星期0改成7,月份结果要+1。
setInterval定时循环 和 setTimeout定时运行
如下,setInterval是一个定时循环,它将会每1000毫秒在页面中打印一个“测试”。
setInterval(function (){ document.write('测试' + " ") },1000);
如下,setTimeout只会执行一次,它将在代码运行5000毫秒后在页面中打印一个“蔺相如”,然后停止。
setTimeout(function (){ document.write('蔺相如' + " ") },5000);
而如果想让它俩运行一半就停止的话,也很简单。
运行clearInterval()和clearTimeout(),就可以将计时器清除了。
clearInterval(aaa); clearTimeout(aaa);
需要注意的是,setInterval和setTimeout尾部的时间是一个定值,不可以动态更改,不可以在程序开始运行后更改。
<script type="text/javascript"> var time = 1000; setInterval(function(){ console.log('a'); },time) time = 2000; </script>
即使time的值已经更改了,但是setInterval依然会以1000毫秒为间隔。
浏览器底部的建站计时,“本站已运行X天X月X日”。
网络上的代码是这样的,出处找不到了:
其中的”b = (a - A) * 24“我看不懂,无法理解为什么0.X天乘以24后会变成小时?
不过确实可以用。
<span id="runtime_span"></span> <script type="text/javascript"> function show_runtime() { window.setTimeout("show_runtime()", 1000); X = new Date("03/19/2021 15:30:00"); Y = new Date(); T = (Y.getTime() - X.getTime()); M = 24 * 60 * 60 * 1000; a = T / M; A = Math.floor(a); b = (a - A) * 24; B = Math.floor(b); c = (b - B) * 60; C = Math.floor((b - B) * 60); D = Math.floor((c - C) * 60); runtime_span.innerHTML = "本站勉强运行: " + A + "天" + B + "小时" + C + "分" + D + "秒" } show_runtime(); </script>
注:Math.floor()
用处:取整,舍弃小数点后的全部内容。
Math.floor( 45.95); // 45 Math.floor( 45.05); // 45
浏览器底部的建站计时-自己写的。
直接复制到html里就能用。
<div class="a"></div> <script type="text/javascript"> // 定位需要写入年月日内容的HTML元素 var aaatime = document.getElementsByClassName('a')[0]; // 一个setInterval定时循环,尾部“,1000”代表每1000毫秒执行一次,也就是1秒执行一次 setInterval(function() { // 设置网站上线时间 var lastName = new Date("03/19/2020 15:00:00"); // 获取打开网页时的时间 var firstName = new Date; // 新建一个对象,用于存储从网站上线到网页打开时经过的毫秒数 var zhs = firstName.getTime() - lastName.getTime(); // 总毫秒数除以一天的时间,获取天数 var iday = zhs / (1000 * 60 * 60 * 24); // 天数取整 var day = parseInt(iday); // 总毫秒数减去完整日子后,除以一小时的时间,获取小时数 var ih = (zhs - (day * (1000 * 60 * 60 * 24))) / (1000 * 60 * 60); // 小时数取整 var h = parseInt(ih); // 总毫秒数减去完整日子、完整小时后,除以一分钟的时间,获取分钟数 var iMin = (zhs - (day * (1000 * 60 * 60 * 24)) - (h * (1000 * 60 * 60))) / (1000 * 60); // 分钟数取整 var Min = parseInt(iMin); // 总毫秒数减去完整日子、完整小时、完整分钟后,除以一秒钟的时间,获取秒钟数 var is = (zhs - (day * (1000 * 60 * 60 * 24)) - (h * (1000 * 60 * 60)) - (Min * (1000 * 60))) / 1000; // 秒钟数取整 var s = parseInt(is); // 将所有整数汇入下方,innerHTML填写进页面中 aaatime.innerHTML = "本站勉强运行:" + day + "天" + h + "小时" + Min + "分" + s + "秒"; }, 1000); </script>
END...