JavaScript簡單的日曆效果程式碼例項

admin發表於2017-04-16
JavaScript

分享一段程式碼例項，它實現了簡單的日曆效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.box {
  width: 150px;
  height: 180px;
  background-color: #369;
  margin: 100px auto;
  text-align: center;
}
.box p {
  text-align: center;
  line-height: 60px;
  font-size: 12px;
  color: #fff;
}
.box span {
  display: block;
  width: 75px;
  height: 75px;
  margin: 0 auto;
  font-size: 50px;
  color: #000;
  background-color: yellowgreen;
  line-height: 75px;
}
</style>
<script>
window.onload =function(){
  var date = new Date();
  var box = document.getElementById("box");
  var dd = box.children;
  var arr=["星期天","星期一","星期二","星期三","星期四","星期五","星期六",];
  dd[0].innerHTML = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+arr[date.getDay()];
  dd[1].innerHTML = date.getDate() ;
}
</script>
</head>
<body>
<h1 class="box" id="box">
  <p></p>
  <span></span>
</h1>
</body>
</html>

上面的程式碼實現了我們的要求，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.Date參閱JavaScript Date物件一章節。

（2）.document.getElementById()參閱document.getElementById()一章節。

（3）.children參閱javascript children一章節。

（4）.innerHTML參閱innerHTML一章節。

相關文章