js实现小时钟效果


Posted in Javascript onMarch 25, 2020

本文实例为大家分享了js实现小时钟效果的具体代码,供大家参考,具体内容如下

今天给大家分享一下制作小时钟

先给大家把代码分享出来

首先 JavaScript 代码

<script>
 
 function setTime(){
 var now = new Date();
 
 var year = now.getFullYear(); //获取现在的年份。
 var mouth = now.getMonth() + 1; //获取本年的月份,默认的是 0-11;所以进行加 1 操作;
 var date = now.getDate(); //获取日期,号
 
 var week = now.getDay(); //获取当前时段的星期
 var hour = now.getHours(); //获取当前时段的小时位
 var minute = now.getMinutes(); //获取当前时段的分钟位
 var second = now.getSeconds(); //获取当前时段的秒位
 
 var week1 = ['日' , '一' , '二' , '三' , '四' , '五' , '六']
 var week2 = week1[week];
 
 //从当前时间中提取出 年、月、日、周、时、秒、分
 a.innerHTML = year; 
 b.innerHTML = mouth;
 c.innerHTML = date;
 d.innerHTML = week;
 e.innerHTML = hour;
 f.innerHTML = minute;
 g.innerHTML = second;
 
 }
 setTime();
 
 //背景颜色
 function Color(){
 var w = parseInt(Math.random()*256);
 var j = parseInt(Math.random()*256);
 var t = parseInt(Math.random()*256);
 return `rgb(${w},${j},${t})`;
 }
 l.style.background = Color();
 setInterval(function(){
 setTime();
 l.style.background = Color();//背景颜色随机变化
 g.style.color = Color();//字体颜色随机变化
 g.style.background = Color();//背景颜色随机变化
 } , 1000)
 
</script>

大家可以看到,在这里我们主要用的是定时器。

// 定时器 
// 根据设定的时间间隔,来循环执行程序
// 只要定时器不停止,程序就会一直执行
 
// setInterval( 参数1 , 参数2 )
// 参数1:要执行的程序,必须是一个函数的形式 function(){ 定义程序 }
// 参数2:执行程序的间隔时间 单位是毫秒 
// 时间间隔不能无限小,与计算机的刷新频率有关
// 60Hz 60赫兹 代表,1秒刷新60次
// 1次就是 1000 / 60 ---- 16.666... 毫秒
// 你定义的程序的时间间隔,不能小于 16.6666... 毫秒
// 我们一般都定义最少 0.1秒,也就是 100毫秒 
 
// 每间隔1000毫秒,也是一秒,重复执行 function(){}中的程序

下面的是全部的代码

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div{
 width: 750px;
 margin: 100px auto;
 text-align: center;
 background-color: cyan;
 border-radius: 20px;
 padding: 50px 10px;
 font-size: 30px;
 }
 span{
 display: inline-block;
 background-color: gainsboro;
 font-size: 30px;
 padding: 10px 5px;
 border-radius: 4px;
 }
 </style>
 </head>
 <body>
 <div id="l">
 <span id="a"></span> 年  <span id="b"></span> 月 
  <span id="c"></span> 日  星期 <span id="d"></span> 
  <span id="e"></span> 时  <span id="f"></span> 分  
 <span id="g"></span> 秒
 </div>
 <script>
 
 function setTime(){
 var now = new Date();
 
 var year = now.getFullYear(); //获取现在的年份。
 var mouth = now.getMonth() + 1; //获取本年的月份,默认的是 0-11;所以进行加 1 操作;
 var date = now.getDate(); //获取日期,号
 
 var week = now.getDay(); //获取当前时段的星期
 var hour = now.getHours(); //获取当前时段的小时位
 var minute = now.getMinutes(); //获取当前时段的分钟位
 var second = now.getSeconds(); //获取当前时段的秒位
 
 var week1 = ['日' , '一' , '二' , '三' , '四' , '五' , '六']
 var week2 = week1[week];
 
 
 //从当前时间中提取出 年、月、日、周、时、秒、分
 a.innerHTML = year; 
 b.innerHTML = mouth;
 c.innerHTML = date;
 d.innerHTML = week2;
 e.innerHTML = hour;
 f.innerHTML = minute;
 g.innerHTML = second;
 
 }
 setTime();
 
 //背景颜色
 function Color(){
 var w = parseInt(Math.random()*256);
 var j = parseInt(Math.random()*256);
 var t = parseInt(Math.random()*256);
 return `rgb(${w},${j},${t})`;
 }
 l.style.background = Color();
 setInterval(function(){
 setTime();
 l.style.background = Color();//背景颜色随机变化
 g.style.color = Color();//字体颜色随机变化
 g.style.background = Color();//背景颜色随机变化
 } , 1000)
 
 </script>
 </body>
</html>

里面加了一些小样式:(颜色是随机变化的)

js实现小时钟效果

js实现小时钟效果

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
vue v-model的用法解析
Oct 19 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue页面更新patch的实现示例
Mar 25 #Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 #Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 #Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 #Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 #Javascript
安装多版本Vue-CLI的实现方法
Mar 24 #Javascript
js实现页面图片消除效果
Mar 24 #Javascript
You might like
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python关闭windows进程的方法
2015/04/18 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
python删除服务器文件代码示例
2018/02/09 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
Python中os模块功能与用法详解
2020/02/26 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
项目合作协议书
2014/04/16 职场文书
工商管理本科生求职信
2014/07/13 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
学术会议通知范文
2015/04/15 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL