JavaScript实现页面电子时钟
更新时间：2022年06月21日 12:02:53 作者：super码力
这篇文章主要为大家详细介绍了JavaScript实现页面电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现页面电子时钟的具体代码，供大家参考，具体内容如下
题目：页面上有一个电子时钟，显示当前的年月日，时分秒，要求自动变化，双位显示，例如：九点九分九秒，显示为09:09:09
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子时钟</title>
<style>
.box {
width: 550px;
height: 70px;
background-color: seagreen;
border: 5px solid #ccc;
text-align: center;
border-radius: 10px;
font-size: 30px;
margin: 200px auto;
color: #fff;
}
.box span {
line-height: 70px;
}
</style>
</head>
<body>
<div class="box">
<span class="one"></span>
<span class="two"></span>
</div>
<script>
//刷新页面不出错
var timer = setTimeout(function() {
var one = document.querySelector('.one');
var two = document.querySelector('.two');
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ];
var day = arr[date.getDay()];
one.innerHTML = (year + '年' + month + '月' + dates + '日 ' + day);
two.innerHTML = (getTime());
clearInterval(timer);
});
//设置定时器
setInterval(function() {
//格式化日期 年月日
var one = document.querySelector('.one');
var two = document.querySelector('.two');
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ];
var day = arr[date.getDay()];
one.innerHTML = (year + '年' + month + '月' + dates + '日 ' + day);
two.innerHTML = (getTime());
}, 1000);
//要求封装一个函数返回当前的时分秒 格式：08：08：08
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
微信小程序第三方框架对比 之 wepy / mpvue / taro
这篇文章主要介绍了小程序第三方框架对比 ( wepy / mpvue / taro ) 分析，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-04-04
这篇文章主要介绍了用JS实现简单的登录验证功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-07-07
js中编码函数：escape,encodeURI与encodeURIComponent详解
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法，而他们之间的异同却困扰了很多的Javascript初学者，这篇文章详细的给大家介绍了js中编码函数：escape,encodeURI与encodeURIComponent的相关资料，需要的朋友可以参考下。2017-03-03
展开运算符(spread operator)允许一个表达式在某处展开,下面这篇文章主要给大家介绍了关于如何通过一文教会你如何在JavaScript中使用展开运算符的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了微信小程序自定义可滚动的弹出框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
在网上看到几个有意思的Javascript代码，和大家分享一下。直接将代码拷贝到IE中即可，注意代码为一样。不可分行2010-07-07
有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。2011-03-03
使用<web-view>标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的,下面这篇文章主要给大家介绍了关于微信小程序嵌入H5页面(web-view)的相关资料,需要的朋友可以参考下2022-09-09
javascript中的Base64、UTF8编码与解码详解
本文给大家介绍的是javascript中的Base64、UTF8编码与解码的函数源码分享以及使用范例，十分实用，推荐给小伙伴们，希望大家能够喜欢。2015-03-03
Javascript拖拽系列文章1之offsetParent属性
这个系列文章主要是讲述实现Javascript拖拽功能的基础知识，并将在最后给出一个完整的示例。适合对拖拽完全不懂的人阅读2008-09-09
最新评论