JavaScript簡(jiǎn)易日歷

HTML部分

<div id="tab" class="calendar">  
    <ul>  
        <li class="active"><h2>1</h2><p>一月</p></li>  
        <li><h2>2</h2><p>二月</p></li>  
        <li><h2>3</h2><p>三月</p></li>  
        <li><h2>4</h2><p>四月</p></li>  
        <li><h2>5</h2><p>五月</p></li>  
        <li><h2>6</h2><p>六月</p></li>  
        <li><h2>7</h2><p>七月</p></li>  
        <li><h2>8</h2><p>八月</p></li>  
        <li><h2>9</h2><p>九月</p></li>  
        <li><h2>10</h2><p>十月</p></li>  
        <li><h2>11</h2><p>十一月</p></li>  
        <li><h2>12</h2><p>十二月</p></li>  
    </ul>  
    <div class="text">
        <h2>1月份安排</h2>
        <p>快過(guò)年了梳毙,大家可以商量著去哪玩吧~</p>
    </div>   
</div>  

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; } 

JavaScript部分

window.onload=function(){
var aDatas=[
  "快過(guò)年了哺窄,大家可以商量著去哪玩吧~",
  "精通JavaScript開(kāi)發(fā)課程 - 結(jié)課標(biāo)準(zhǔn) - 有十條標(biāo)準(zhǔn)可讓大家修練成JS高手……",
  "HTML5開(kāi)發(fā)課程,讓你熟練掌握移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)",
  "精通各種DOM類應(yīng)用,熟練掌握面向?qū)ο缶幊趟枷耄∣OP)萌业、熟悉JS面向?qū)ο箝_(kāi)發(fā)方式 - 智能課堂 - www.zhinengshe.com",
  "熟練掌握AJAX技術(shù)及相關(guān)應(yīng)用(例如:新浪微博級(jí)應(yīng)用) - 智能課堂 - www.zhinengshe.com",
  "可以獨(dú)立寫(xiě)出類似jQuery的小型庫(kù)(支持各類選擇符坷襟、事件類、DOM生年、自定義動(dòng)畫(huà)animate婴程、AJAX……) - 智能課堂 - www.zhinengshe.com",
  "精通JS運(yùn)動(dòng)特效技術(shù),能完整實(shí)現(xiàn)各類網(wǎng)站所有動(dòng)畫(huà)特效抱婉,如 智能課堂 官網(wǎng) - 智能課堂 - www.zhinengshe.com",
  "掌握J(rèn)S調(diào)試及優(yōu)化技術(shù)档叔、能兼容所有瀏覽器 - 智能課堂 - www.zhinengshe.com",
  "精通JS事件對(duì)象及事件的工作機(jī)制,并能完成各類跨平臺(tái)應(yīng)用模塊的開(kāi)發(fā) - 智能課堂 - www.zhinengshe.com",
  "能獨(dú)立開(kāi)發(fā)表現(xiàn)和性能都很優(yōu)秀的RIA應(yīng)用 - 智能課堂 - www.zhinengshe.com",
  "了解后臺(tái)編程的相關(guān)知識(shí)蒸绩,能夠和后臺(tái)工程師配合完成大型交互應(yīng)用 - 智能課堂 - www.zhinengshe.com",
  "熟悉正則表達(dá)式的編寫(xiě)衙四、應(yīng)用及高級(jí)表單驗(yàn)證技術(shù) - 智能課堂 - www.zhinengshe.com"
];
var oDiv = document.getElementById('tab');
var aLi = oDiv.getElementsByTagName('li');
var oTxt = oDiv.getElementsByTagName('div')[0];

for(var i=0; i<aLi.length; i++){
    aLi[i].index = i;
    aLi[i].onmouseover=function (){
        for(var j=0; j<aLi.length; j++){
            aLi[j].className = '';
        }
        this.className = 'active';

        oTxt.innerHTML = '<h2>'+ (this.index + 1) +'月份安排</h2><p>'+ aDatas[this.index]+'</p>';
    };
}

};
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市侵贵,隨后出現(xiàn)的幾起案子届搁,更是在濱河造成了極大的恐慌缘薛,老刑警劉巖窍育,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異宴胧,居然都是意外死亡漱抓,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門(mén)恕齐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)乞娄,“玉大人,你說(shuō)我怎么就攤上這事显歧∫腔颍” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵士骤,是天一觀的道長(zhǎng)范删。 經(jīng)常有香客問(wèn)我,道長(zhǎng)拷肌,這世上最難降的妖魔是什么到旦? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮巨缘,結(jié)果婚禮上添忘,老公的妹妹穿的比我還像新娘。我一直安慰自己若锁,他們只是感情好搁骑,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般靶病。 火紅的嫁衣襯著肌膚如雪会通。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,764評(píng)論 1 290
  • 那天娄周,我揣著相機(jī)與錄音涕侈,去河邊找鬼。 笑死煤辨,一個(gè)胖子當(dāng)著我的面吹牛裳涛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播众辨,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼端三,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了鹃彻?” 一聲冷哼從身側(cè)響起郊闯,我...
    開(kāi)封第一講書(shū)人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蛛株,沒(méi)想到半個(gè)月后团赁,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谨履,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年欢摄,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片笋粟。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡怀挠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出害捕,到底是詐尸還是另有隱情绿淋,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布尝盼,位于F島的核電站吞滞,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏东涡。R本人自食惡果不足惜冯吓,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望疮跑。 院中可真熱鬧组贺,春花似錦、人聲如沸祖娘。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至掀潮,卻和暖如春菇夸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背仪吧。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工庄新, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人薯鼠。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓择诈,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親出皇。 傳聞我的和親對(duì)象是個(gè)殘疾皇子羞芍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容