夏日博客

A-A+

js中setInterval与SetTimeOut实现团购倒计时效果

2016年10月16日 前端设计 暂无评论 阅读 4 views 次

我们在团购网站会看到很多产品都可以看到有时间在那里走，下面我来给大家介绍js中setInterval与SetTimeOut实现团购倒计时效果，有需要了解的朋友可参考。

简单示例,看个简单的例子,简单页面在加载完两秒后，写下Delayed alert!代码如下:

setTimeout('document.write("Delayed alert!");', 2000);

我们先来看一个setInterval版计时跳转效果,代码如下:

  1. $(function () {   
  2. setInterval(function () {   
  3. var time = $("#time").text();   
  4. time = parseInt(time);   
  5. time--;   
  6. if (time >0) {   
  7. $("#time").text(time);   
  8. } else {   
  9. window.location = $("#url").attr("href");   
  10. }   
  11. }, 1000);   
  12. });  

再看一个SetTimeOut版 计时跳转效果,代码如下:

  1. <script type="text/javascript">   
  2. window.onload = function () {   
  3. setTimeout(changeTime, 1000);   
  4. }   
  5. function changeTime() {   
  6. var time = document.getElementById("time").innerHTML;   
  7. time = parseInt(time);   
  8. time--;   
  9. if (time <= 0) {   
  10. var url = document.getElementById("url").href;   
  11. window.location = url;   
  12. } else {   
  13. document.getElementById("time").innerHTML= time;   
  14. setTimeout(changeTime, 1000);   
  15. } //xiariboke.net  
  16. }   
  17. </script>  

团购网站倒计时效果代码代码如下:

  1. <SCRIPT LANGUAGE="JavaScript">  
  2. function fresh() {  
  3. var time1 = document.getElementById("timeD").value;  
  4. for (var i = 1; i <= 5; i++) {  
  5. var endtime = new Date(time1);  
  6. var nowtime = new Date();  
  7. var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);  
  8. d = parseInt(leftsecond / 3600 / 24);  
  9. h = parseInt((leftsecond / 3600) % 24);  
  10. m = parseInt((leftsecond / 60) % 60);  
  11. s = parseInt(leftsecond % 60);  
  12. // document.getElementById("times").innerHTML=__h+"小时"+__m+"分"+__s+"秒";  
  13. document.getElementById("times"+i.toString()).innerHTML = h + "小时" + m + "分" + s + "秒";  
  14. if (leftsecond <= 0) {  
  15. A  
  16. }  
  17. }  
  18. }  
  19. fresh()  
  20. var sh;  
  21. sh = setInterval(fresh, 1000);  
  22. </SCRIPT>  
  23. //实现商品倒计时开始  
  24. DataSet dataset = new DataSet();  
  25. string connStr = ConfigurationManager.ConnectionStrings["sqlservercon"].ConnectionString;  
  26. using (SqlConnection conn = new SqlConnection(connStr))  
  27. {  
  28. conn.Open();  
  29. using (SqlCommand cmd = conn.CreateCommand())  
  30. {  
  31. cmd.CommandText = "Select * from T_buondTimeBuy";  
  32. SqlDataAdapter adapter = new SqlDataAdapter(cmd);  
  33. adapter.Fill(dataset);  
  34. }  
  35. }  
  36. DataTable table = dataset.Tables[0];  
  37. for (int i = 0; i < table.Rows.Count; i++)  
  38. {  
  39. DataRow row = table.Rows[i];  
  40. time[i]= (row["time"]).ToString();  
  41. }  
  42. timeD.Value = time[1];  
  43. //实现商品倒计时结束  

setTimeout与setInterval区别

setTimeout方法是定时程序,也就是在什么时间以后干什么,干完了就拉倒.

setInterval方法则是表示间隔一定时间反复执行某操作.

如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要 根据使用的方法不同，调用不同的清除方法,例如如下代码:

tttt=setTimeout('northsnow()',1000);

clearTimeout(tttt);

或者如下代码:

tttt=setInterval('northsnow()',1000);

clearInteval(tttt);

标签：

给我留言