基于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 相关文章推荐
JavaScript开发时的五个注意事项
Dec 08 Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
深入理解Node内建模块和对象
Mar 12 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
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
laravel安装zend opcache加速器教程
2015/03/02 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
python 实现简单的FTP程序
2019/12/27 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Python实现动态循环输出文字功能
2020/05/07 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
什么是数组名
2012/05/10 面试题
宿舍使用违章电器检讨书
2014/01/12 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python