CSS3倒计时警报灯样式特效代码下载



12 45 16



特效描述:CSS3 倒计时 警报灯样式,CSS3倒计时警报灯样式特效代码下载

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">

2. HTML代码

<script>
window.onload = function() {
  startTime();
};
</script>
<div class="nixcont">
    <div class="nixpair">
        <div class="nixbg">
            <div id="nix_h1_0" class="nix">0</div>
            <div id="nix_h1_1" class="nix">1</div>
            <div id="nix_h1_2" class="nix">2</div>
            <div id="nix_h1_3" class="nix">3</div>
            <div id="nix_h1_4" class="nix">4</div>
            <div id="nix_h1_5" class="nix">5</div>
            <div id="nix_h1_6" class="nix">6</div>
            <div id="nix_h1_7" class="nix">7</div>
            <div id="nix_h1_8" class="nix">8</div>
            <div id="nix_h1_9" class="nix">9</div>
        </div>
        <div class="nixbg">
            <div id="nix_h2_0" class="nix">0</div>
            <div id="nix_h2_1" class="nix">1</div>
            <div id="nix_h2_2" class="nix">2</div>
            <div id="nix_h2_3" class="nix">3</div>
            <div id="nix_h2_4" class="nix">4</div>
            <div id="nix_h2_5" class="nix">5</div>
            <div id="nix_h2_6" class="nix">6</div>
            <div id="nix_h2_7" class="nix">7</div>
            <div id="nix_h2_8" class="nix">8</div>
            <div id="nix_h2_9" class="nix">9</div>
        </div>
    </div>
    <div class="nixpair">
        <div class="nixbg">
            <div id="nix_m1_0" class="nix">0</div>
            <div id="nix_m1_1" class="nix">1</div>
            <div id="nix_m1_2" class="nix">2</div>
            <div id="nix_m1_3" class="nix">3</div>
            <div id="nix_m1_4" class="nix">4</div>
            <div id="nix_m1_5" class="nix">5</div>
            <div id="nix_m1_6" class="nix">6</div>
            <div id="nix_m1_7" class="nix">7</div>
            <div id="nix_m1_8" class="nix">8</div>
            <div id="nix_m1_9" class="nix">9</div>
        </div>
        <div class="nixbg">
            <div id="nix_m2_0" class="nix">0</div>
            <div id="nix_m2_1" class="nix">1</div>
            <div id="nix_m2_2" class="nix">2</div>
            <div id="nix_m2_3" class="nix">3</div>
            <div id="nix_m2_4" class="nix">4</div>
            <div id="nix_m2_5" class="nix">5</div>
            <div id="nix_m2_6" class="nix">6</div>
            <div id="nix_m2_7" class="nix">7</div>
            <div id="nix_m2_8" class="nix">8</div>
            <div id="nix_m2_9" class="nix">9</div>
        </div>
    </div>
    <div class="nixpair">
        <div class="nixbg">
            <div id="nix_s1_0" class="nix">0</div>
            <div id="nix_s1_1" class="nix">1</div>
            <div id="nix_s1_2" class="nix">2</div>
            <div id="nix_s1_3" class="nix">3</div>
            <div id="nix_s1_4" class="nix">4</div>
            <div id="nix_s1_5" class="nix">5</div>
            <div id="nix_s1_6" class="nix">6</div>
            <div id="nix_s1_7" class="nix">7</div>
            <div id="nix_s1_8" class="nix">8</div>
            <div id="nix_s1_9" class="nix">9</div>
        </div>
        <div class="nixbg">
            <div id="nix_s2_0" class="nix">0</div>
            <div id="nix_s2_1" class="nix">1</div>
            <div id="nix_s2_2" class="nix">2</div>
            <div id="nix_s2_3" class="nix">3</div>
            <div id="nix_s2_4" class="nix">4</div>
            <div id="nix_s2_5" class="nix">5</div>
            <div id="nix_s2_6" class="nix">6</div>
            <div id="nix_s2_7" class="nix">7</div>
            <div id="nix_s2_8" class="nix">8</div>
            <div id="nix_s2_9" class="nix">9</div>
        </div>
    </div>
</div><script>
//These functions help add, remove or toggle css classes
function tog_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem.classList.contains(cl) === true) {
    elem.classList.remove(cl);
  } else {
    elem.classList.add(cl);
  }
}
function add_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem.classList.contains(cl) !== true) {
    elem.classList.add(cl);
  }
}
function rem_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem.classList.contains(cl) === true) {
    elem.classList.remove(cl);
  }
}
//This function gets the date and does operations using H/M/S
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  var h1 = (h - h % 10) / 10;
  var h2 = h % 10;
  var m1 = (m - m % 10) / 10;
  var m2 = m % 10;
  var s1 = (s - s % 10) / 10;
  var s2 = s % 10;
  set_nix_class("s1", s1);
  set_nix_class("s2", s2);
  set_nix_class("m1", m1);
  set_nix_class("m2", m2);
  set_nix_class("h1", h1);
  set_nix_class("h2", h2);
  var t = setTimeout(startTime, 500);
}
//This function calls the appropriate class changes 
function set_nix_class(target, val) {
  for (i = 0; i < 10; i++) {
    if (i != val) {
      rem_class("nix_" + target + "_" + i, "nix_open");
    }
  }
  add_class("nix_" + target + "_" + val, "nix_open");
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动星星打分 其他 计时器 倒计时插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到