JavaScript网页–跨年倒计时

最近学弟在追一个学妹，我在帮学弟出谋划策。

学妹告诉学弟，我怕我们之间是因为这段时间接触多了你才喜欢我的。等跨年的时候，如果你还喜欢我，那个时候我再给你答案。

于是今天我帮学弟做了一个跨年倒计时的网页，希望他能够坚持下去。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倒计时</title><style>div {margin-top: 200px;margin-left: 500px;line-height: 50px;font-size: 20px;font-weight: 900;}li {float: left;margin: 2px;list-style: none;width: 50px;height: 50px;color:white;line-height: 50px;text-align: center;background-color: black;font-size: 20px;font-weight: 900;}</style>
</head>
<body><div><li class="text" style = "width: 135px;">跨年倒计时：</li><li class="day">0</li><li class="hour">1</li><li class="minute">2</li><li class="second">3</li></div><script>//获取元素var day = document.querySelector('.day');var hour = document.querySelector('.hour');//获取小时元素var minute = document.querySelector('.minute');//获取分钟元素var second = document.querySelector('.second');//获取秒数元素var inputTime = +new Date('2021-1-1 00:00:00');//输入一个时间countDown ();//在定时器开启之前先调用一次函数，防止一秒的空白期//开启定时器setInterval(countDown, 1000);function countDown (){//获取当前的时间var nowTime = +new Date();var times = (inputTime - nowTime) / 1000;//times是剩余的总秒数var d = parseInt(times / 60 / 60 /24);d = d < 10 ? '0'+ d : d;//将剩余的小时数给小时的盒子day.innerHTML = d+"天";//小时var h = parseInt(times / 60 / 60 % 24);h = h < 10 ? '0'+ h : h;//将剩余的小时数给小时的盒子hour.innerHTML = h+"时";//  分钟var m = parseInt(times / 60 % 60);m = m < 10 ? '0'+ m : m;//将剩余的分钟数给分钟的盒子minute.innerHTML = m+"分";//秒数var s = parseInt(times % 60);s = s < 10 ? '0'+ s : s;//将剩余的描述给秒的盒子second.innerHTML = s+"秒";}</script>
</body>
</html>

JavaScript网页--跨年倒计时相关推荐

跨年倒计时HTML源码,JavaScript实现网页跨年倒计时
JavaScript网页–跨年倒计时,供大家参考,具体内容如下最近学弟在追一个学妹,我在帮学弟出谋划策. 学妹告诉学弟,我怕我们之间是因为这段时间接触多了你才喜欢我的.等跨年的时候,如果你还喜欢我, ...
马上跨年了，如何用代码写一个“跨年倒计时”呢？
前言大家好,我是陈橘又青,再过两周就是新的一年了,作为一名有仪式感的程序员,今天我们就来制作一个简单的跨年倒计时小网页,祝看到的所有人新年快乐!(附上完整源码,需要的小伙伴自取即可) 文章目录前言 ...
《HTML、CSS、JavaScript 网页制作从入门到精通》——6.6 单元格属性
本节书摘来自异步社区<HTML.CSS.JavaScript 网页制作从入门到精通>一书中的第6章,第6.6节,作者:[美]John Resig(莱西格) , Bear Bibeault( ...
javascript网页设计期末作业购物网站
本次主要介绍下之前上传的作业的主要功能,网页下载地址: 网页设计期末作业购物网站如果对本文章内容还有疑问可以观看视频,也可以在评论区留言: javascript 网页设计期末作业购物网站网页实 ...
JavaScript网页特效-限时秒杀
限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...
《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息作者: 杨磊张志美丛书名: 百炼成钢系列丛书出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
2022跨年-跨年倒计时（烟花）
前言 2022 HAPPY NEW YEAR 马上都是新的一年了,岁末已至,是结束也是开始,不管这一年好和坏,都将结束,愿来年有趣有盼,无灾无难,你我都要平安才好,善良勇敢跨年倒计时制作步骤步骤一 ...
ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息方能实现. 此处手札供后人参 ...
Javascript网页滚动方法
Javascript网页滚动方法作者:不详来源于:源码下载吧发布时间:2007-6-6 16:24:26 [ 字体:大中小 ] 我想大家都看过各种各样的滚动(最常用的就是用在新闻的更新上 ...

JavaScript网页--跨年倒计时

JavaScript网页–跨年倒计时

JavaScript网页--跨年倒计时相关推荐

最新文章

热门文章