先上想要的效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h1></h1>
  <script>
    var h = document.querySelector("h1")
    setInterval(() => {
      var t = new Date().toLocaleString().substring(9, new Date().toLocaleString().length)
      h.innerText = t
    }, 1000);

  </script>
</body>

</html>

效果

在Chrome中完全没毛病，已经实现了。
在这里插入图片描述
But 万恶的ie显示为

问题分析；

上面的原因是：

new Date().toLocaleString()

在Chrome中打印为
在这里插入图片描述
在ie中打印为

打眼一看就发现问题；

趟坑中。。望警戒。。。

上面的问题分析中可以看出两个浏览器打印的结果不同；所以用new Date().toLocaleString().substring(9, new Date().toLocaleString().length)来截取后面的时间可取；由于Chrome打印是24进制，而ie为12进制。
坑一、把当前的小时获取出来进行判断；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h1></h1>
  <script>
    var h = document.querySelector("h1")
    setInterval(() => {
      e = new Date().getHours() || 0;
      var t = ['上午', '下午'][0 | (+e) / 12] + (e > 12 ? e - 12 : e) + new Date().toLocaleString().substr(-6)
      h.innerText = t
    }, 1000);

  </script>
</body>

</html>

在Chrome中完全又没毛病；
在这里插入图片描述
在万恶的ie中；却显示这鸡玩意

又开始在控制器中查找原因：
当代码把var t = ['上午', '下午'][0 | (+e) / 12] + (e > 12 ? e - 12 : e) + new Date().toLocaleString().substr(-6)
改var t = ['上午', '下午'][0 | (+e) / 12] + (e > 12 ? e - 12 : e) + new Date().toLocaleString().substr(-10)
在ie中显示就没毛病了
在这里插入图片描述
然而 chrome中显示为

修改.substr()的属性 Chrome显示这样也在意料之中；But。。
ie中为什么修改是“-10” ？？？？？？？？
我只想截取这一部分（冒号以后的）

又开始寻找中。。。
我数了好几遍是-6-啊没数错。。ie中却是10位；