js 中 的时间类和 setTimeout 和setInterval
2024-06-03 13:39:59
首先贴代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.time {width: 500px;height: 400px;background-color: #000000;}.nian,.yue {height: 50%;color: aliceblue;text-align: center;font-size: 25px;}</style>
</head><body><div class="time"><div class="nian"> </div><div class="yue"> </div></div><script>function show1() {var mydate = new Date();var str = "" + mydate.getFullYear() + "年 ";str += kk((mydate.getMonth() + 1)) + "月 ";str += mydate.getDate() + "日 ";str += " 星期" + kk(mydate.getDay()) + " ";return str;}function show2() {var mydate = new Date();var hour = mydate.getHours() < 10 ? "0" + mydate.getHours() : mydate.getHours();var minute = mydate.getMinutes() < 10 ? "0" + mydate.getMinutes() : mydate.getMinutes();var second = mydate.getSeconds() < 10 ? "0" + mydate.getSeconds() : mydate.getSeconds();var str = hour + " : " + minute + " ： " + second;return str;}function kk(number) {var str = "";switch (number) {case 0:str = "日";break;case 1:str = "一";break;case 2:str = "二";break;case 3:str = "三";break;case 4:str = "四";break;case 5:str = "五";break;case 6:str = "六";break;case 7:str = "七";break;case 8:str = "八";break;case 9:str = "九";break;case 10:str = "十";break;case 11:str = "十一";break;case 12:str = "十二";break;};return str;}function update() {var nian = document.getElementsByClassName("nian")[0];var yue = document.getElementsByClassName("yue")[0];setInterval(function() {var str1 = show1();nian.innerHTML = str1;var str2 = show2();yue.innerHTML = str2}, 1000)}setTimeout(update(), 0);</script>
</body></html>js中settimeout和setInterval区别
setTimeout()方法
setTimeout()方法在等待指定的毫秒数之后执行一个函数。
语法:
|
1 2 3 |
|
例如，我们希望在用户按下“点击我！”按钮2秒后弹出一个提示框。
javascript代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><button onclick="setTimeout(gfg, 2000);">点击我！</button><script>function gfg(){alert('欢迎来到PHP中文网！');}</script></body></html>一旦用户按下“按我”按钮，然后在暂停2秒后，会弹出一个框。输出:
setInterval()方法
setInterval()方法在每个给定的时间间隔重复一个给定的函数。
语法:
|
1 2 3 4 |
|
代码示例如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><p>我会说“你好”很多次！</p><p id="GFG"></p><script>var myVar = setInterval(myTimer, 1000);function myTimer(){document.getElementById("GFG").innerHTML += "<p>你好</p>";}</script></body></html>每隔一秒就会显示一条新的“你好”消息。
然后：
js 时间类讲解：
方法一：获取JavaScript 的时间使用内置的Date函数完成
var mydate = new Date();
mydate.getYear(); //获取当前年份(2位)
mydate.getFullYear(); //获取完整的年份(4位,1970-????)
mydate.getMonth(); //获取当前月份(0-11,0代表1月)
mydate.getDate(); //获取当前日(1-31)
mydate.getDay(); //获取当前星期X(0-6,0代表星期天)
mydate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
mydate.getHours(); //获取当前小时数(0-23)
mydate.getMinutes(); //获取当前分钟数(0-59)
mydate.getSeconds(); //获取当前秒数(0-59)
mydate.getMilliseconds(); //获取当前毫秒数(0-999)
mydate.toLocaleDateString(); //获取当前日期
var mytime=mydate.toLocaleTimeString(); //获取当前时间
mydate.toLocaleString( ); //获取日期与时间1. 使用jquery获取设置时间
$(function(){$("#time").text(getnowtime());});function getnowtime() {var nowtime = new Date();var year = nowtime.getFullYear();var month = padleft0(nowtime.getMonth() + 1);var day = padleft0(nowtime.getDate());var hour = padleft0(nowtime.getHours());var minute = padleft0(nowtime.getMinutes());var second = padleft0(nowtime.getSeconds());var millisecond = nowtime.getMilliseconds(); millisecond = millisecond.toString().length == 1 ? "00" + millisecond : millisecond.toString().length == 2 ? "0" + millisecond : millisecond;return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second + "." + millisecond;
}//补齐两位数function padleft0(obj) {return obj.toString().replace(/^[0-9]{1}$/, "0" + obj);}<p id="time"> </p>2.格式一：（yyyy-MM-dd HH:mm:SS）
简约版
function show(){var mydate = new Date();var str = "" + mydate.getFullYear() + "年";str += (mydate.getMonth()+1) + "月";str += mydate.getDate() + "日";return str;}alert ( show() );或者可以使用下面的
function getFormatDate(){ var nowDate = new Date(); var year = nowDate.getFullYear(); var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1; var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate(); var hour = nowDate.getHours()< 10 ? "0" + nowDate.getHours() : nowDate.getHours(); var minute = nowDate.getMinutes()< 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes(); var second = nowDate.getSeconds()< 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds(); return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
}
var str = getFormatDate();
console.log(str);=====================具体获取函数
样例：
alert(new Date().format("yyyy年MM月dd日"));
alert(new Date().format("MM/dd/yyyy"));
alert(new Date().format("yyyyMMdd"));
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));方法二：重构Date对象：
Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "H+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt;
} 调用：
var nowTime=new Date().Format("yyyy-MM-dd");
console.log(nowTime);js 中 的时间类和 setTimeout 和setInterval相关推荐
- js中的两种定时器setTimeout()和setInterval()怎么用
JS有两种定时器分别是setTimeout()和setInterval(),这两个区别就是setTimeout()是一次性的定时器,而setInterval()是循环的定时器. 定时器的精度 js中的 ...
- js中两种定时器，setTimeout和setInterval的区别
2019独角兽企业重金招聘Python工程师标准>>> setTimeout只在指定时间后执行一次,代码如下: <script> //定时器 异步运行 function ...
- 关于js中的时间处理
关于js编程, 主要是, 绝大部分是用 jquery. 但是, js原生的一些方法和属性也是要掌握的, 这个只是在 遇到的时候, 记一下就好了, 如: event的relatedTarget属性: 主 ...
- js中获取时间new date()的用法
获取时间: var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFul ...
- Java中六大时间类的使用和区别
关于java中六个时间类的使用和区别 java.util.Date java.sql.Date java.sql.Time java.sql.Timestamp java.text.SimpleD ...
- Web前端笔记-字符串自适应tip提示框（适应大小自动换行JS中静态工具类实现）思路
程序运行截图如下: 下面提几个知识点. 第一个是JS中实现静态类,如下utils.js export let HHUtils = {}HHUtils .StaticClass = (function( ...
- js中获取时间new date()的用法和获取时间戳
获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位)2 myDate.getFu ...
- js中获取时间new Date()详细介绍
1.var myDate = new Date(); Date() 返回当日的日期和时间. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31). getDay() 从 Dat ...
- js中的Class类详解
目录 什么是类? 定义一个简单的类 定义一个类为Person,每个Person都会跑,都有名字 看一下Person类 和 Person的实例 但是为什么Person实例多出来的两个属性? new 一个 ...
最新文章
- 关于《关于一道C#上机题的一点想法》
- php cookie删除不了,php cookie删除不了怎么办
- linux下查看进程占用端口和端口占用进程命令
- sql limit不接具体数字_SQL别再秀操作了，这么写吧还是。
- 微软拥抱开源，Win10为啥要引入真Linux4.X内核？
- [初级]Java中的switch对整型、字符型、字符串的具体实现细节
- 张一鸣活捉上班摸鱼员工遭怒怼：不爽退群啊！
- python中concat的用法_python pandas concat用法及代码示例
- OpenHarmony 1.1.0 LTS 版本发布，十六大性能全面提升
- 利用有限自动机进行字符串匹配
- [android]netd与NetworkManagementService初印象
- vscode 转到实现方法失效_动图炫技23个鲜为人知的VS Code快捷键
- 银行卡四要素验证接口测试报告
- Vue侧导航栏的实现
- CodeForces 1009D Relatively Prime Graph 贪心+枚举
- java 函数参数后加throw_函数后面加throw关键字
- CNCC技术论坛｜分布式数据库HTAP的探索与实践
- 网络OSI七层及各层作用
- 【面试】--【集合容器】
- 阿里云服务器如何购买？三种方式可买（图文教程举例）