javascript - 如何将CSS元素添加到倒计时-6ren

javascript - 如何将CSS元素添加到倒计时

转载作者：行者123 更新时间：2023-11-28 05:03:20

我将这个倒计时时钟编码(复制)到七月一号。使用 .foo 类，我设法使时钟颜色为红色，字体大小为 50px，但如何为每天、小时、分钟、秒制作单独的边框？

这是我的第一个代码，所以请简单解释一下。

<!DOCTYPE html>

    <html lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css">   

    <style>

    h1{color:brown;
    }
    p
    {font-size:50px;
    color:lightcoral;
    }

    .foo{color:red;
    font-size:50px;



     }

        </style>
</head>

<body style="background-color:cyan" "text-align:center">

<h1> </h1>

<h2> </h2>



   <div id="clockdiv" class="foo">

    Days:<span class="days"></span><br>
    Hours: <span class="hours"></span><br>
    Minutes: <span class="minutes"></span><br>
    Seconds: <span class="seconds"></span>
    </div>








    <script>
    var deadline = '7/1/2017';
    initializeClock('clockdiv', deadline);

    function getTimeRemaining(endtime){
     var t = Date.parse(endtime) - Date.parse(new Date());
     var seconds = Math.floor( (t/1000) % 60 );
     var minutes = Math.floor( (t/1000/60) % 60 );
     var hours = Math.floor( (t/(1000*60*60)) % 24 );
     var days = Math.floor( t/(1000*60*60*24) );
    return {
      'total': t,
      'days': days,
      'hours': hours,
      'minutes': minutes,
      'seconds': seconds
    };

    }

    function initializeClock(id, endtime){
      var clock = document.getElementById(id);
      var daysSpan = clock.querySelector('.days');
      var hoursSpan = clock.querySelector('.hours');
      var minutesSpan = clock.querySelector('.minutes');
      var secondsSpan = clock.querySelector('.seconds');

      var timeinterval = setInterval(function(){
        var t = getTimeRemaining(endtime);
        clock.innerHTML = 'days: ' + t.days + '<br>' +
                      'hours: '+ t.hours + '<br>' +
                      'minutes: ' + t.minutes + '<br>' +
                      'seconds: ' + ('0' + t.seconds).slice(-2);
       if(t.total<=0){
         clearInterval(timeinterval);
       }
      },1000);
    }




</script>
    </body>
</html>

最佳答案

将 CSS 分配给您的类(class)(天/小时/分钟)等

.days .hours .minutes .seconds {
    border-style: solid;
    border-width: 5px;
}

如果您希望不同的元素具有不同的样式，请将它们分开

.days {
border-style: solid;
    border-width: 5px;
}

.hours {
border-style: solid;
    border-width: 10px;
}

例如。

引用:http://www.w3schools.com/CSSref/pr_border.asp

关于javascript - 如何将CSS元素添加到倒计时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41969107/

文章推荐： javascript - Google map 内容未显示在 Bootstrap 模式第 2 部分中

文章推荐： javascript - React js - Laravel 5 : Using csrf-token in POST method

文章推荐： javascript - 如何使此弹出窗口仅在单击按钮时加载

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何将CSS元素添加到倒计时