时间效果如图

这里我主要用了一个计时器实现了每秒更新一次达到了此效果
如果觉得页面效果简单，还可以给时间的div加css样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 500px;line-height: 100px;border: 3px solid red;text-align: center;font-size: 22px;margin: 0 auto;}</style></head><body><div id="uu"></div><script>//获取div标签var _uu=document.querySelector("#uu");//写一个每隔一秒执行一次的函数var id=setInterval(function(){//获取日期对象var date=new Date();//获取日期对象的年月日星期时分秒var n=date.getFullYear();var y=date.getMonth()+1;  var r=date.getDate();var x=date.getDay();var s=date.getHours();var f=date.getMinutes();var m=date.getSeconds();//将获取的星期转换为字符串 (汉字)switch(x){case 0:x="日";break;case 1:x="一";break;case 2:x="二";break;case 3:x="三";break;case 4:x="四";break;case 5:x="五";break;case 6:x="六";break;}//12小时制  上午am 下午pmvar zh;if(s>=13){zh="pm";}else{zh="am";}if(s<10){s="0"+s;}if(f<10){f="0"+f;}if(m<10){m="0"+m;}_uu.innerHTML=`今天是${n}年${y}月${r}日   星期${x} ${s}:${f}:${m}${zh}`},1000)</script></body>
</html>

js javascript实现实时的时间相关推荐

HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
HTML+CSS+svg绘制精美彩色闪灯圣诞树, HTML+CSS+Js实时新年时间倒数倒计时(附源代码) 本篇目录一.前言二.主要功能三.效果展示四.编码实现步骤五.资源下载六.完整源代 ...
JavaScript 实现页面内时间实时倒计时计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数
JavaScript 实现页面内时间倒计时计时器可用于抢购倒计时,记录恋爱纪念日总时长等输出对应的天数小时分钟秒数注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制) 第一步:构 ...
js实现在页面实时显示时间，一个按钮控制时间暂停和开始
js实现在html实时显示时间,一个按钮控制时间暂停和开始.代码如下: <head><meta charset="UTF-8"><title>& ...
实时显示时间（HTML+JS）
原文地址:http://blog.csdn.net/qq_35952946/article/details/56012654 方法一:  & ...
十分钟时间搞懂怎么用JS代码渲染实时时间
给大家讲一下怎么用JS初级的内容来写一个页面实时渲染时间的方法目录先给大家看一下展示一下效果吧一.在这个效果上用的Date对象的方法二.这个效果的逻辑思路是什么呢? 1.我们应该先实例化一个D ...
js 实时显示服务器时间,js获取服务器实时时间
本文主要和大家分享js获取服务器实时时间,主要以代码的方法和大家分享,希望能帮助到大家. AJAX获取服务器时间 /* * ajax 函数,处理 ajax 请求 * @param function c ...
Moment.js插件学习:制作一个时间显示小案例
插件地址:http://momentjs.cn/ Moment.js是一个原生JavaScript 日期处理类库,使用起来也非常简单.但是注意它所得到的结果都是一个字符串,并且可以改变时间显示的格式. ...
Node.js毕业设计——基于Node.js+JavaScript+MongoDB的供求信息网站设计与实现（毕业论文+程序源码）——供求信息网站
基于Node.js+JavaScript+MongoDB的供求信息网站设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于Node.js+JavaScript+MongoDB的供求信息网站设计 ...
node mongoose_如何使用Express，Mongoose和Socket.io在Node.js中构建实时聊天应用程序
node mongoose by Arun Mathew Kurian 通过阿伦·马修·库里安(Arun Mathew Kurian) 如何使用Express,Mongoose和Socket.io在N ...

js javascript实现实时的时间

时间效果如图

js javascript实现实时的时间相关推荐

最新文章

热门文章