用JS做一个简易的时间显示动态效果

运行效果

代码

<!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>time</title><style>* {margin: 0px;padding: 0px;box-sizing: border-box;color: gray;transition: 0.5s;}body {display: flex;justify-content: center;align-items: center;background-color: white;}.wrap {position: relative;width: 100%;}body::-webkit-scrollbar {display: none;}.bwbtn {position: absolute;top: 20px;right: 20px;height: 50px;width: 50px;border-radius: 50%;border: 1px solid gray;}.timebox,.datebox {user-select: none;}.timebox {font-size: 120px;text-align: center;line-height: 95vh;height: 80vh;}.datebox {font-size: 36px;height: 20vh;line-height: 10vh;text-align: right;padding: 30px;}@media screen and (max-width:940px) {.timebox {font-size: 50px;}.datebox {font-size: 20px;padding: 20px;}.bwbtn {height: 30px;width: 30px;}}</style>
</head><body><div class="wrap"><div class="bwbtn" onclick="bwchange()"></div><div class="timebox"></div><div class="datebox"></div></div><script>var timebox = document.querySelector('.timebox')var datebox = document.querySelector('.datebox')setInterval(() => {var time = new Date();// 显示当前年var year = time.getFullYear();// 显示当前月var month = time.getMonth() + 1;switch (month) {case 1:month = "January"break;case 2:month = "February"break;case 3:month = "March"break;case 4:month = "April"break;case 5:month = "May"break;case 6:month = "June"break;case 7:month = "July"break;case 8:month = "August"break;case 9:month = "September"break;case 10:month = "October"break;case 11:month = "November"break;default:month = "December"break;}// 显示当前日var day = time.getDate();// 显示当前时var hour = time.getHours();if (hour < 10) {hour = "0" + hour}// 显示当前分var minute = time.getMinutes();if (minute < 10) {minute = "0" + minute}// 显示当前秒var second = time.getSeconds();if (second < 10) {second = "0" + second}// 显示当前星期var week = time.getDay();switch (week) {case 1:week = "Monday"break;case 2:week = "Tuesday"break;case 3:week = "Wednesday"break;case 4:week = "Thursday"break;case 5:week = "Friday"break;case 6:week = "Saturday"break;default:week = "Sunday"break;}// day转换为字符串var daystr = day + ""//获取day字符串的最后一位字符var daychar = daystr.charAt(daystr.length - 1)if (daychar == "1") {if (daystr == "11") {day = day + "th"} else {day = day + "st"}} else if (daychar == "2") {if (daystr == "12") {day = day + "th"} else {day = day + "nd"}} else if (daychar == "3") {if (daystr == "13") {day = day + "th"} else {day = day + "rd"}} else {day = day + "th"}timebox.innerHTML = hour + ' : ' + minute + ' : ' + second;datebox.innerHTML = month + ' ' + day + ' ' + year + ' ' + week;}, 1000);// 设置初始开关的值var isSwitch = false;// 黑白切换按钮function bwchange() {var bwbtnx = document.querySelector('.bwbtn')var mainx = document.querySelector('body')isSwitch = !isSwitch;if (isSwitch == true) {mainx.style.backgroundColor = 'black'} else {mainx.style.backgroundColor = 'white'}}</script>
</body></html>

如果有什么改进的地方欢迎留言评论，感谢！

用JS做一个简易的时间显示动态效果相关推荐

2020 用html做一个简单的时间显示（12小时制）
用前端html做一个简单的时间显示(12小时制) 如图所示显示年月日.时间.上下午以及星期几功能: 1. 此代码解决时间比如秒数为单数时,在前面补0 //值小于10时,在前面补0 functio ...
js 月份间隔计算器_15分钟用JS做一个简易计算器
原标题:15分钟用JS做一个简易计算器前言这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...
JS + CSS 做一个简易九宫格抽奖
目录 1.CSS样式 2.JS动作大概做出来就是这个样子,alert的弹窗样式我也没改,就默认的. 1.CSS样式样式大概分以下方面: 创建外框及内框样式: 8个奖品小方格和中间按钮小方格: 奖品 ...
用js做一个数字华容道
我很喜欢华容道啊,这次用js做一个话不多说上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
用 JS 做一个数独游戏（二）
用 JS 做一个数独游戏(二) 在上一篇博客中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...
怎么用线程刷新 tkinter 进度条_tkinter做一个简易提词板（2）
书接上文花果山美男子:tkinter做一个简易提词板zhuanlan.zhihu.com 上回说到,文字的动态效果还可以用after方法和StringVar来实现,今天我们就用它们来重新制作提词板 ...
使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能
使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能 1使用webpack下载vue模板 vue init webpack aaa(aaa为项目名称) cd到aaa ...
用js做一个简单的秒表计时器
用js做一个简单的秒表计时器具体代码如下 <!DOCTYPE html> <html lang="en"><head><meta cha ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...

用JS做一个简易的时间显示动态效果

用JS做一个简易的时间显示动态效果

运行效果

代码

用JS做一个简易的时间显示动态效果相关推荐

最新文章

热门文章