使用JS实现动态时钟
更新时间：2020年03月12日 10:31:37 作者：披风超人
这篇文章主要为大家详细介绍了使用JS实现动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现动态时钟的具体代码，供大家参考，具体内容如下
利用setTime()实现动态的时钟效果
代码如下
<html>
<head>
<meta charset="utf-8">
<title>正在运行的时钟</title>
<style type="text/css">
/*设置样式：无边框的文本框*/
input,
#clock {
width: 390;
font-size: 30px;
font-weight: 900;
color: #FFFFFF;
background-color: #930;
border: 8px double #900;
}
</style>
</head>
<body onLoad="disptime( ) ">
<form name="myform">
<input name="myclock" type="text" value="" size="20">
</form>
<span id="clock"></span>
<script language="JavaScript">
function disptime() {
var time = new Date(); //获得当前时间
var year = time.getFullYear(); //获得年月日
var month = time.getMonth(); //获得年月日
var date = time.getDate(); //获得年月日
var hour = time.getHours(); //获得小时、分钟、秒
var minute = time.getMinutes();
var second = time.getSeconds();
if (minute < 10) //如果分钟只有1位，补0显示
minute = "0" + minute;
if (second < 10) //如果秒数只有1位，补0显示
second = "0" + second;
/*设置文本框的内容为当前时间*/
document.getElementById('clock').innerHTML = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" +
second
document.myform.myclock.value = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" + second
/*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/
var myTime = setTimeout("disptime()", 1000);
}
</script>
</body>
</html>
效果如图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js实现单层数组转多层树方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了Qt6基于Qml的文件对话框演示,包括打开单个文件配置和打开多个文件配置及保存文件配置的方法，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
下面小编就为大家带来一篇基于匀速运动的实例讲解(侧边栏,淡入淡出)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了微信小程序 点击控件后选中其它反选实例详解的相关资料,需要的朋友可以参考下2017-02-02
往往我们需要在 JS 中动态添加事件，这就涉及到浏览器兼容性问题了，以下谈及的几种方法，我们也常常混合使用。2008-11-11
本篇文章给大家分享了用11行简单的JS代码制作出二维码生成的简单功能，有兴趣的朋友参考下。2018-03-03
这篇文章主要介绍了js去除浏览器默认底图的方法,可以实现图片loading预加载效果,非常具有实用价值,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了js时间戳转为日期格式的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
很多网页都是框架结构的，在很多的情况下会通过按钮点击事件或链接，跳出框架转到其它界面。下面为大家介绍下js跳出页面的frameset框架2013-12-12
这篇文章给大家分享了js数据类型检测的相关实例内容，有需要的朋友可以测试下。2018-08-08
最新评论