当前位置:首页 > 前端区域 > 正文内容

JS中的Date对象,网站运行计时器的制作

寒隙4年前 (2021-04-11)前端区域750

Date,在JS中用于处理日期和时间。

通过它可以做出计时器、倒计时以及各种与时间有关的触发行为。

参考内容:

渡一JavaScript体验课程;

W3School-JavaScript Date 对象;

经常使用的命令有:

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...

扫描二维码推送至手机访问。

版权声明:本文由寒日朝阳-精神小窝发布,如需转载请注明出处。

本文链接:http://www.gofortime.com/post/23.html

分享给朋友:

相关文章

胶囊式的CSS移动效果

胶囊式的CSS移动效果

一个胶囊式的css打开效果。用的基本html和css,当页源码为简化的基础版,而且是。高级版本演示:save.rthe.xyz/404HTML部分:<!--cente 选择元素用--> <d...

通过JS删除网址后缀 获取京东JPG图片下载地址

通过JS删除网址后缀 获取京东JPG图片下载地址

原名:JD图片批量下载方式探索解决方案:1、去浏览器的插件(拓展)中寻找各种图片工具,可以一键解决80%的问题。2、火狐浏览器 打开需要下载图片的页面 ,按下 Ctrl + i ,然后选择媒体,按住Shift批量选择图片...

准备做个壁纸站,然后似乎有点难办

准备做个壁纸站,然后似乎有点难办

idea前阵子突发奇想,想做个网站聚合的游戏官方壁纸站。毕竟现在的游戏很多都有“官方图集”这么一个栏目放在官网上,但是一个一个搜又太麻烦了。于是说干就干,先找个好看的模板,Halo挺好看的,就买服务器,看教程,安装模板,...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。