<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>生成一个倒计时效果</title> <style type="text/css"> body{ margin:0; padding:0; background: orange; width: 100%; height: 100%; font-size: 5em; color: #fff; text-align:center; font-family: 'microsoft yahei',Arial,sans-serif; } .countdown{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } </style> <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> <script type="text/javascript"> $(function() { var $countdown = $('.countdown'), number = $countdown.html() * 100 / 100; //number = parseInt($countdown.html()); var countdownInterval = window.setInterval(function() { number--; if (number == 0) { $countdown.html("你好，涂传龙"); window.clearInterval(countdownInterval); } else { $countdown.html(number); } }, 1000); }); </script> </head> <body> <div class="countdown"> 60 </div> </body> </html>