js实现一个简单的数字时钟效果
更新时间：2017年03月29日 10:06:36 作者：bad丶小
本文主要介绍了js实现一个简单的数字时钟效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
效果图：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>一个简单的数字时钟</title>
<script type="text/javascript" charset="utf-8">
// 定义一个函数用以显示当前时间
function displayTime() {
var elt = document.getElementById("clock"); // 通过id= "clock"找到元素
var now = new Date(); // 得到当前时间
elt.innerHTML = now.toLocaleTimeString(); //让elt来显示它
setTimeout(displayTime,1000); //在1秒后再次执行
}
window.onload = displayTime; //当onload事件发生时开始显示时间
</script>
<style type="text/css" media="all">
#clock {
font: bold 24pt sans;
background: #ddf;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>一个简单的数字时钟</h1>
<span id="clock"></span>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript callback回调函数用法,结合实例形式分析了callback回调函数的概念、功能、应用场景及相关使用技巧,需要的朋友可以参考下2018-05-05
客户端JS验证fileupload控件，设置只允许特定的文件类型 ，当然服务器端更要判断啊。这里是为了后台验证的更顺利。2009-11-11
循环遍历一个元素是开发中最常见的需求之一,下面这篇文章主要给大家介绍了关于JavaScript中如何跳出forEach循环的相关资料,文章通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
JavaScript 是一种强大但被误解的语言。关于它到底是一种面向对象的语言还是函数式语言，人们众说纷纭——但是现在让我们把这些争辩都抛到脑后。2014-07-07
关于JavaScript的gzip静态压缩方法...2007-01-01
这篇文章主要为大家详细介绍了JavaScript如何实现当文本内容过长时,中间显示省略号...,两端正常展示,有需要的小伙伴可以跟随小编一起学习一下2024-02-02
浏览器出于安全和隐私的考虑,限制了用代码将网页加入浏览器的收藏夹,本文主要介绍了如何使用通过一些间接的方法实现这一功能,有需要的可以参考下2024-10-10
这篇文章主要为大家详细介绍了js实现电子时钟功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了JSON与js对象序列化,结合实例形式详细分析了JavaScript与JSON序列化操作的相关实现技巧与注意事项,需要的朋友可以参考下2017-03-03
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍路径分页标签与徽章组件，感兴趣的朋友一起学习吧2016-04-04
最新评论