Date对象补充

var oDate = new Date();console.log(Date.prototype);console.log(oDate.toString());  // Fri Apr 22 2022 11:23:19 GMT+0800 (中国标准时间)console.log(oDate.toDateString()); // Fri Apr 22 2022console.log(oDate.toTimeString());  // 11:24:22 GMT+0800 (中国标准时间)console.log(oDate.toLocaleString());  // 2022/4/22 11:25:42console.log(oDate.toLocaleDateString());  // 2022/4/22console.log(oDate.toLocaleTimeString());  // 11:25:42console.log(oDate.toUTCString());  // Fri, 22 Apr 2022 03:26:53 GMTconsole.log(oDate.toISOString());  // 2022-04-22T03:27:34.768Zconsole.log(oDate.valueOf());  // 1650598155772console.log(oDate.getTimezoneOffset());  // -480console.log(Date.UTC(2022,1,1));  // 1643673600000console.log(Date.parse("2022,1,1"));  // 1640966400000

计时器

循环计时器

循环持续不断地执行一段代码

setInterval(callback,ms)

callback：回调函数，当方法执行完以后执行
ms ：毫秒数

setInterval(function(){console.log('这是循环定时器');},1000)

清除循环定时器：clearInterval(name)；

我们要给定时去先创建一个名字，才能方便清除定时器


<body><button id="start">开始</button><button id="end">结束</button>
</body>
<script>// 获取事件源var start = document.getElementById('start');var end = document.getElementById('end');// 声明一个函数function func(){console.log('这是循环定时器');}// 声明变量用于给定时器命名var timer;// 给开始按钮添加点击事件start.onclick = function(){timer = setInterval(func,1000);}// 给结束按钮添加点击事件，清除定时器end.onclick = function(){clearInterval(timer);}
</script>

延迟/延时定时器

根据设置的时间执行一次代码，执行一次后不再执行

setTimeout(callback,ms)

callback：回调函数，当方法执行完以后执行
ms ：毫秒数

    setTimeout(function(){console.log('这是延迟定时器');},5000)

清除延迟定时器：clearTimeout(name);

用法同清除循环定时器的相同


<body><button id="start">开始</button><button id="end">结束</button>
</body>
<script>// 获取事件源var start = document.getElementById('start');var end = document.getElementById('end');// 声明一个函数function func(){console.log('这是延迟定时器');}// 声明变量用于给定时器命名var timer;// 给开始按钮添加点击事件start.onclick = function(){timer = setTimeout(func,1000);}// 给结束按钮添加点击事件，清除定时器end.onclick = function(){clearTimeout(timer);console.log('清除');}
</script>

案例练习

日历时间


<body><span></span><div></div>
</body>
<script>var scr = document.querySelector('span');var scr2 = document.querySelector('div');var day = ['日', '一', '二', '三', '四', '五', '六'];// 封装补零的函数function time2(num) {return num < 10 ? '0' + num : num;}function toDay() {var thisY = new Date();var thisYear = thisY.getFullYear();  // 获得年份var thisMonth = time2(thisY.getMonth() + 1);   // 获得月份var thisDate = time2(thisY.getDate());  // 获得日期var thisHour = time2(thisY.getHours());var thisMinute = time2(thisY.getMinutes());var thisSecond = time2(thisY.getSeconds());var thisDay = thisY.getDay();scr.innerHTML = thisYear + '年' + thisMonth + '月' + thisDate + '日' + '星期' + day[thisDay] + thisHour + '时' + thisMinute + '分' + thisSecond + '秒'}// 定时器setInterval(toDay, 100)

打印机


<body><p></p>
</body>
<script>// 获取事件源var text = document.querySelector('p');var str = '先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏，臣不胜受恩感激。今当远离，临表涕零，不知所言。'var i=0;setInterval(function () {       text.innerHTML += str[i];i += 1;}, 500)
</script>

总结

终于js的核心语法学习完了，开始接触DOM部分了，今天学习了定时器，感觉非常开心，这个东西实在太有意思了，虽然一开始用的时候很生疏，但经过老师的练习，明显有了进一步地掌握。那由于时间的问题，这篇博客没有当天发，隔了一天才发，而对于核心语法部分的总结也没有来得及做，那我会在这两天抓紧把它补上来，加油！乘风破浪会有时，直挂云帆济沧海！

JavaScript学习第十一天（Date、定时器）相关推荐

JavaScript学习（十一）—selected属性、checked属性、class属性的操作
JavaScript学习(十一)-selected属性.checked属性.class属性的操作对于checked属性.selected属性,如果要表示选中状态,则将他们的值设置为true,如果要表 ...
JavaScript 学习手册二
JavaScript 学习手册二:JS 数据类型第1关:JavaScript 数据类型介绍任务描述本关任务:在函数 objectTest() 内部定义了六个变量 a.b.c.d.e.f,并已经赋 ...
JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习05 定时器
JavaScript学习05 定时器定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout("<表达式> ...
JavaScript学习（八十一）—将多维数组转化为一维数组
JavaScript学习(八十一)-将多维数组转化为一维数组
JavaScript学习（七十一）—call、apply、bind学习总结
JavaScript学习(七十一)-call.apply.bind学习总结一.call方法 call方法调用一个对象,简单的理解为调用函数的方式,但是它可以改变函数的this指向二.apply() ...
JavaScript学习（六十一）—json字符串的解析和JS 对象的序列化
JavaScript学习(六十一)-json字符串的解析和JS 对象的序列化一.json字符串的解析:parse方法将json字符串转换为js对象,我们把这个过程称为json字符串的解析格式:J ...
JavaScript学习（五十一）—实训题
JavaScript学习(五十一)-实训题实训1 定义一个长方形的构造函数(有参数,通过参数给属性赋值)属性:长.宽方法:面积.周长通过这个构造方法创建3个对象,计算面积和周长实训2 定义创建等边 ...
JavaScript学习（四十一）—字面量形式创建对象的注意事项和不足
JavaScript学习(四十一)-字面量形式创建对象的注意事项和不足一.字面量形式创建对象的注意事项如果对象没有名称则该对象称之为匿名对象. 对象名保存对象在堆内存中的地址,通过该地址可以找到堆 ...

JavaScript学习第十一天（Date、定时器）

文章目录