JavaScript简单的日历效果代码实例
分类:实例代码
分享一段代码实例,它实现了简单的日历效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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一章节。
JavaScript简单的日历效果代码实例,这样的场景在实际项目中还是用的比较多的,关于JavaScript简单的日历效果代码实例就介绍到这了。
JavaScript简单的日历效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。