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 classesfunction 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/Sfunction 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>