JavaScript实现倒计时效果

最新推荐文章于 2023-05-31 18:30:08 发布

止境

最新推荐文章于 2023-05-31 18:30:08 发布

阅读量843

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/hc1104/article/details/19724311

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>实时倒计时</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body>
<!--单位：秒-->
剩余时间：<span id="endtime">10000</span>
<script type="text/javascript">
var CID = "endtime";//标记
if(window.CID != null)
{
    var iTime = document.getElementById(CID).innerText;//获取span中的秒数
    var Account;
    RemainTime();//执行
}
function RemainTime()//倒计时方法
{
    var iDay,iHour,iMinute,iSecond;
    var sDay="",sHour="",sMinute="",sSecond="",sTime="";
    if (iTime >= 0)
    {
        iDay = parseInt(iTime/24/3600);
        if (iDay > 0)
        {
            sDay = iDay + "天";
        }
        iHour = parseInt((iTime/3600)%24);
        if (iHour > 0){
            sHour = iHour + "小时";
        }
        iMinute = parseInt((iTime/60)%60);
        if (iMinute > 0){
            sMinute = iMinute + "分钟";
        }
        iSecond = parseInt(iTime%60);
        if (iSecond >= 0){
            sSecond = iSecond + "秒";
        }
        if ((sDay=="")&&(sHour=="")){
            sTime="<span style='color:darkorange'>" + sMinute+sSecond + "</font>";
        }
        else
        {
            sTime=sDay+sHour+sMinute+sSecond;
        }
        if(iTime==0){//时间到
            clearTimeout(Account);
              sTime="<span style='color:green'>时间到了！</span>";
        }
        else//持续执行倒计时方法
        {
            Account = setTimeout("RemainTime()",1000);
        }
        iTime=iTime-1;
    }
    else
    {
            sTime="<span style='color:red'>倒计时结束！</span>";
    }
    document.getElementById(CID).innerHTML = sTime;//将剩余时间显示于span中
}
</script>
</body>
</html>