JavaScript用20行代码实现虎年春节倒计时
春节将至，小梦相信大家跟小朦梦一样很激动呀。为了迎接虎年春节到来，小梦撸了一个虎年春节倒计时，仅20行代码用js就实现啦，是不是很简单呢？我们用这20行代码不仅能做个虎年春节倒计时，还能从中学到JS相关知识，一举两得！话不多说，接下来小伙伴们跟着小梦一起也动手试试吧！
虎年春节倒计时局部效果图
虎年春节倒计时全局效果图，灰常可爱的小老虎呀~
JS关键代码实现
window.onload=function starttime(){
// 2022年春节时间
time(h1,'2022/2/1');
// 计时器
timer = setTimeout(starttime,1000);
}
function time(obj,springtime){
// 获取当前时间
var nowtime = new Date().getTime();
// 获取未来时间
var futruetime = new Date(springtime).getTime();
// 获取当前时间到未来时间之差
var mtime = futruetime-nowtime;
// 毫秒/1000
var time = (mtime/1000);
// 天
var day = parseInt(time/(24*60*60));
// 小时
var hour = parseInt(time/(60*60))-24*day;
// 分
var minute = parseInt(time%3600/60);
var second = parseInt(time%60);
obj.innerHTML="<br> 虎年春节倒计时：<br> "+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span><br>龙腾虎跃，虎虎虎虎！</span>";
return true;
}
上述代码中实现倒计时的关键点在于setTimeout()函数，setTimeout()函数是一个起到定时器的作用，接下来为小伙伴们简单讲解一下该知识点，在后面大家制作虎年春节倒计时的同时，也能学习与复习相关知识点。
setTimeout()函数
setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
var timerId = setTimeout(func, delay)
在上面代码中，setTimeout函数中有两个参数，第一个参数func是将要延迟执行的函数或一段延迟执行的代码，第二个参数delay是延迟执行的毫秒数。
timer = setTimeout(starttime,1000);
在我们的虎年春节倒计时代码中，starttime是要延迟执行的函数，1000是延迟1s，也就是每隔1秒执行一次starttime函数来实现倒计时逻辑。
CSS样式相关代码
<style>
h1{
position: fixed;
top: 25%;
left: 20;
width: 100%;
transform:translateY(-50%);
font-family:'Courier New', Courier, monospace;
font-size: 60px;
color: #2c0712;
padding: 0 20px;
}
h1 span{
position: fixed;
left: 0;
width: 100%;
text-align: center;
margin-top:250px;
font-size:40px;
}
body{
background-image: url("C:\\Users\\Administrator\\Desktop\\博客图片\\虎虎.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vm;
margin: 0;
</style>
CSS样式用于控制我们的页面规整美观，与JS强强结合，在这里小梦就不细说CSS啦，后期肝一篇CSS相关内容再分享给大家。
完整代码贴附，复制到THML文件中就可以直接运行啦！小伙伴们可以尝试一下哦~，图片资料有需要的话大家可以留言，小梦看到会发给你滴~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>虎年倒计时</title>
<style>
h1{
position: fixed;
top: 25%;
left: 20;
width: 100%;
transform:translateY(-50%);
font-family:'Courier New', Courier, monospace;
font-size: 60px;
color: #2c0712;
padding: 0 20px;
}
h1 span{
position: fixed;
left: 0;
width: 100%;
text-align: center;
margin-top:250px;
font-size:40px;
}
body{
background-image: url("C:\\Users\\Administrator\\Desktop\\博客图片\\虎虎.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vm;
margin: 0;
</style>
</head>
<body bgcolor="red">
<h1 id="h1"></h1>
<script>
window.onload=function starttime(){
// 2022年春节时间
time(h1,'2022/2/1');
// 计时器
timer = setTimeout(starttime,1000);
}
function time(obj,springtime){
// 获取当前时间
var nowtime = new Date().getTime();
// 获取未来时间
var futruetime = new Date(springtime).getTime();
// 获取当前时间到未来时间之差
var mtime = futruetime-nowtime;
// 毫秒/1000
var time = (mtime/1000);
// 天
var day = parseInt(time/(24*60*60));
// 小时
var hour = parseInt(time/(60*60))-24*day;
// 分
var minute = parseInt(time%3600/60);
var second = parseInt(time%60);
obj.innerHTML="<br> 虎年春节倒计时：<br> "+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span><br>龙腾虎跃，虎虎虎虎！</span>";
return true;
}
</script>
</body>
</html>
到此这篇关于JavaScript用20行代码实现虎年春节倒计时的文章就介绍到这了,更多相关JavaScript倒计时内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
javascript实现简单页面倒计时
本文实例为大家分享了javascript实现简单页面倒计时的具体代码,供大家参考,具体内容如下 话不多说,直接贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { color:red; text-align: center; } .one{ color:black; text-align
-
利用momentJs做一个倒计时组件(实例代码)
vue和moment做的一个倒计时 展示样式: <template> <div class="table-right flex-a-center"> <div class="time-text"> <span class="timeTextSpan" v-for="item,index of h" >{{item}}</span> <span class=&qu
-
JavaScript实现网页跨年倒计时
JavaScript网页–跨年倒计时,供大家参考,具体内容如下 最近学弟在追一个学妹,我在帮学弟出谋划策. 学妹告诉学弟,我怕我们之间是因为这段时间接触多了你才喜欢我的.等跨年的时候,如果你还喜欢我,那个时候我再给你答案. 于是今天我帮学弟做了一个跨年倒计时的网页,希望他能够坚持下去. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> &
-
用javascript实现倒计时效果
用Javascript实现倒计时效果,供大家参考,具体内容如下 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教 在某些商城网站中,我们常常可以看见其网站或者app上有一个区域放的是倒计时,来用来提醒用户还有多少时间将会发生什么事情,下面我们用代码来对其进行实现 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
javascript实现简单倒计时效果
本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 实现思路: 1.页面创建好天.小时.分.秒的标签元素,定义好样式 2.js获取天.小时.分.秒的元素对象,方便后面给它们赋值- - -剩余时间 3.定义一个计算当前时间和设定时间- - -时间差的函数,将剩余天数.小时.分.秒分别计算计算出来,并赋值给相应的与元素内容 4.使用setInterval()函数,设置每隔1秒执行一次时间差函数, 5.注意setInterval()函数之前,先调用一次时间差函数
-
利用JavaScript实现春节倒计时效果(移动端和PC端)
目录 效果预览 html部分 移动端样式(mobile.css) pc端样式(style.css) js部分 效果演示 移动端 pc端 效果预览 html部分 <!DOCTYPE html> <!--geyao--> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
-
JavaScript用20行代码实现虎年春节倒计时
春节将至,小梦相信大家跟小朦梦一样很激动呀.为了迎接虎年春节到来,小梦撸了一个虎年春节倒计时,仅20行代码用js就实现啦,是不是很简单呢?我们用这20行代码不仅能做个虎年春节倒计时,还能从中学到JS相关知识,一举两得!话不多说,接下来小伙伴们跟着小梦一起也动手试试吧! 虎年春节倒计时局部效果图 虎年春节倒计时全局效果图,灰常可爱的小老虎呀~ JS关键代码实现 window.onload=function starttime(){ // 2022年春节时间 time(h1,'2022/2/1');
-
PHP基于关联数组20行代码搞定约瑟夫问题示例
本文实例讲述了PHP基于关联数组20行代码搞定约瑟夫问题.分享给大家供大家参考,具体如下: 记得前段时间一写做java开发的兄弟对我说他java60行做了个约瑟夫问题,挺不错的.调侃php应该写这个挺不行的. 于是 呵呵... 洋洋洒洒 20行,写完自己都有些不相信了.哈哈 让不了解php的见识哈php的快捷轻便之处. ps:其实个人挺反感用代码行数来衡量代码数量的,感觉常把代码行数挂嘴边的大多无奈装2.此文仅属闲余娱乐. 回顾一下约瑟夫问题:N个人围成一圈,从第一个开始报数,第M个将被杀掉,最
-
不到20行代码用Python做一个智能聊天机器人
伴随着自然语言技术和机器学习技术的发展,越来越多的有意思的自然语言小项目呈现在大家的眼前,聊天机器人就是其中最典型的应用,今天小编就带领大家用不到20行代码,运用两种方式搭建属于自己的聊天机器人. 1.神器wxpy库 首先,小编先向大家介绍一下本次运用到的python库,本次项目主要运用到的库有wxpy和chatterbot. wxpy是在 itchat库 的基础上,通过大量接口优化,让模块变得简单易用,并进行了功能上的扩展.什么是接口优化呢,简单来说就是用户直接调用函数,并输入几个参数,就可以
-
python随机生成大小写字母数字混合密码(仅20行代码)
用简单的方法生成随机性较大的密码 仅用20行代码随机生成密码 核心思路:利用random模块 random模块随机生成数字,大小写字母,循环次数 while循环+随机生成的循环次数-->随机plus++ 大写字母ASKII码在65-90之间 小写字母Askll码在97-122之间 最终效果: x个大写字母+y个数字+z个小写字母(x,y,z均随机) 随机性相较于以往单调的 小写+数字+大写+小写+数字+大写- 循环有所提升 import random print(＂随机数生成") time
-
Python使用20行代码实现微信聊天机器人
近来,打开微信群发消息,就会秒收到一些活跃分子的回复,有的时候感觉对方回答很在理,但是有的时候发现对方的回答其实是驴唇不对马嘴,仔细深究发现,原来对方是机器人.今天,小编就带大家用20行代码,带你一起打造一个微信聊天机器人,让你的微信群一直嗨不停~~ 首先我们需要安装一个微信相关的第三方库,itchat,在Windows上通过命令:pip install itchat,就可以将其安装. 其二,我们需要去图灵机器人官网:http://www.tuling123.com,注册一下,即可获得一个机器人
-
20行代码教你用python给证件照换底色的方法示例
1.图片来源 该图片来源于百度图片,如果侵权,请联系我删除!图片仅用于知识交流. 2.读取图片并显示 imread():读取图片: imshow():展示图片: waitkey():设置窗口等待,如果不设置,窗口会一闪而过: import cv2 import numpy as np # 读取照片 img=cv2.imread('girl.jpg') # 显示图像 cv2.imshow('img',img) # 窗口等待的命令,0表示无限等待 cv2.waitKey(0) 效果如下: 3.图片缩
-
Java用20行代码实现抖音小视频批量转换为gif动态图
本文主要介绍了Java用20行代码实现抖音小视频批量转换为gif动态图,分享给大家,具体如下: 效果图 本功能实现需要用到第三方jar包 jave,JAVE 是java调用FFmpeg的封装工具. spring boot项目pom文件中添加以下依赖 <!-- https://mvnrepository.com/artifact/ws.schild/jave-core --> <dependency> <groupId>ws.schild</groupId>
-
女神相册密码忘记了 我只用Python写了20行代码
视频地址 我用20行代码,帮女神破解相册密码 一.事情是这样的 今早上班,公司女神小姐姐说,她去年去三亚旅游的照片打不开了 好奇问了一下才知道. 原来是,她把照片压缩了,而且还加了密码. 但是密码不记得了,只记得是一串6位数字. 话说照片压缩率也不高,而且还加密,难道是有什么可爱的小照片 但是作为一个正(ba)直(gua)的技术人员 我跟她说:"这事交给我,python写个脚本,帮你破解掉~~" 二.首先回顾一下女神的操作流程 对相册进行压缩的时候,添加了密码. LIke This ↓
-
Python用20行代码实现完整邮件功能
目录 Python实现完整邮件 一.邮箱端设置 1.首先登录网页版126邮箱 2.打开 设置-POP3/SMTP/IMAP配置界面 3.新增一个授权码 二.python发送邮件 1.安装邮件模块 2.调用模块 3.设置邮件内容 4.添加附件 三.python读取邮件 Python实现完整邮件 先上效果: 一.邮箱端设置 首先,要对邮件进行一下设置,在邮箱端获取一个授权码. 1.首先登录网页版126邮箱 2.打开 设置-POP3/SMTP/IMAP配置界面 3.新增一个授权码 二.python发送
-
Python用20行代码实现批量抠图功能
目录 前言 1.准备 2.编写代码 3.结果分析 前言 抠图前 vs Python自动抠图后 在日常的工作和生活中,我们经常会遇到需要抠图的场景,即便是只有一张图片需要抠,也会抠得我们不耐烦,倘若遇到许多张图片需要抠,这时候你的表情应该会很有趣. Python能够成为这样的一种工具:在只有一张图片,需要细致地抠出人物的情况下,能帮你减少抠图步骤:在有多张图片需要抠的情况下,能直接帮你输出这些人物的基本轮廓,虽然不够细致,但也够用了. DeepLabv3+ 是谷歌 DeepLab语义分割系列网络的