JS製做日曆小事件和數碼時鐘--JavaScript實例集錦（初學）

時間 2020-05-07

標籤製做日曆小事件數碼時鐘 javascript 實例集錦初學欄目 JavaScript 简体版

原文原文鏈接

運用JS的innerHTML，和for循環實現日曆小部件內容和日期的轉換。javascript

<!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的索引值，並賦值給i aLi[i].onmouseover=function(){ for(var i=0;i<aLi.length;i++){ aLi[i].className=""; //鼠標滑過，是li的class爲空 } this.className="active"; //並定義當前li的class爲active oTxt.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（）獲取當前的日期css

<!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>