php js倒计时代码(倒计时代码

最新推荐文章于 2021-04-15 05:37:20 发布
最新推荐文章于 2021-04-15 05:37:20 发布
阅读量227 收藏
点赞数
分类专栏： PHP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbqjzx/article/details/105447623
版权

  1. 刷新网页继续会倒计

  2. <?php

  3. //php的时间是以秒算。js的时间以毫秒算

  4. date_default_timezone_set('PRC');

  5. //date_default_timezone_set("Asia/Hong_Kong");//地区

  6.  

  7. $timestr = "2017-3-21 18:50:00";//倒计时时间

  8. $time = strtotime($timestr);//时间戳

  9. $nowtime = time();//当前时间戳

  10.  

  11. if ($time>=$nowtime){

  12. $overtime = $time-$nowtime; //实际剩下的时间（单位/秒）

  13. }else{

  14. $overtime=0;

  15. }

  16. ?>

  17. <!DOCTYPE html>

  18. <html lang="en">

  19. <head>

  20. <meta charset="UTF-8">

  21. <title>Document</title>

  22.  

  23. </head>

  24. <body>

  25.  

  26. <script language="JavaScript">

  27. var runtimes = 0;

  28. function GetRTime(){

  29. var nMS = <?php echo $overtime; ?>*1000-runtimes*1000;

  30.  

  31. if (nMS>=0){

  32. var nD=Math.floor(nMS/(1000*60*60*24))%24;

  33. var nH=Math.floor(nMS/(1000*60*60))%24;

  34. var nM=Math.floor(nMS/(1000*60)) % 60;

  35. var nS=Math.floor(nMS/1000) % 60;

  36. document.getElementById("RemainD").innerHTML=nD;

  37. document.getElementById("RemainH").innerHTML=nH;

  38. document.getElementById("RemainM").innerHTML=nM;

  39. document.getElementById("RemainS").innerHTML=nS;

  40. runtimes++;

  41. if(nD==0){

  42. //天数0 隐藏天数

  43. document.getElementById("hideD").style.display="none";

  44. if(nH==0){

  45. //数0 隐藏天数

  46. document.getElementById("hideH").style.display="none";

  47. if(nM==0){

  48. document.getElementById("hideM").style.display="none";

  49. if(nS==0){

  50. alert("倒计时完毕");

  51. }

  52. }

  53. }

  54. }

  55. setTimeout("GetRTime()",1000);

  56. }

  57. }

  58. window.onload = function() {

  59. GetRTime();

  60. }

  61. </script>

  62. <h4>开售还有 <span id="hideD"><strong id="RemainD"></strong>天</span> <span id="hideH"><strong id="RemainH"></strong>小时</span><span id="hideM"> <strong id="RemainM"></strong>分钟</span> <span id="hideS"><strong id="RemainS"></strong>秒</span></h4>

  63. </body>

  64. </html>

 

 

 

完整例子：在某个时间上增加X分钟，倒计时 ，到时间后自动提交表单

这些元素到这里找：http://www.layui.com/

<link href="../templates/metx5/layui/css/layui.css" rel="stylesheet">
<script src="../templates/metx5/layui/lay/dest/layui.all.js"></script>

 

 

  1. <?php

  2. //php的时间是以秒算。js的时间以毫秒算

  3. date_default_timezone_set('PRC');

  4. //date_default_timezone_set("Asia/Hong_Kong");//地区

  5. $start_time="2017-3-22 17:00:00";//开始考试时间

  6. echo $start_time."<br>";

  7. $mm=120*60;//分钟换成钞钟 考试时间

  8. $min=date("Y-m-d H:i:s",strtotime($start_time)+$mm);//$start_time 用户开始考试时的时间

  9. //$min=date($start_time,strtotime("+$mm minute"));//$start_time 用户开始考试时的时间

  10. echo $min."<br>";

  11.  

  12. $timestr=$min;//倒计时时间

  13. //$timestr = "2017-3-22 12:50:00";

  14. $time = strtotime($timestr);//时间戳

  15. $nowtime = time();//当前时间戳

  16.  

  17. if ($time>=$nowtime){

  18. $overtime = $time-$nowtime; //实际剩下的时间（单位/秒）

  19. $start_ok=0;//考试时间未结束时 设定$start_ok=0

  20. }else{

  21. $overtime=0;

  22. $start_ok=1;//考试时间结束 设定$start_ok=1

  23. }

  24. //echo date('Y-m-d H:i:s',strtotime("+120 minute"));

  25.  

  26. ?>

  27. <!DOCTYPE html>

  28. <html lang="en">

  29. <head>

  30. <meta charset="UTF-8">

  31. <title>Document</title>

  32. <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>

  33. <link href="../templates/metx5/layui/css/layui.css" rel="stylesheet">

  34. <script src="../templates/metx5/layui/lay/dest/layui.all.js"></script>

  35. <style>

  36. .layui-layer-demo .layui-layer-title {

  37. border: none;

  38. background-color: #E60012;

  39. color: #fff;

  40. }

  41. .layui-layer-title {

  42. padding: 0 80px 0 20px;

  43. height: 42px;

  44. line-height: 42px;

  45. border-bottom: 1px solid #eee;

  46. font-size: 14px;

  47. color: #333;

  48. overflow: hidden;

  49. background-color: #F8F8F8;

  50. border-radius: 2px 2px 0 0;

  51. }

  52. .layui-layer-page .layui-layer-content {

  53. position: relative;

  54. overflow: auto;

  55. }

  56. .layui-layer-content {

  57. position: relative;

  58. }

  59. </style>

  60. </head>

  61. <body>

  62. <form name="form1" action="index.php"> </form>

  63. <script language="JavaScript">

  64. var runtimes = 0;

  65. function GetRTime(){

  66. var nMS = <?php echo $overtime; ?>*1000-runtimes*1000;

  67.  

  68. if (nMS>=0){

  69. var nD=Math.floor(nMS/(1000*60*60*24))%24;

  70. var nH=Math.floor(nMS/(1000*60*60))%24;

  71. var nM=Math.floor(nMS/(1000*60)) % 60;

  72. var nS=Math.floor(nMS/1000) % 60;

  73. document.getElementById("RemainD").innerHTML=nD;

  74. document.getElementById("RemainH").innerHTML=nH;

  75. document.getElementById("RemainM").innerHTML=nM;

  76. document.getElementById("RemainS").innerHTML=nS;

  77. runtimes++;

  78. if(nD==0){

  79. //天数0 隐藏天数

  80. document.getElementById("hideD").style.display="none";

  81. if(nH==0){

  82. //数0 隐藏天数

  83. document.getElementById("hideH").style.display="none";

  84. if(nM==0){

  85. document.getElementById("hideM").style.display="none";

  86. if(nS==0){

  87.  

  88. layer.open({

  89. type: 1,

  90. skin: 'layui-layer-demo', //样式类名

  91. shade: [0.5, '#000'],//遮罩 即弹层外区域

  92. closeBtn: 0, //不显示关闭按钮

  93. anim: 2,

  94. time: 900000,//即代表3秒后自动关闭，注意单位是毫秒（1秒=1000毫秒） 默认0不会自动关闭

  95. shadeClose: false, //开启遮罩关闭

  96. content: '<div id="" class="layui-layer-content"><div style="padding:20px;">考试时间已经结束！<br>你怎么样给她整容都行<br><br><br>我是华丽的酱油==。</div></div>'

  97. });

  98. //$start_ok=2;//

  99. setInterval("document.all.form1.submit()",5000)//5秒后自动提交表单form1

  100. // layer.msg('考试时间已经结束！', {

  101. // shade: [0.5, '#000'],//遮罩 即弹层外区域

  102. // time: 2000, //20s后自动关闭

  103. // btn: ['立即提交', '知道了']

  104. // ,yes: function(index, layero){

  105. // //按钮【按钮一】的回调

  106. // self.location='index.php?#top';//立即投资按钮

  107. // }

  108. // ,btn2: function(index, layero){

  109. // //按钮【按钮二】的回调

  110. // //self.location='index1.php?#top';//立即投资按钮

  111. // //return false 开启该代码可禁止点击该按钮关闭

  112. // }

  113. // });

  114. //setTimeout('window.location="http://panliu888.myetang.com"',9000)

  115. }

  116. }

  117. }

  118. }

  119. setTimeout("GetRTime()",1000);

  120. }

  121. }

  122. window.onload = function() {

  123. GetRTime();

  124. }

  125. </script>

  126. <h4>开售还有 <span id="hideD"><strong id="RemainD"></strong>天</span> <span id="hideH"><strong id="RemainH"></strong>小时</span><span id="hideM"> <strong id="RemainM"></strong>分钟</span> <span id="hideS"><strong id="RemainS"></strong>秒</span></h4><?php echo $start_ok?>

  127. </body>

  128. </html>

hbqjzx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
PHP实现倒计时功能
12-16
本文实例为大家分享了PHP实现倒计时功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <title>PHP实现倒计时功能</title> </head> <body> <?php date_default_timezone_set('PRC'); $starttimestr = date('Y-m-d H:i:s', strtotime('now')); $starttimestr= mktime(0,0,0,7,7,2020); //$endtimestr = date('Y-m-d H:i:s', strtotime('+18
php-倒计时
weixin_42124384的博客
11-15 1358
php-倒计时
php 倒计时 方法,如何使用PHP进行倒计时
weixin_36365168的博客
04-15 457
p {text-align: center;font-size: 60px;margin-top: 0px;}// Set the date we're counting down to// 1. JavaScript// var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();// 2. PHPvar countDownDat...
php 动态倒计时计数器跳转至另一个页面,JavaScript_基于JavaScript实现网页倒计时自动跳转代码，用JS实现网页上的自动跳转功 - phpStudy...
weixin_29300931的博客
03-13 297
基于JavaScript实现网页倒计时自动跳转代码用JS实现网页上的自动跳转功能，倒计时跳转至指定网页，倒计时间可自设，时间到则自动跳转到指定的网址，对于JS来说，实现该似乎挺简单哦，用IIS上的301也可实现跳转，以及mete标签也可以实现自动跳转，根据你自己的需要了。JS倒计时网页自动跳转代码function delayURL(url) {var delay = document.getEle...
php倒计时天数代码,PHP实现倒计时功能
weixin_31979781的博客
03-09 705
PHP实现倒计时功能date_default_timezone_set('PRC');$starttimestr = date('Y-m-d H:i:s', strtotime('now'));$starttimestr= mktime(0,0,0,7,7,2020);//$endtimestr = date('Y-m-d H:i:s', strtotime('+18 hours 1 minute...
JS实现十分钟倒计时代码实例
01-19
编写JS倒计时代码需要用到很多JavaScript知识，比如：if函数，Math.floor，定时器setInterval等等，如有不清楚的小伙伴可以参考PHP中文网的相关文章，或者访问 JavaScript视频教程。 举例：10分钟考试倒计时，当时间...
js自定义设置日期时间倒计时代码.zip
07-11
实现效果： ... js自定义设置日期时间倒计时代码,通过使用原生js实现人时间日期的倒计时效果，一般在商城中用的比较多，例如搞某某活动，实现大促销活动，然后一个炫酷的倒计时效果，php中文网推荐下载！
倒计时-jquery倒计时代码
05-15
摘要:脚本资源,jQuery,倒计时 运行环境：HTML/PHP/ASP/
php+js实现倒计时功能
12-09
js部分 代码如下:setInterval(“time_controller()”,1000);function time_controller(){ $(“.time_val”).each(function(){ var time_id = “time_show_”+$(this).attr(‘for’); var time_val= $(this).attr...
php实现倒计时效果
12-18
这里写了一个考试系统剩余时间倒计时的显示代码和大家一起探讨。 实现原理： PHP获取的是服务器端的时间，我们只要设置考试的开始时间和结束时间及当前时间。如果当前的时间不在我们的考试时间范围内，则显示给考生...
PHP倒计时实现
08-21
倒计时实现多个，同时进行
一个PHP倒计时代码的例子
03-11
利用PHP代码编写的倒计时程序范例。希望对需要的朋友有点用处，谢谢。
php 动态显示倒计时,js实现动态倒计时功能代码
weixin_35796523的博客
03-13 356
在一些电子商务网站的活动页面常常会出现一些动态倒计时的效果元素，比如离活动开始还有xx小时xx分钟xx秒，离活动结束还有xx小时xx分钟xx秒等，并且时间是动态减少的，非常的引人注意。那么这篇文章就说一说，如何利用原生JS来实现动态倒计时的效果。js实现倒计时-时分秒HTML代码JS代码window.onload=functioncountTime(){//获取当前时间vardate=...
php动态倒计时,高分求一段 PHP 实时显示倒计时 代码
weixin_39517520的博客
03-09 158
function YaoShuai_time(){var Digital=new Date();var hours=Digital.getHours();var minutes=Digital.getMinutes();var seconds=Digital.getSeconds();var year=Digital.getFullYear();var month=Digital.getMonth...
php 倒计时 方法,php 倒计时 代码 很好用
weixin_36245032的博客
04-15 457
//使用方法 echo countDown("2021-1-1");function countDown($endtime){$endtime=strtotime($endtime) //将$endtime时间转换为时间戳$differ = $endtime - time();switch ($differ){case $differ < 0 :$differ = '已经结束！';break...
PHP实现倒计时
weixin_33950035的博客
08-17 1119
2019独角兽企业重金招聘Python工程师标准>>> ...
后端倒计时 php,简单的PHP实现倒计时方法
weixin_31773159的博客
03-09 392
/** * @todo Count Down (倒 计时 ) * @param String $endTime * @return String time * @example * $endTime = 2014-07-13 8:15:00;echo countDown($endTime); */function countDown($endTime){$endTime = strtotime($...
php 60秒倒计时
最新发布
01-28
PHP是一种用于编写网页和Web应用程序的服务器端脚本语言。如果你想要在网页上实现一个60秒倒计时的功能，你可以使用PHP结合HTML和JavaScript来实现。 首先，在PHP中，你可以使用time()函数获取当前的时间戳，然后加上60秒的时间差来计算出倒计时结束的时间戳。接着，你可以将这个时间戳传递给HTML页面的JavaScript代码来进行倒计时的显示和更新。 在HTML部分，你可以创建一个显示倒计时的地方，比如一个div元素，然后在JavaScript代码中使用setInterval()函数每秒更新一次倒计时的显示。 在JavaScript中，你可以计算当前时间和结束时间的时间差，然后进行格式化并更新到页面上。当倒计时结束时，你可以执行相应的操作，比如显示一个提示信息或者执行其他的动作。 总结来说，通过结合PHP生成倒计时的截止时间戳，然后在HTML和JavaScript中实现倒计时的显示和更新，你就可以实现一个60秒倒计时的功能了。这样的倒计时功能可以用在网页游戏、考试计时、限时优惠等场景中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hbqjzx

你的鼓励将是我分享的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值