利用Html,Css,javaScript简单写一个计算一天秒的倒计时

利用Html,Css,javaScript简单写一个计算一天还剩多少秒的倒计时页面
代码我放下面，不多，就是我那个背景图我没有用精灵图，主要拼接太麻烦了，我直接img了，然后display：none;（因为定时器调图是异步吗，加载在页面缓存里没有，会抖我主要是为了防抖）赶时间（这个小项目也是为了督促自己抓紧时间，刷小红书视频突然一个激灵就这个打算了，因为一直在赶着学习，我代码写的不多，这个小项目我还写了个半小时）加油加油！
等算是系统学完大概后，我要天天赶紧练习了。
马上就去学习！
以后学习打算打开这个页面提醒自己！
在犹豫要不要给页面加一个bgm，不过好像会有影响那就算了吧。
下面代码的图片我也放一下吧

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">body div {position: relative;width: 600px;height: 800px;margin: 0 auto;background-image: url(./0.jpg);}body div span {position: absolute;display: none;background-color: rgb(30, 30, 30);width: 100%;height: 300px;left: 0;top: 344px;}.timedown {width: 600px;color: red;font-size: 36px;line-height: 250px;text-align: center;}img {display: none;}</style><title>每天剩余时间倒计时</title>
</head><body><div><span></span></div><img src="./0.jpg" alt=""><img src="./1.jpg" alt=""><img src="./2.jpg" alt=""><img src="./3.jpg" alt=""><img src="./4.jpg" alt=""><img src="./5.jpg" alt=""><img src="./6.jpg" alt=""><img src="./7.jpg" alt=""><img src="./8.jpg" alt=""><script>var temp = document.querySelector('div');temp.i = 0;setInterval(() => {var sp = document.querySelector('span');var now = new Date();var timeNumber = 24 * 60 * 60 - (60 * 60 * now.getHours() + 60 * now.getMinutes() + now.getSeconds());sp.innerHTML = `<h1 class = 'timedown' > 今天还剩${timeNumber}秒</h1>`;var time = document.querySelector('div');var sp = document.querySelector('span');if (time.i == 8) {time.i = 1;} else {time.i++;sp.style.display = 'block';}time.style.backgroundImage = 'url(./' + time.i + '.jpg)';}, 1000);</script>
</body></html>

图片是按顺序的且不用修改
且./是当前目录和代码同级目录

利用Html,Css,javaScript简单写一个计算一天秒的倒计时相关推荐

利用html css javascript写翻翻乐小游戏
利用html css javascript写翻翻乐小游戏废话不多说,先看效果代码放到文章末尾,不想看代码解释的可以直接跳过到后面直接下载我写这个小游戏的过程 1.准备图片我在觅元素上找了 ...
十五分钟用JavaScript基础写一个图片轮播效果
十五分钟用JavaScript基础写一个图片轮播效果前言这次也是一个适合JavaScript初学者的小练手,用JavaScript的基本知识去写一个轮播图,其实轮播图有很多方法去实现,像用一些框架 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
利用 Linux tap/tun 虚拟设备写一个 ICMP echo 程序
利用 Linux tap/tun 虚拟设备写一个 ICMP echo 程序前面两篇文章已经介绍过 tap/tun 的原理和配置工具.这篇文章通过一个编程示例来深入了解 tap/tun 的程序结构. ...
html 中箭头的代码,HTML中利用div+CSS实现简单的箭头图标的代码
/*箭头向上*/ .to_top { width: 0; height: 0; border-bottom: 10px solid #ccc; border-left: 10px solid tran ...
html直线箭头,HTML中利用div+CSS实现简单的箭头图标的代码
在网页设计中,我们经常得会用到一些箭头做为装饰来点缀我们的网页,虽然现在很多的网站的设计者们都喜欢以引用字体图标的形式来实现箭头的效果,但那样也会给网页的加载造成一些影响.今天飞鸟慕鱼小编就给大家说一 ...
用vue写一个计算总价
用vue写一个计算总价点击移除可以删除本项点击加减实现加减总价随着数量增加 <!DOCTYPE html> <html><head><meta char ...
如何用python写一个计算日期间隔的程序？
如何用python写一个计算日期间隔的程序? 文章目录如何用python写一个计算日期间隔的程序? 前言问题梳理问题解决写在后面前言为什么想起来写一个这样的程序呢? 前几天聊天的时候,突然 ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...

利用Html,Css,javaScript简单写一个计算一天秒的倒计时

利用Html,Css,javaScript简单写一个计算一天秒的倒计时相关推荐

最新文章

热门文章