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 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
JS实现图片切换效果
Nov 17 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
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
做个自己站内搜索引擎
2006/10/09 PHP
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
PHP引用的调用方法分析
2016/04/25 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python实现学生管理系统
2018/01/11 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python eval函数介绍及用法
2020/11/09 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
依法行政工作汇报
2014/10/28 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
户外亲子活动总结
2015/05/08 职场文书
小学校长开学致辞
2015/07/29 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS