基于javascript实现动态时钟效果


Posted in Javascript onAugust 18, 2020

本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下

基于javascript实现动态时钟效果

实现代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态时钟</title>
<script type="text/javascript">
//在网页上输出:今天的日期、星期、现在的时间(动态时钟)
function start()
{
 var today=new Date();
 var year=today.getFullYear();
 var month=today.getMonth()+1;
 var day=today.getDate();
 var hours=today.getHours();
 var minutes=today.getMinutes();
 var seconds=today.getSeconds();
 //如果是单位数字,前面补0
 month=month<10? "0"+month :month;
 day=day<10? "0"+day :day;
 hours=hours<10? "0"+hours :hours;
 minutes=minutes<10? "0"+minutes :minutes;
 seconds=seconds<10? "0"+seconds :seconds;
 //时间信息连成字符串
 var str="今天是"+year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
 //获取id=result的内容
 var obj=document.getElementById("result");
 obj.innerHTML=str;
 //延时器
 window.setTimeout("start()",1000);
}
</script>
</head>
 
<body onload="start()">
<div id="result"></div>
</body>
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
微信小程序实现点击效果
Jun 21 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 #Javascript
灵活的理解JavaScript中的this指向
Feb 25 #Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 #Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 #Javascript
jQuery zTree加载树形菜单功能
Feb 25 #Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 #Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 #Javascript
You might like
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
端午节演讲稿
2014/05/23 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技