PHP+HTML实现页面自考倒计时功能

最新推荐文章于 2021-04-02 16:47:43 发布

cypakoo

最新推荐文章于 2021-04-02 16:47:43 发布

阅读量1.3k

点赞数

分类专栏： Web开发文章标签： html php date javascript timezone div

本文链接：https://blog.csdn.net/cypakoo/article/details/7181677

版权

Web开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、新建clock.html

大体代码如下（特别注意html编码和php编码要统一成utf-8）：

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自考倒计时</title>
</head>
<body>
<div id="times">
           <div id="times_text">距离<span id="nav_dates"></span>自考时间还有</div>
           <div id="times_day"><span id="nav_day"></span><span id="nav_curtime"></span>天</div>
       </div>
<script language="javascript" type="text/javascript" src="time.php"></script>
</body>
</html>

二、新建一个time.php文件

代码一下：

<?php

                       $d=date('n');//取系统日期的月份进行条件判断
                       //设置时区：中国
                      date_default_timezone_set ("PRC");
   //设置四个日期变量（1、4、7、10月自考日期）
                      $a1=strtotime(date( "Y-12-31"));
                      $a2=strtotime(date( "Y-4-1"));
                      $a3=strtotime(date( "Y-7-1"));
                      $a4=strtotime(date( "Y-10-1"));
                      if ($d >= 10) {
                               $b=$a1+86400-time();
                                  $c=date('Y')+'1';
                             echo("document.write(\"\");");
                             $js_html="var mydate=document.getElementById('nav_dates');";
                             $js_html .="mydate.innerHTML='".$c."年1月';";
                     } elseif ($d >= 7) {
                             $b=$a4-time();
   $c=date('Y');
       echo("document.write(\"\");");
                            $js_html="var mydate=document.getElementById('nav_dates');";
      $js_html .="mydate.innerHTML='".$c."年10月';";
                   } elseif ($d >= 4) {
                            $b=$a3-time();
                            $c=date('Y');
                            echo("document.write(\"\");");
                           $js_html="var mydate=document.getElementById('nav_dates');";
                           $js_html .="mydate.innerHTML='".$c."年7月';";
                  } elseif ($d >= 1) {
   $b=$a2-time("");
   $c=date('Y');
       echo("document.write(\"\");");
   $js_html="var mydate=document.getElementById('nav_dates');";
      $js_html .="mydate.innerHTML='".$c."年4月';";                 }
                $js_html .="var nav_day=document.getElementById('nav_day');";
                $js_html .="nav_day.innerHTML='".floor($b/86400)."';";
               echo($js_html);
?>

三、总结

使用javascript的嵌套将PHP的设置，调入到html中div的id中，通过服务器读取php，实现动态倒计时。

js： <script language="javascript" type="text/javascript" src="ajaxbuilder.php"></script>

php：echo("document.write(\"\");");
          $js_html="var mydate=document.getElementById('nav_dates');";
         $js_html .="mydate.innerHTML='".date('Y')."年4月';";
         $js_html .="var nav_day=document.getElementById('nav_day');";
         $js_html .="nav_day.innerHTML='"";
        echo($js_html);