<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-type" content = "text/html; charset = gb2312" />
    <title>时钟的动态情况</title>
    <script type = "text/javascript">
        function clock_12h() {
            document.write("<h2>CSDN论坛欢迎您!<h2/>");
            document.write("<br/>");
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth() + 1;
            var date = today.getDate();
            var day = today.getDay();
            var hh = today.getHours();
            var mm = today.getMinutes();
            var ss = today.getSeconds();
            switch (day) {
                case 0:
                    day = "星期日";
                    break;
                case 1:
                    day = "星期一";
                    break;
                case 2:
                    day = "星期二";
                    break;
                case 3:
                    day = "星期三";
                    break;
                case 4:
                    day = "星期四";
                    break;
                case 5:
                    day = "星期五";
                    break;
                case 6:
                    day = "星期六";
                    break;
                default:
                    day = "error";
                    break;
            }
            document.getElementById("myclock").innerHTML = ("<h2>今天是:" + year + "年" + month + "月" + date + "日" + "&nbsp;&nbsp;" + hh + ":" + mm + ":" + ss + "&nbsp;&nbsp;" + day + "<h2/>")
       }
       var MyTimer = setInterval("clock_12h()", 1000);
    </script>
</head>
<body >
<div id = "myclock"></div>
</body>
</html>这样写会报错,说什么行: 45
错误: 无法设置属性“innerHTML”的值: 对象为 null 或未定义,如果把这行代码:
document.getElementById("myclock").innerHTML = ("<h2>今天是:" + year + "年" + month + "月" + date + "日" + "&nbsp;&nbsp;" + hh + ":" + mm + ":" + ss + "&nbsp;&nbsp;" + day + "<h2/>")改成这样的话:
document.write("<h2>今天是:" + year + "年" + month + "月" + date + "日" + "&nbsp;&nbsp;" + hh + ":" + mm + ":" + ss + "&nbsp;&nbsp;" + day + "<h2/>")就行了,但问题又出现了时间不会动啊,是静止的。相当于这句代码没写。
var MyTimer = setInterval("clock_12h()", 1000); 哎到底是什么回事? 找了好久没找出原因, 各位帮忙改改代码,感激不尽啊。

解决方案 »

  1.   

    HTML是从上到下解释执行的,解释到.innerHTML那一句时div都没生成当然会出错了另外document.write会覆盖原来的所有代码,包含script的,所以当然就不再执行了
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv = "Content-type" content = "text/html; charset = gb2312" />
      <title>时钟的动态情况</title></head>
    <body >
    <div id = "myclock"></div>
      <script type = "text/javascript">
      function clock_12h() {
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1;
      var date = today.getDate();
      var day = today.getDay();
      var hh = today.getHours();
      var mm = today.getMinutes();
      var ss = today.getSeconds();
      switch (day) {
      case 0:
      day = "星期日";
      break;
      case 1:
      day = "星期一";
      break;
      case 2:
      day = "星期二";
      break;
      case 3:
      day = "星期三";
      break;
      case 4:
      day = "星期四";
      break;
      case 5:
      day = "星期五";
      break;
      case 6:
      day = "星期六";
      break;
      default:
      day = "error";
      break;
      }
      document.getElementById("myclock").innerHTML = ("<h2>今天是:" + year + "年" + month + "月" + date + "日" + "&nbsp;&nbsp;" + hh + ":" + mm + ":" + ss + "&nbsp;&nbsp;" + day + "<h2/>")
      }
      var MyTimer = setInterval("clock_12h()", 1000);
      </script></body>
    </html>
      

  2.   


    谢谢你,问题已经解决了。呵呵,但我还有一点疑惑:为什么这样的代码它可以啊?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv = "Content-Type" content = "text/html ; charset = gb2312" />
        <title>时钟动态效果</title>
        <script type = "text/javascript">
            function disptime() {
                var today = new Date();
                var hh = today.getHours();
                var mm = today.getMinutes();
                var ss = today.getSeconds();
                document.getElementById("myclock").innerHTML = "<h3>现在是北京时间:" + hh + ":" + mm + ":" + ss + "<h3/>"
            }
            var mytimer = setInterval("disptime()", 1000);
        </script>
    </head>
    <body>
    <div id = "myclock"></div>
    </body>
    </html>它的div也是后来生成的啊? 为什么这个又可以呢? 
      

  3.   

    哦,原来最主要的还是那两句  document.write("<h2>CSDN论坛欢迎您!<h2/>");
      document.write("<br/>");把页面上原有的div给覆盖掉的,不过我说的那个问题以后还是要注意的,很多初学者都会犯的错。
      

  4.   


    还有也不对啊,这句话就没了啊? 问题这句话是显示在时间的上面啊,document.write("<h2>CSDN论坛欢迎您!<h2/>");写上去再次报错!应该写在哪里这句代码,让它显示在时间的上方。???再次赐教。
     
      

  5.   


    恩,再次受教了,非常感谢你。 那个文字显示的问题也解决了。就是那两句代码的原因。 把这句代码放下来就行了改成这样。}
       document.getElementById("myclock").innerHTML = ("<h2>今天是:" + year + "年" + month + "月" + date + "日" + "&nbsp;&nbsp;" + hh + ":" + mm + ":" + ss + "&nbsp;&nbsp;" + day + "<h2/>")
       }
     document.write("<h2>CSDN论坛欢迎您!<h2/>");
     放在这里就可以了。或者放在这句代码的下面也行。
     var MyTimer = setInterval("clock_12h()", 1000);
     
      

  6.   

    p2227 问题又来了,再次请教:如果我要判断当前小时是否大于12,如果大于12则为下午,否则为上午。也就是我们平时说的上午(AM),下午(PM)这个又应该怎么写呢? 也就是说是这样的效果,上面的代码实现后时间的后面,星期的前面显示 AM 或者 PM, 举个例子: 2012年3月25日 22:50:50 PM 星期五 那个PM怎么显示出来,我知道要判断是否是大于12,但又要定义变量?请  p2227 再次赐教,感激不尽。
      

  7.   

    脚本 放 body 下面,或者在onload 中调用
      

  8.   


    赐教。
    如果我要判断当前小时是否大于12,如果大于12则为下午,否则为上午。也就是我们平时说的上午(AM),下午(PM)这个又应该怎么写呢?  也就是说是这样的效果,上面的代码实现后时间的后面,星期的前面显示 AM 或者 PM,  举个例子: 2012年3月25日 22:50:50 PM 星期五  那个PM怎么显示出来,我知道要判断是否是大于12,但又要定义变量?