當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）
生活随笔
收集整理的這篇文章主要介紹了
JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
運用JS的innerHTML，和for循環實現日歷小部件內容和日期的轉換。
?
?
<!DOCTYPE html> <html> <head><title>日歷小部件</title><style type="text/css">*{padding: 0;margin:0;}.tab{width:220px;background: #ccc;height: 400px;margin: 0 auto;padding: 10px;}ul{width:200px;margin: 0 auto;}li{color:#fff;list-style:none;width:50px;height:50px;float: left;background: #444;text-align: center;padding: }.active{background: #fff;color: #f00;}</style><script type="text/javascript">var aDatas=['January快過年了，準備搶票嘍！','February','March','April','May','June','July','Aguest','September','October','Novermber','December']//用數組存儲日歷備忘錄的內容window.onload=function(){var aLi=document.getElementsByTagName('li');var oTxt=document.getElementsByClassName('text')[0];for(var i=0;i<aLi.length;i++){aLi[i].index=i; //記錄當前li的索引值，并賦值給iaLi[i].onmouseover=function(){for(var i=0;i<aLi.length;i++){aLi[i].className=""; //鼠標滑過，是li的class為空 }this.className="active"; //并定義當前li的class為activeoTxt.innerHTML='<h2>'+(this.index+1)+'月活動</h2><p>'+aDatas[this.index]+'</p>'; //給當前的內容標題獲取當前“index+1”值};}}</script> </head> <body><div class="tab"> <ul id="clander"><li class="active"><h2>1</h2></li><li><h2>2</h2></li><li><h2>3</h2></li><li><h2>4</h2></li><li><h2>5</h2></li><li><h2>6</h2></li><li><h2>7</h2></li><li><h2>8</h2></li><li><h2>9</h2></li><li><h2>10</h2></li><li><h2>11</h2></li><li><h2>12</h2></li><div style="clear: both;"></div> </ul> <div class="text"><h2>1月活動</h2><p>快過年了，準備搶票嘍！</p> </div> </div> </body> </html>
2.利用JS的getHours（）和 getMinutes（）和getSeconds（）獲取當前的日期
<!DOCTYPE html> <html> <head><title>數碼時鐘</title> </head> <style type="text/css">*{margin:0;padding: 0;}.alarm{width:500px;margin:0 auto;padding:10px;background: url(images/bg.png)top center no-repeat;height: 600px;color:#fff;font-size: 50px;} </style> <script type="text/javascript">function toDouble(num){if(num<10){return "0"+num;}else{return ''+num;}}window.onload=function(){// var oBtn=document.getElementById('btn');var aImg=document.getElementsByTagName('img');function updateTime(){var oDate=new Date();// var arr=['2','1','3','1','5','3'];var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());//alert(str);for(var i=0;i<aImg.length;i++){aImg[i].src='images/'+str.charAt(i)+'.png';//charAt() 方法可返回指定位置的字符。}}setInterval(updateTime,1000);updateTime();};</script> <body> <div class="alarm"><!-- <input id="btn" type="button" value="更新時間"> --><div class="time"><img src="images/0.png"><img src="images/0.png">點<img src="images/0.png"><img src="images/0.png">分<img src="images/0.png"><img src="images/0.png">秒</div> </div> </body> </html>?
轉載于:https://www.cnblogs.com/cheryshi/p/8417346.html
總結
以上是生活随笔為你收集整理的JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 尤其的近义词
- 下一篇： Springboot 项目启动后执行某些