JS倒计时

最新推荐文章于 2024-05-22 01:53:01 发布

酸霉汤

最新推荐文章于 2024-05-22 01:53:01 发布

阅读量181

点赞数

分类专栏： # JS 文章标签： html css js

本文链接：https://blog.csdn.net/iTaylorfan/article/details/104433535

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

此案例主要用到Date对象相关的方法。
在JS中月份是从0开始的，11是最后一个月所以在使用时要注意加一减一。

截图

倒计时开始

倒计时结束

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时测试</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/main.js"></script>
</head>
<body>
<div class="container">
    <p>请输入目标时间</p>
    <input type="text" maxlength="4" value="2020">年
    <input type="text" maxlength="2">月
    <input type="text" maxlength="2">日
    <input type="text" maxlength="2">时
    <input type="text" maxlength="2">分
    <input type="text" maxlength="2">秒
    <input type="button" value="点击开始计时" onclick="getData()">
    <p>距离目标时间还有</p>
    <input type="text" id="show3" maxlength="2">天
    <input type="text" id="show4" maxlength="2">小时
    <input type="text" id="show5" maxlength="2">分钟
    <input type="text" id="show6" maxlength="2">秒
    <p>当前时间为</p>
    <div class="nowTime" id="showTime"></div>
</div>
</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.container{
    width: 670px;
    height: 300px;
    position: relative;
    margin: 100px auto;
    background-color: rgb(201, 201, 201);
    text-align: center;
    font-size: 20px;
}
.container input[type=text]{
    width: 80px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    text-align: center;
    outline: none;
}

.container input[type=button]{
    width: 100px;
    height: 40px;
    outline: none;
    color:cornflowerblue;
    font-weight: bold;
}
#show1{
    border-radius:50%;
    width: 60px;
    height: 60px;
    background-color: khaki;
}
#show2{
    border-radius:50%;
    width: 60px;
    height: 60px;
    background-color: cornflowerblue;
}
#show3{
    border-radius:50%;
    width: 60px;
    height: 60px;
    background-color: #a3ebff;
}
#show4{
    border-radius:50%;
    width: 60px;
    height: 60px;
    background-color: #7fff00;
}
#show5{
    border-radius:50%;
    width: 60px;
    height: 60px;
    background-color: #ee2e20;
}
#show6{
    border-radius:50%;
    width: 60px;
    height: 60px;
    background-color: #ffebcd;
}
.nowTime{
    width:600px;
    height: 40px;
    position: relative;
    margin: auto;
    background-color: white;
    line-height: 40px;
}

JS部分

window.onload=function () {
    window.timeover=0;          /*全局变量*/
    nowTime();          /*显示当前时间*/
}
function getData() {
    var input_box=document.getElementsByTagName("input");
    var my_year=input_box[0].value;
    var my_month=input_box[1].value-1;   /*js月份从0开始*/
    var my_day=input_box[2].value;
    var my_hour=input_box[3].value;
    var my_minute=input_box[4].value;
    var my_second=input_box[5].value;
    var flag=isRunYear(my_year);     /*先判断一下是否为闰年*/
    if (my_year===""||my_month===""||my_day===""||my_hour===""||my_minute===""||my_second===""){
        alert("请输入完整！");
    }
    else{
        if (my_month<0||my_month>11) {
            alert("请输入正确的月份！");
        }else  if (my_day<0||my_day>31){
            alert("请输入正确的日！");
        }else if(my_month==1){
            if (flag==true&&my_day>29){
                alert("闰年2月有29天请输入正确的日！");
            } else if (flag==false&&my_day>28){
                alert("平年2月有28天请输入正确的日！");
            }
        }else if (my_hour<0||my_hour>23){
            alert("请输入正确的小时！");
        }else if(my_minute<0||my_minute>59){
            alert("请输入正确的分！");
        }else if(my_second<0||my_second>59){
            alert("请输入正确的秒！");
        }
        var targeTime=new Date(my_year,my_month,my_day,my_hour,my_minute,my_second); /*目标时间*/
        var nowTime=Date.now();          /*获取系统当前时间*/
        var totalTime=Math.round((targeTime-nowTime)/1000);                /*获取时间差 四舍五入转换为秒*/
        if (totalTime<=0){
            if (timeover==0) {
                alert("你输入的目标时间已到期！");
            }else {
                alert("倒计时结束！");
                window.location.href="index.html";   /*重新加载页面*/
            }
        }else{
            var showDay=parseInt(totalTime/60/60/24);      /*将总秒数转化为天数 parseInt转化为整数*/
            var showHour=parseInt(totalTime/60/60%24);     /*转换为小时*/
            var showMinute=parseInt(totalTime/60%60);      /*转换为分钟*/
            var showSecond=parseInt(totalTime%60);         /*转换为秒*/
            showTime(showDay,showHour,showMinute,showSecond);     /*调用显示函数*/
            timeover++;
            setTimeout(getData,1000);        /*让时间动起来*/      /*这里使用setInterval()会停不下来*/
        }
    }
}

function isRunYear(a) {
    if(a%400==0||(a%4==0&&a%100!=0)){   /*判断是否为闰年 能被400整除 或者能被4整除且不能被100整除*/
        return true;
    }else{
        return false;
    }
}
function showTime(d,h,m,s) {
    var input_box=document.getElementsByTagName("input");
    input_box[7].value=d;
    input_box[8].value=h;
    input_box[9].value=m;
    input_box[10].value=s;
}
function nowTime() {
    var now=document.getElementById("showTime");
    var time=new Date();
    var year=time.getFullYear();      /*获取年*/
    var month=time.getMonth()+1;      /*获取月 月要加一*/
    var day=time.getDate();           /*获取日*/
    var hour=time.getHours();         /*获取时*/
    var minute=time.getMinutes();     /*获取分*/
    var second=time.getSeconds();     /*获取秒*/
    if(minute<10){
        minute="0"+minute;     /*当为一个数时前面加个0*/
    }else if (second<10){
        second="0"+second;
    }
    var show="当前时间为："+year+"年"+month+"月"+day+"日"+hour+"时"+minute+"分"+second+"秒";
    now.innerHTML=show;
    setTimeout(nowTime,1000);
}

酸霉汤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS倒计时

此案例主要用到Date对象相关的方法。在JS中月份是从0开始的，11是最后一个月所以在使用时要注意加一减一。截图倒计时开始倒计时结束HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>倒计时测试</t...
复制链接

扫一扫