基于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 相关文章推荐
js中string转int把String类型转化成int类型
Aug 13 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
react-router中的属性详解
Jun 01 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
PHP聊天室技术
2006/10/09 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
实例解析php的数据类型
2018/10/24 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
jquery radio 操作代码
2011/03/16 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python远程邮件控制电脑升级版
2019/05/23 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
计算机网络毕业生自荐信
2013/10/01 职场文书
平安工地汇报材料
2014/08/19 职场文书
简单的辞职信模板
2015/05/12 职场文书
政审证明范文
2015/06/19 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript