基于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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
javascript中的继承实例代码
Apr 27 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
Vue CL3 配置路径别名详解
May 30 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
PHP的FTP学习(四)
2006/10/09 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
JS实现碰撞检测的方法分析
2018/01/19 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
深入理解python对json的操作总结
2017/01/05 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python处理session的方法整理
2019/08/29 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
详解Python高阶函数
2020/08/15 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
收入证明怎么写
2015/06/12 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
Redis持久化与主从复制的实践
2021/04/27 Redis
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技