编程 Javascript

js实现一个简单的数字时钟效果

Posted in Javascript onMarch 29, 2017

效果图：

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

js实现一个简单的数字时钟效果

- Author -

bad丶小

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript判断用户浏览器插件安装情况的代码

Jan 01 Javascript

js添加select下默认的option的value和text的方法

Oct 19 Javascript

Jquery 实现table样式的设定

Jan 28 Javascript

jQuery实现垂直半透明手风琴特效代码分享

Aug 21 Javascript

JS传递对象数组为参数给后端,后端获取的实例代码

Jun 28 Javascript

Node.js + Redis Sorted Set实现任务队列

Sep 19 Javascript

JavaScript基于DOM操作实现简单的数学运算功能示例

Jan 16 Javascript

js实现json数组分组合并操作示例

Feb 12 Javascript

微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

Jul 16 Javascript

vue从零实现一个消息通知组件的方法详解

Mar 16 Javascript

vue 避免变量赋值后双向绑定的操作

Nov 07 Javascript

vue实现Toast组件轻提示

Apr 10 Vue.js

jquery实现tab键进行选择后enter键触发click行为

Mar 29 #jQuery

Vue2组件tree实现无限级树形菜单

Mar 29 #Javascript

整理关于Bootstrap列表组的慕课笔记

Mar 29 #Javascript

Vue.js 插件开发详解

Mar 29 #Javascript

整理关于Bootstrap过渡动画的慕课笔记

Mar 29 #Javascript

整理关于Bootstrap模态弹出框的慕课笔记

Mar 29 #Javascript

Angular2平滑升级到Angular4的步骤详解

Mar 29 #Javascript