美文网首页网页前端后台技巧(CSS+HTML)让前端飞互联网科技
前端学习代码实例-JavaScript实时变化时间日期

前端学习代码实例-JavaScript实时变化时间日期

作者: 560b7bb7b879 | 来源:发表于2019-04-19 23:07 被阅读3次

现在网页都在最大程度的追求人性化,比如一个时间日期比较人性化的设置,能够实时获取当前客户端机器时间日期。

下面是一段这样的实例代码:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端开发学习q群:731771211   详细教程讲解</title>
<script type="text/javascript">
function printTime(){
  var time=new Date();
  var year=time.getFullYear();
  var month=(time.getMonth())+1;
  var daynum=time.getDay();
  var hour=time.getHours();
  var min = time.getMinutes();
  var sec=time.getSeconds();
  var da=time.getDate();
  var daystr;
  switch(daynum){
    case 0: daystr="星期日";
      break;
    case 1: daystr="星期一";
      break;
    case 2: daystr="星期二";
      break;
    case 3: daystr="星期三";
      break;
    case 4: daystr="星期四";
      break;
    case 5: daystr="星期五";
      break;
    case 6: daystr="星期六";
      break;
    default: daystr="";
  }
  var str=year+"年"+month+"月"+da+"日  "+daystr+" "+hour+": "+min+": "+sec;
  timer.innerHTML=str;
  setTimeout(printTime,1000);
}
window.onload=function(){printTime();}
</script>
<body>
<div id="timer"></div>
</body>
</html>


相关文章

网友评论

    本文标题:前端学习代码实例-JavaScript实时变化时间日期

    本文链接:https://www.haomeiwen.com/subject/hiqhgqtx.html