在页面上能够自动变动的带有星期的时间日期代码

2023-12-04 13:39:44 前端笔记 57

在不少网站页面都有这样的效果，那就是在页面的某一个位置会有一个能够自动变动的时间日期效果。

当然这个功能是否能够给用户起到实际作用不得而知，因为电脑本身就有这样的功能。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<title>实例</title>
<script type="text/javascript">
function time (){
  var now = new Date();
  var yr = now.getFullYear();
  var mName = now.getMonth() + 1;
  var dName = now.getDay() + 1;
  var dayNr = ((now.getDate()<10) ? "0" : "")+ now.getDate();
  var ampm = (now.getHours() >= 12) ? " PM" : " AM"
  var hours = now.getHours();
  hours = ((hours > 12) ? hours - 12 : hours);
  var minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes();
  var seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds();
  if(dName==1) Day = "星期日";
  if(dName==2) Day = "星期一";
  if(dName==3) Day = "星期二";
  if(dName==4) Day = "星期三";
  if(dName==5) Day = "星期四";
  if(dName==6) Day = "星期五";
  if(dName==7) Day = "星期六";
  if(mName==1) Month="1月";
  if(mName==2) Month="2月";
  if(mName==3) Month="3月";
  if(mName==4) Month="4月";
  if(mName==5) Month="5月";
  if(mName==6) Month="6月";
  if(mName==7) Month="7月";
  if(mName==8) Month="8月";
  if(mName==9) Month="9月";
  if(mName==10) Month="10月";
  if(mName==11) Month="11月";
  if(mName==12) Month="12月";
  var DayDateTime=(yr+ "年"+" "+ Month
  + dayNr+ "日"+ Day+ " "
  + hours+ minutes+ seconds+ " "+ ampm);
  document.getElementById ("show").innerText=DayDateTime ;
  timerID=setTimeout("time()",1000);
}
window.onload=function(){
  time()
} 
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>