时间 Date 循环计时器

js时间对象与计时器的简单应用

Date() 方法可返回当天的日期和时间
使用时：let toDate = new Date();

获取时间的几个方法：

getFullYear(); //获取年
getMonth(); //获取月
getDate(); //获取日
getDay(); //获取星期
getHours(); //获取时
getMinutes(); //获取分
getSeconds(); //获取秒
getMilliseconds(); //获取毫秒

HTML

<div class="divDemo" id="divDemo"><ul id="demo" class="demo"><li></li><li></li><li></li><li></li><li></li><li style="color: red; transition: all 0.3s;"></li><li style="display: none;color: red;"></li><li></li></ul>
</div>

CSS

<style type="text/css">*{margin: 0;padding: 0;}ul,li,ol{list-style: none;}.divDemo{width: 707px;margin: 20px auto;}.demo{width: 707px;height: 100px;border: 1px solid #8D8D8D;}.demo > li{float: left;display: inline-block;width: 100px;height: 100px;text-align: center;font-size: 28px;font-weight: bold;line-height: 100px;color: black;border-right: 1px solid #8D8D8D;}.demo > li:last-child{border: none;}.demo > li > span{color: #9b9b9b;padding: 0 10px;text-align: center;font-size: 18px;font-weight: bold;line-height: 100px;}</style>

JavaScript

// 获取时间 显示 循环计时器
let showTime = function () {let toDate = new Date();let upYears = toDate.getFullYear(); //获取年let upMonth = toDate.getMonth()+1; //获取月，js月份内部是[0-11]表示，所以须在获取后+1显示的才是实际月份let upToDay = toDate.getDate(); //获取日let upDay = toDate.getDay(); //获取星期，js星期内部是[0-6]表示，即['日','一','二','三','四','五','六']let upHours = toDate.getHours(); //获取时let upMinu = toDate.getMinutes(); //获取分let upSec = toDate.getSeconds(); //获取秒let upMiSec = toDate.getMilliseconds(); //获取毫秒// 时间格式  yyyy-MM-dd HH:mm:sslet toDay = upToDay >= 10 ? upToDay : '0' + upToDay;let toMonth = upMonth >= 10 ? upMonth : '0' + upMonth;let toMinu = upMinu >= 10 ? upMinu : '0' + upMinu;let toSec = upSec >= 10 ? upSec : '0' + upSec;//放入li中显示lis[0].innerHTML = upYears + '<span>年</span>';lis[1].innerHTML = toMonth + '<span>月</span>';lis[2].innerHTML = toDay + '<span>日</span>';lis[3].innerHTML = upHours + '<span>时</span>';lis[4].innerHTML = toMinu + '<span>分</span>';lis[5].innerHTML = toSec + '<span>秒</span>';lis[6].innerHTML = upMiSec + '<span style="display: inline-block;color: #8D8D8D;font-size: 14px;font-weight: bold;line-height: 100px;">ms</span>';lis[7].innerHTML = '<span>星期</span>' + arrDay[upDay];
};
showTime();//循环计时器
let mySelf = setInterval(function () {// window.location.reload();  //刷新页面showTime()
},1);//1毫秒一循环

循环计时器

setInterval(function(){},time);
第一个参数：执行的函数；
time：循环的时间–毫秒 //1000ms = 1s

清除计时器

clearInterval(mySelf);
mySelf->setInterval()

效果演示：

时间 Date 循环计时器相关推荐

JFrame时间输出、计时器
利用JFrame实现时间输出和计时器功能,输出当前时间XXXX年XX月XX日 xx时xx分xx秒.秒表,可以开始计时,暂停,继续计时和清零的功能.功能虽然简单,但挺好玩的.做的时候没有加入大量其他的 ...
JS-9 JS常见内置类；包装类型；Number类方法与实例方法；Math方法；String类常见方法；数组方法(增删改查+遍历+排序)；时间Date 构造函数+获取信息+设置信息+获取Unix时间戳
目录 1_包装类型 2_Number类补充 3_Math对象 4_String类的补充 4.1_基本使用 4.2_修改字符串 4.3_查找.替换字符串开头与结尾 4.4_获取子字符串 4.5_其他方 ...
Java 时间 Date类型，Long类型，String类型
2019独角兽企业重金招聘Python工程师标准>>> Java 日期时间 Date类型,long类型,String类型表现形式的转换 1.java.util.Date类型转换成lo ...
LINUX 下设置系统时间 DATE 命令
昨天发现数据库时间不对,修改系统时间, 来一个 DATE 08/05/13 把系统日期改乱了,搞得一些表中的时间全是错误的. 后来把重新修改,修改命令如下: 1 修改时间 #date -s 10:1 ...
Json 时间转换为 Javascript 时间 Date Jquery 调用WCF
"/Date(1232035200000)/" 怎么转换成 javascript 的 Date 对象做法:new Date(+/\d+/.exec(value)[1]); val ...
修改Linux系统日期与时间date clock
先设置日期 date -s 20080103 再设置时间 date -s 18:24:30 为了永久生效,需要将修改的时间写入CMOS. 查看CMOS的时间: #clock -r 将当前系统时间写到C ...
Linux时间date与timedatectl
date: date是Linux里日期管理命令 UTC 协调世界时,又称世界统一时间.世界标准时间.国际协调时间.由于英文(CUT)和法文(TUC)的缩写不同,作为妥协,简称UTC GMT 即格林尼治 ...
SetInterval（循环计时器）
SetInterval(循环计时器) 循环计时器(间隔计时器)setInterval() 参数2个第1个参数: 函数/字符串第2个参数: 时间间隔(单位ms) 省略时是10ms,小于10,也是10ms ...
java8的时间Date比较
java8提供了新的时间接口.相对Date,Calendar,个人感觉最大的好处是对时间操作的学习成本很低,比Calendar低. 1. LocalDate,LocalTime,LocalDateTi ...

时间 Date 循环计时器

时间 Date 循环计时器

js时间对象与计时器的简单应用

获取时间的几个方法：

循环计时器

清除计时器

效果演示：

时间 Date 循环计时器相关推荐

最新文章

热门文章