基于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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
a标签调用js的方法总结
Sep 05 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python性能优化技巧
2015/03/09 Python
Python中return语句用法实例分析
2015/08/04 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python如何使用代码运行助手
2020/07/03 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
假日旅行社实习自我鉴定
2013/09/24 职场文书
工程造价专业大学生自荐信
2013/10/01 职场文书
市三好学生主要事迹
2014/01/28 职场文书
经理岗位职责范本
2015/04/15 职场文书
2016中秋节问候语
2015/11/11 职场文书
《藏戏》教学反思
2016/02/23 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP