JS怎麼做簡單的年曆實例詳解-js教程-PHP中文網

首頁

web前端

js教程

JS怎麼做簡單的年曆實例詳解

怪我咯

Jun 29, 2017 am 10:41 AM

javascript實例

這篇文章主要介紹了js製作簡易年曆的方法,包括實現的思路以及js、css與html各個部分的實現技巧,需要的朋友可以參考下

本文實例講述了js製作簡易年曆的方法。分享給大家供大家參考。具體如下：

今天學習了一下用js來實現年曆的製作，順便複習了一下this的用法，跟選項卡的製作有點差別，新用到了innerHTML，希望自己堅持下去，各位js大神也多多指點。

innerHtml的用法

現在用top.innerHTML="..........";的方法就可以向這個id的位置寫入HTML程式碼了。

例如top.innerHTML="";就可以在top對應的位置出現一個button了！

程式實作想法：

1. 類似選項卡，只是底部有一個p;

2. innerHTML的使用

3.陣列的使用

① 定義：arr[0,1,2,3]

② 使用：arr[0]

4.字符串連接

① 作用：連接兩個字串 “+”

② 問題：連接中的優先權用（）解決

實現原始碼：

JavaScript：

程式碼如下:

<script type="text/javascript">  
    window.onload=function()  
    {  
        var arr=[  
                 &#39;快过年了，大家一起去放鞭炮咯！&#39;,  
                  &#39;马上上学了，不开心！&#39;,  
                   &#39;妇女节快乐！&#39;,  
                   &#39;很平淡的四月&#39;,  
                   &#39;劳动光荣！&#39;,  
                   &#39;儿童节快乐！&#39;,  
                   &#39;好热的七月!&#39;,  
                   &#39;八一建军节!&#39;,  
                   &#39;又开学了哎！&#39;  
        ];  
        var op=document.getElementById(&#39;tab&#39;);  
        var oLi=op.
getElementsByTagName
(&#39;li&#39;);  
        var oTxt=op.getElementsByTagName(&#39;p&#39;)[0];  
        var i=0;  
        for(var i=0;i<oLi.length;i++)  
        {  
            oLi[i].index=i;  
            oLi[i].onmouseover=function ()  
            {  
                 for(var i=0;i<oLi.length;i++)  
                 {  
                   
                    oLi[i].className=&#39;&#39;;  
                   
                 }  
              
                this.className=&#39;active&#39;;  
                oTxt.innerHTML=&#39;<h2 id="this-index-月活动">&#39;+(this.index+1)+&#39;月活动</h2><p>&#39;+arr[this.index]+&#39;</p>&#39;;  
            };  
          
        }  
      
    };  
</script>

CSS：

程式碼如下：

################### ##

<style type="text/css">  
* { padding: 0;margin: 0; }  
  
li { list-style: none; }  
  
body { background: #f6f9fc; 
font-family
: arial; }  
  
.calendar { width: 210px;  
            margin: 50px auto 0;   
            padding: 10px 10px 20px 20px;   
            background: #eae9e9; }  
              
.calendar ul { width: 210px;   
               overflow: hidden;   
               
padding-bottom
: 10px; }  
                 
.calendar li { float: left;  
               width: 58px;   
               height: 54px;   
               margin: 10px 10px 0 0;   
               border: 1px solid #fff;   
               background: #424242;  
               color: #fff;   
               text-align: center;   
               cursor: pointer; }  
                 
.calendar li h2 { font-size: 20px; padding-top: 5px; }  
  
.calendar li p { font-size: 14px; }  
  
.calendar .active { border: 1px solid #424242;  
                    background: #fff;  
                    color: #e84a7e; }  
                      
.calendar .active h2 { }  
  
.calendar .active p { font-weight: bold; }  
  
.calendar .text { width: 178px;   
                  padding: 0 10px 10px;  
                  border: 1px solid #fff;   
                  padding-top: 10px;   
                  background: #f1f1f1;   
                  color: #555; }  
                    
.calendar .text h2 {font-size: 14px; 
margin-bottom
: 10px; }  
  
.calendar .text p { font-size: 12px; 
line-height
: 18px; }  
</style>

###HTML：######### 程式碼如下:##########

<body>  
<p id="tab" class="calendar">  
    <ul>  
        <li class="active"><h2 id="">1</h2><p>一月</p></li>  
        <li><h2 id="">2</h2><p>二月</p></li>  
        <li><h2 id="">3</h2><p>三月</p></li>  
        <li><h2 id="">4</h2><p>四月</p></li>  
        <li><h2 id="">5</h2><p>五月</p></li>  
        <li><h2 id="">6</h2><p>六月</p></li>  
        <li><h2 id="">7</h2><p>七月</p></li>  
        <li><h2 id="">8</h2><p>八月</p></li>  
        <li><h2 id="">9</h2><p>九月</p></li>  
        <li><h2 id="">10</h2><p>十月</p></li>  
        <li><h2 id="">11</h2><p>十一月</p></li>  
        <li><h2 id="">12</h2><p>十二月</p></li>  
    </ul>  
    <p class="text">  
    </p>  
          
</p>  
</body>

######效果圖如下：########## #####

以上是JS怎麼做簡單的年曆實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr