四、计时器（JS时间戳和New Data（）使用）

一、效果图

 二、代码

JS

    //用法
    $(function(){
    //获取当前日期
            var dateTime = new Date();
            var Newyear=dateTime.getFullYear();//年
            var Newmonth=dateTime.getMonth();//月
            Newmonth=Newmonth+1;//0到11月
            var Newday=dateTime.getDate();//日
            var hour = dateTime.getHours();//时
            var min = dateTime.getMinutes();//分
            var sec = dateTime.getSeconds();//秒
            //更新距离日期
            document.getElementById('Newyear').innerHTML=Newyear+"年";
            document.getElementById('Newmonth').innerHTML=Newmonth+"月";
            document.getElementById('Newday').innerHTML=Newday+"日";
            
    //获取表单的值

     
    $("#go").click(function(){
        
        setInterval(function(){
            
            //获取输入时间
            var Inputyear=document.getElementById("Inputyear").value;
            var Inputmonth=document.getElementById("Inputmonth").value;
            var Inputday=document.getElementById("Inputday").value;
            
            //更新距离日期
            document.getElementById('Newyear').innerHTML=Inputyear+"年";
            document.getElementById('Newmonth').innerHTML=Inputmonth+"月";
            document.getElementById('Newday').innerHTML=Inputday+"日";
            
            
            var dateTime = new Date(); //当前时间对象

            var hour = dateTime.getHours();
            var min = dateTime.getMinutes();
            var sec = dateTime.getSeconds();
            
                
            //起始时间戳
            var Starttime=new Date("1970-01-01 8:0:0")
            var Starttimestamp=Date.parse(Starttime); //转化为时间戳
            
            //当前时间戳
            var Newtimestamp = Date.parse(new Date());
            
            //输入时间戳"2021-11-30 0:0:0"
            var Inp=Inputyear+"-"+Inputmonth+"-"+Inputday+" "+"0:0:0"
            var Inputdate=new Date(Inp)
            var Inputtimestamp=Date.parse(Inputdate);
            

            //距离时间戳=当前时间戳-输入时间戳 (然后再减起始时间戳为1970-01-01 8:0:0)
            var Biffer=Inputtimestamp-Newtimestamp;
            var a=new Date(Biffer).toLocaleString();
            
            //求相距天数
            diffDate = Math.abs(Biffer) // 取相差毫秒数的绝对值
            totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
            console.log(totalDays)
            
            //求相距时间        
            var Bifferhour=new Date(Biffer).getHours();
            // 小时出现负数，则需要天数补够 如28号12点和29号10点相差又不到一天
            // 计算时Bifferday为1，Bifferhour负2，则需要减去一天用小时计时
            Bifferhour=Bifferhour-8;
            if(Bifferhour<0){
                Bifferhour=24+Bifferhour;
                // Bifferday=Bifferday-1;
            }
            //求相距分钟和秒数
            var Biffermin=new Date(Biffer).getMinutes();
            var Biffersec=new Date(Biffer).getSeconds();
            
            //观察规律
            console.log(a)
            console.log(Bifferhour)
            console.log(Biffermin)
            console.log(Biffersec)
            
            // 更新距离时间 >
            document.getElementById('Timeday').innerHTML=totalDays;
            document.getElementById('Timehose').innerHTML=Bifferhour;
            document.getElementById('Timemin').innerHTML=Biffermin;
            document.getElementById('Timesec').innerHTML=Biffersec;
            
        
     },0)
    })
        
    }) 

        

Html

    
        "utf-8">
        
        "stylesheet" href="Practice/css/Timing.css" />
        
        
    
    
        
class="Timing">
            "Practice/bg.png" style="width: 100%; height: 100%;z-index: 0;">
            
class="Title">
                "color: white; font-size: 50px">
                    开 始 倒 计 时
            
            
            
class="Print">    
             请输入:
               class="time" id="Inputyear" />         
             年
               class="time" id="Inputmonth"/>
             月
               class="time" id="Inputday" />
             日
            
            
class="img" id="go"  style="text-align: center;">
                "Practice/btn_hover.jpg">
            
            
            
class="Tip" >
                  
                现在距离-
                "Newyear">
                "Newmonth">
                "Newday"> 
                -还剩:
            
            
            
class="Countdown">
                class="Number" id="Timeday">000
                class="Word">天
                class="Number" id="Timehose">00
                class="Word">小时
                class="Number" id="Timemin">00
                class="Word">分
                class="Number" id="Timesec">00
                class="Word">秒
            
        
        
    

CS

body{
	width: 100%;
	height: 100%;
	background-image: url(../body.gif);
	position: relative;
}
.Timing{
	width: 500px;
	height: 500px;
	position: absolute;
	left: 620px;
	
}
.Title{
	width: 100%;
	height: 100px;
	top: 0px;
	position: absolute;
	text-align: center;
}

.Print{
	width: 100%;
	height: 45px;
	position: absolute;
	top: 100px; 
	text-align: center;
}
.Print span{

	color: white;
	font-size: 15px;
	}
.time{
	width: 65px;
}	
.img{
	width: 100%;
	height: 150px;
	position: absolute;
	top: 145px;
}
.Tip{
     width: 100%;
	 height: 30px;
	 position: absolute;
	 top: 295px;
	 margin-top: 20px;
	
}
.Tip{
	color: white;
}
.Countdown{
	width: 100%;
	height: 155px;
	position: absolute;
	bottom: 0px;
	text-align: center;

}
.Number{
	font-size: 40px;
	color: yellow;
}
.Word{
	font-size: 25px;
	color: white;
}

　  bg.png      body.png   btn_hover.png