精华内容
下载资源
问答
  • js代码编写新年倒计时
    千次阅读
    2020-10-17 15:29:35

    用js代码编写新年倒计时

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        window.onload = function () {//加载
    
            var child = document.querySelector(".child");//用选择器获取函数
            var date = new Date("2021-02-11");//新年时间
            var futureTime = date.getTime();//获取新年时间的毫秒数
            var xin = setInterval(function () {//定时器
                var today = new Date();//当前时间
                var todayTime = today.getTime();
                var cha = futureTime - todayTime;//时间差
                var sec = parseInt(cha / 1000 % 60);
                var min = parseInt(cha / 1000 / 60 % 60);
                var hour = parseInt(cha / 1000 / 60 / 60 % 24);
                var day = parseInt(cha / 1000 / 60 / 60 / 24);//一天24小时,一小时60分钟,一分钟60秒,一秒1000毫秒
                child.innerHTML = `距离新年还有${day}${hour}小时${min}分钟${sec}秒`;//用` `符号,不是' ';
    
            }, 1000);
    
        }
    </script>
    <!--1. 新年倒计时-->
    <div class="box">
        <h1>新年倒计时</h1>
    <div class="child"></div>
    </div>
    
    
    </body>
    </html>
    
    更多相关内容
  • 2019年新年倒计时网站模板是一款红色雪花视频背景倒计时网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • VB新年倒计时程序

    2019-02-15 15:55:16
    VB教学辅助资源,初识计算机程序部分,可作为案例来进行展示
  • html实现的新年倒计时

    2018-12-27 11:18:04
    html实现的新年倒计时,可以根据更改图片和功能,是2019的倒计时
  • 本文实例讲述了js实现新年倒计时效果代码。分享给大家供大家参考。具体如下: 运行效果图: 具体代码: <!DOCTYPE ...
  • 2014过年倒计时示例

    2020-10-26 08:14:50
    主要介绍了2014过年倒计时示例,需要的朋友可以参考下
  • 新年倒计时.zip

    2019-06-03 15:55:26
    倒计时模板制作,新年倒计时模板,由,天,小时,分钟,秒组成,还加上下雪特效
  • 主要为大家详细介绍了JavaScript实现新年倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 2019新年倒计时雪花代码是一款html5基于canvas绘制下雪动画场景结合新年倒计时代码。
  • JS全屏雪花新年倒计时特效是一款基于JS+CSS3制作的雪花掉落背景动画和新年倒计时间页面特效。
  • 2021新年倒计时CSS3雪花特效是一款适用于各种活动主题倒计时特效。
  • H5带下雪效果的新年倒计时特效是一款基于HTML5 Canvas绘制的全屏下雪背景动画模板。
  • 新年倒计时-项目开发

    2021-03-30 14:41:59
    一个16x32 LED矩阵,显示新年前的RGB倒数计时。 确保跨年晚会再上一个新台阶的必经之路!
  • 新年倒计时新标签-由FreeAddon提供安装我的新年倒计时新标签主题并享受新年倒计时的各种高清壁纸。 ★您可以从我们的新年倒数主题中得到什么? 首先,您可以享受各种高清质量的新年倒计时壁纸。 您可以随机播放所有...
  • 2019新年倒计时雪花代码是一款html5基于canvas绘制下雪动画场景结合新年倒计时代码。
  • 大家好,今天给大家分享一篇用html+css+js实现新年倒计时的代码。 改编于https://www.bilibili.com/video/BV1EJ411471A?from=search&seid=18367221548830118604&spm_id_from=333.337.0.0 如有侵权还请速速...

    大家好,今天给大家分享一篇用html+css+js实现新年倒计时的代码。
    改编于https://www.bilibili.com/video/BV1EJ411471A?from=search&seid=18367221548830118604&spm_id_from=333.337.0.0
    如有侵权还请速速联系。
    效果图:
    新年倒计时
    1,html结构,

    <body>
    		<div class="container">
    			<h2><span>Countdown to New Year</span><i id="year">NA</i></h2>
    
    			<div class="Countdown">
    				<div id="day">NA</div>
    				<div id="hour">NA</div>
    				<div id="minute">NA</div>
    				<div id="second">NA</div>
    			</div>
    		</div>
    	</body>
    

    2,css部分,这里主要用到了flex布局(可参考:https://www.runoob.com/w3cnote/flex-grammar.html),一些定位和伪元素等等,图片素材下载于元气壁纸 。

    	<style>
    			* {
    				margin: 0;
    				padding: 0;
    				/* font-family最后加上sans-serif,
    				是为了保证能够调用这个字体族里面的字体,因为大多数计算机里都有这种字体。 */
    				font-family: 'Poppins', sans-serif;
    			}
    
    			body {
    				background:#FFFFFF url(img/bg.jpg);
    				/* background-attachment属性
    				设置背景图像是否固定或者随着页面的其余部分滚动。
    				 fixed背景图片不会随着页面的滚动而滚动*/
    				background-attachment: fixed;
    				/* background-blend-mode属性
    				 background-blend-mode 属性定义了背景层的混合模式(图片与颜色)
    				 hard-light强光
    				 */
    				background-blend-mode: hard-light;
    			}
    
    			.container {
    				position: absolute;
    				top: 80px;
    				left: 100px;
    				right: 100px;
    				bottom: 80px;
    				background:url(img/bg.jpg);
    				background-attachment: fixed;
    				/* flex弹性布局 */
    				display: flex;
    				/* justify-content
    				属性定义了项目在主轴上的对齐方式。
    				 center: 居中*/
    				justify-content: center;
    				/* align-items属性
    				定义项目在交叉轴上如何对齐。
    				center:交叉轴的中点对齐。*/
    				align-items: center;
    				/* flex-direction属性
    				决定主轴的方向(即项目的排列方向)。
    				 column:主轴为垂直方向,起点在上沿。*/
    				flex-direction: column;
    				/* 阴影 */
    				box-shadow: 0 50px 50px rgba(0, 0, 0, 0.5), 0 0 0 100px rgba(0, 0, 0, .1);
    			}
    
    			.container h2 {
    				text-align: center;
    				font-size: 10em;
    				line-height: 0.7em;
    				color: #333;
    				margin-top: -80px;
    			}
    
    			.container h2 span {
    				display: block;
    				font-weight: 300;
    				/* etter-spacing 属性增加或减少字符间的空白(字符间距)。 */
    				letter-spacing: 6px;
    				font-size: 0.2em;
    
    			}
    
    			.Countdown {
    				display: flex;
    				margin-top: 50px;
    			}
    
    			.Countdown div {
    				position: relative;
    				width: 100px;
    				height: 100px;
    				line-height: 100px;
    				text-align: center;
    				background: #333;
    				color: #fff;
    				margin: 0 15px;
    				font-size: 3em;
    				font-weight: 500;
    			}
    			/* 伪元素 */
    			/* ::before伪元素可用于在元素内容之前插入一些内容。 */
    			/* 小知识可以利用伪元素清除浮动 
    				.clearfix::after{
    					content: "";
    					display: block;
    					clear: both;
    				}
    			*/
    			.Countdown div::before{
    				content:'' ;
    				position: absolute;
    				bottom: -30px;
    				left: 0;
    				width: 100%;
    				height: 35px;
    				background: #ff0;
    				color: #333;
    				font-size: 0.35em;
    				line-height: 35px;
    				font-weight: 300;
    			}
    			.Countdown #day::before{
    				content: 'Days';
    			}
    			.Countdown #hour::before{
    				content: 'Hours';
    			}
    			.Countdown #minute::before{
    				content: 'Minutes';
    			}
    			.Countdown #second::before{
    				content: 'Seconds';
    			}
    			
    		</style>
    

    3,js部分,这里主要用到了JavaScript Date对象(可参考https://www.runoob.com/jsref/jsref-obj-date.html),和一些时间的格式化。

    <script type="text/javascript">
    		//Date对象用于处理日期和时间。
    		//可以通过new关键词定义Date对象。
    		//new Date('月 日,年 时:分:秒')
    		//getTime()返回从1970年1月1日至今的毫秒数
    		//getFullYear获取四位数的年
    			var y = new Date().getFullYear()+1;
    			console.log(y);
    		//字符串拼接,强制类型转换
    			var countDate= new Date('Jan 1,'+y+' 00:00:00').getTime();
    			function newYear(){
    		//new Date()为当前时间
    				var now =new Date().getTime();
    				var gap = countDate-now;
    		//时间格式化
    				var second =1000;
    				var minute = second*60;
    				var hour = minute*60;
    				var day= hour*24;
    		//Math.floor(x)返回小于x的最大整数
    				var d=Math.floor(gap/(day));
    				var h=Math.floor((gap%(day))/(hour));
    				var m=Math.floor((gap%(hour))/(minute));
    				var s=Math.floor((gap%(minute))/second);
    		//innerHTML返回的是标签内的 html内容,包含html标签。
    		//innerText返回的是标签内的文本值,不包含html标签。
    				document.getElementById("day").innerText=d;
    				document.getElementById("hour").innerText=h;
    				document.getElementById("minute").innerText=m;
    				document.getElementById("second").innerText=s;
    				document.getElementById("year").innerText=y;
    			}
    			setInterval(function(){
    				newYear()
    			},1000)
    		</script>
    

    其实还可以通过这些方法做很多事情记录时间等等,下面是我自己写的一个记录时间的小例子。
    当然也可以加一些自己喜欢的东西在上面。
    效果图:
    记录时光

    1,html结构

    <div id="firstPage" class="bigbox">
    			<!-- 时间 -->
    			<div class="box">
    				<div class="text">我们已经一起走过了</div>
    				<div class="time">
    					<span id="day"></span><i></i>
    					<span id="hour"></span><i>小时</i>
    					<span id="minute"></span><i>分钟</i>
    					<span id="second"></span><i></i>
    				</div>
    			</div>
    		</div>
    

    2,css部分

    .bigbox {
    	width: 100%;
    	height: 100vh;
    	background-image: url(../img/bg1.jpg);
    	background-size: cover;
    	position: relative;
    }
    
    #firstPage .box {
    	width: 800px;
    	height: 320px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-top: -160px;
    	margin-left: -400px;
    	border: 10px solid white;
    	color: #FFFFFF;
    	font-size: 24px;
    	text-align: center;
    	font-weight: bold;
    }
    
    #firstPage .text {
    	width: 800px;
    	height: 100px;
    	line-height: 100px;
    	margin-top: 60px;
    	font-size: 50px;
    }
    
    #firstPage .time {
    	width: 800px;
    	height: 100px;
    	line-height: 100px;
    	font-size: 50px;
    }
    

    3,js部分

    //时间
    			var countDate= new Date('Mar 23,2021 00:00:00').getTime();
    			function newYear(){
    			//new Date()为当前时间
    					var now =new Date().getTime();
    					gap = now-countDate;
    					var second =1000;
    					var minute = second*60;
    					var hour = minute*60;
    					var day= hour*24;
    			//Math.floor(x)返回小于x的最大整数
    					var d =Math.floor(gap/(day));
    					var h=Math.floor((gap%(day))/(hour));
    					var m=Math.floor((gap%(hour))/(minute));
    					var s=Math.floor((gap%(minute))/second);
    			//innerHTML返回的是标签内的 html内容,包含html标签。
    			//innerText返回的是标签内的文本值,不包含html标签。
    					document.getElementById("day").innerText=d;
    					document.getElementById("hour").innerText=h;
    					document.getElementById("minute").innerText=m;
    					document.getElementById("second").innerText=s;
    				}
    				setInterval(function(){
    					newYear()
    				},1000)
    
    

    感谢大家的浏览和支持!!!!!🌼

    展开全文
  • 一款js css3制作雪花掉落背景动画和新年倒计时间页面特效。雪花使用了图标库样式,支持自定义计时间。
  • 新年倒计时PPT模板适用于节日祝福主题设计应用。
  • 基于canvas全屏的下雪背景动画,2021新年快乐倒计时页面模板。
  • 新年倒计时

    2021-02-12 22:55:03
    新年倒计时 先决条件 Navegador(Chrome,FireFox,Edge等) 执行者 克隆存储库。 Abrir o arquivo index.html。
  • 2020新年倒计时网页代码,雪花飘落背景,有天、时、分、秒显示。
  • 新年倒计时代码 2022年新年

    千次阅读 2021-12-29 19:25:00
    } style> head> <body> <div id="box"> 距离2022年新年,还有h1> <div id="time"> **天span> <strong><span id="hour">**时span>strong> <strong><span id="minute">**分span>strong> <strong><span id="second">**...
    <!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>
                body{
                    background-color: #2a3852;
                }
                #box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    margin-top: 300px;
                }
     
                #box h1 {
                    letter-spacing: 3px;
                    font-weight: 500;
                    color: #fff;
                }
     
                #time {
                    display: flex;
                    flex-direction: row;
                    line-height: 50px;
                }
     
                #time span {
                    font-size: 20px;
                    color: #fff;
    				background-color: #DC143C;
    				border-radius: 10px;
                    width: 70px;
                    height: 50px;
    				text-align: center;
                    
                }
     
                #time strong {
                    text-align: center;
                    margin-left: 20px;
                    background-color: #DC143C;
                    border-radius: 10px;
                    width: 70px;
                    height: 50px;
                    display: block;
                }
            </style>
        </head>
     
        <body>
            <div id="box">
                <h1>距离2022年新年,还有</h1>
                <div id="time">
                    <span id="day">**天</span>
                    <strong><span id="hour">**时</span></strong>
                    <strong><span id="minute">**分</span></strong>
                    <strong><span id="second">**秒</span></strong>
                </div>
            </div>
            <script src="common.js"></script>
            <script>
                var daySpan = my$('day');
                var hourSpan = my$('hour');
                var minuteSpan = my$('minute');
                var secondSpan = my$('second');
                TimeRow();
                setInterval(TimeRow, 1000)
     
                function TimeRow() {
                    var end = new Date('2022-01-1 0:0:0');
                    var start = new Date();
                    var time = getInterval(start, end);
                    setInnerText(daySpan, time.day+'天');
                    setInnerText(hourSpan, time.hour+'时');
                    setInnerText(minuteSpan, time.minute+'分');
                    setInnerText(secondSpan, time.second+'秒');
                }
            </script>
        </body>
     
    </html>
    
    function my$(id) {
      return document.getElementById(id);
    }
     
    // 处理innerText和textContent的兼容性问题
    // 设置标签之间的内容
    function setInnerText(element, content) {
      // 判断当前浏览器是否支持 innerText
      if (typeof element.innerText === 'string') {
        element.innerText = content;
      } else {
        element.textContent = content;
      }
    }
     
     
    function getInterval(start, end) {
      // 两个日期对象,相差的毫秒数
      var interval = end - start;
      // 求 相差的天数/小时数/分钟数/秒数
      var day, hour, minute, second;
     
      // 两个日期对象,相差的秒数
      // interval = interval / 1000;
      interval /= 1000;
     
      day = Math.round(interval / 60 / 60 / 24);
      hour = Math.round(interval / 60 / 60 % 24);
      minute = Math.round(interval / 60 % 60);
      second = Math.round(interval % 60);
     
      return {
        day: day,
        hour: hour,
        minute: minute,
        second: second
      }
    }
    
    展开全文
  • 2015年新年倒计时

    2014-12-16 18:06:14
    2015年新年倒计时与当前系统时间,简单小软件,仅供娱乐
  • js制作一个简单的新年倒计时 一个简单的js倒计时的实现 这是页面内容: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...

    今日分享:

    js制作一个简单的新年倒计时

    一个简单的js倒计时的实现

    在这里插入图片描述
    这是页面内容:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>新年倒计时</title>
    </head>
    <body>
        <!-- 现在据春节(211日还有多少小时多少分多少秒) -->
        <div class="time" style="color: red;text-align: center;font-size: 30px;border: 1px solid yellow;margin-top: 300px;">  
            距离春节倒计时:
            <span id="lefttime"></span>
        </div>
    
     
        <script >
    		//封装函数newtime
            function newtime(){
                var time=new Date("2021/2/11,00:00:00")//这是春节那天的时间
                var nowtime=new Date()//获取今天现在的事件
                var lefttime=parseInt((time.getTime()-nowtime.getTime())/1000)//他们之间的时间差
                d=parseInt(lefttime/(24*60*60))//所剩day 
                h=parseInt(lefttime/(60*60)%24)//小时
                m=parseInt(lefttime/60%60)//分钟
                s=parseInt(lefttime%60)//秒
                document.getElementById("lefttime").innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";//获取值呈现在页面上
                if(lefttime<=0){
                    document.getElementById("lefttime").innerHTML="新年快乐!"
                }
            }//判断是否达到如果倒计时完成则显示新年快乐
            newtime();
            var sh;
            sh=setInterval(newtime,1000)//计时器
            
        </script> 
        
    </body>
    
    </html>
    
    

    HTML效果:

    在这里插入图片描述

    难点:

    1.时间的计算,算了好几次都没有成功

    2.js定时器的用法
    定时器有两种
    周期性定时器:setInterval();按照指定的周期(以毫秒记)来调用函数或计算表达式。方法会不停地调用函数,直到clearInterval()被调用窗口才会关闭
    在这里插入图片描述他有两个必须参数
    code是必须的,一般是要调用的函数
    millisec 是周期时间间隔一般规定单位为毫秒

    延迟性定时器:setTimeout():在指定的毫秒数后才调用函数或计算表达式
    在这里插入图片描述

    清除定时器:clearInterval(函数名)
    clearTimeout(函数名);

    例子:

    setTimeout只执行一次function(){}

    setInterval会每隔interval时间执行一次,直至定时器关闭

    //创建定时器方法
    var time1 = window.setTimeout(function(){},interval);
    var time2 = window.setInterval(function(){},interval);
    
    //清除定时器方法
    window.clearTimeout(time1);
    window.clearTimeout(time2);
    

    总结:今天的分享就到这里了,主要是定时器的使用。

    展开全文
  • 2022年新年倒计时.html

    2022-01-02 18:29:26
    2022年新年倒计时前端版本
  • 新年倒计时源码

    2021-04-20 05:28:39
    2020color=#8C0073>...年倒计时157 天9 时7 分42 秒 function getRTime() {var EndTime = new Date('2020/01/25 00:00:00');var NowTime = new Date();var t = EndTime.getTime() - NowTime.getTime();v...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,397
精华内容 558
关键字:

新年倒计时