js 簡易日曆的製作（innerHTML）

阿新 • • 發佈：2018-12-19

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <style type="text/css">

         #tab{text-align: center;  //文字居中
            
         }
         .text{
            border: solid 1px black;
            width: 300px;
            height: 100px;
         }

        #oul{width: 300px;height: 500px;
               border:solid 1px black;
               background: grey;
            list-style: none;   //去掉li前面的點 

            margin-left: 40%;
            padding: 0;
            display: flex;  //彈性盒子
            flex-direction: row; //橫向填充
            flex-wrap: wrap;
            
         }
         #oul>li{
            border: solid 1px black;
            width: 90px;
            margin: 2px;
            height: 90px;
            margin-left:4px;
            background: yellowgreen;
            display: inline;
            cursor: pointer;  //滑鼠移動到li上變化 

            }
         #oul>li:hover{
            background-color: #fff;
         }
      </style>
      <script type="text/javascript">

            window.onload=function(){
               var arr=[ '快過年了，去玩吧',
                       '二月不擼',
                     '三月還是不擼'
               ]
               var aul=document.getElementById('oul');
               var ali = aul.getElementsByTagName('li');
               var adv = aul.getElementsByTagName('div')[0];
               for(var i=0;i<ali.length;i++){
                  ali[i].index=i;
                  ali[i].onmouseover=function(){
                  adv.innerHTML='<h2>'+(this.index+1)+'月活動</h2><p>'+arr[this.index]+'</p>';
                  };
               }
            };
      </script>
   </head>
   <body>
      <div id="tab" class="calender">
         <ul id="oul">
            <li class="active"><h2>1</h2><p>JAN</p></li>
            <li><h2>2</h2><p>FEB</p></li>
            <li><h2>3</h2><p>March</p></li>
            <li><h2>4</h2><p>April</p></li>
            <li><h2>5</h2><p>May</p></li>
            <li><h2>6</h2><p>June</p></li>
            <li><h2>7</h2><p>JUly</p></li>
            <li><h2>8</h2><p>August</p></li>
            <li><h2>9</h2><p>September</p></li>
            <li><h2>10</h2><p>October</p></li>
            <li><h2>11</h2><p>November</p></li>
            <li><h2>12</h2><p>December</p></li>
            <div class="text"><h2></h2><p></p>
            </div>
         </ul>

      </div>
   </body>
</html>

js 簡易日曆的製作（innerHTML）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style ty

Unity粒子系統——簡易特效製作（一）

最近公司專案沒有那麼緊，閒暇時間做了幾個特效玩了玩。 1.最基本的火焰特效最終效果如上。首先製作所有特效都需要有一個你希望製作相應特效的貼圖，火焰是可以使用一團火的貼圖，或者煙霧貼圖，下面我們使用的是隨便一個煙霧貼圖，如下有一點要記住哦，背景是要透明的

Unity學習筆記1 簡易2D橫版RPG遊戲製作（一）

這個教程是參考一個YouTube上面的教程做的，原作者的教程做得比較簡單，我先參考著做一遍，畢竟我也只是個初學者，還沒辦法完全自制哈哈。不過我之前也看過一個2D平臺遊戲的系列教程了，以後會整合起來，做出一個類似冒險島那樣的遊戲。原視訊連結：點選開啟連結這是個YouT

Unity學習筆記2 簡易2D橫版RPG遊戲製作（二）

十二、敵人受攻擊時的閃爍和Player的生命值的修正上一篇中，我們利用Controller2D中的IEnumerator TakenDamage介面，使得我們的Player受到攻擊時會進行閃爍，我們同樣地也希望在我們的敵人身上可以實現相同的效果。所以我們現在需要複製Con

js window事件解析（轉載）

slow disable forward 建立多選 1.0 參數小程序距離 js-window對象的方法和屬性資料 hxpd 發表於 2007-05-08 21:58:18 熟練window對象的open、close、alert、confirm、prompt、setT

巧用Notepad++插件：JS代碼格式化（JSToolNpp）

src 按鈕一個 jsf 格式發的 alt manage tro 我在做開發的時候經常會用到Noepad++，這個編輯器使用比較方便，啟動速度夠快，輕便，功能也強大，還有插件也蠻多。我們在寫Js的時候，經常需要格式化Js代碼，這個時候就可以試下這款插件：JsToolN

fastclick.js解決移動端（ipad）點擊事件反應慢問題

javascrip tag 區間 spa doc base blog data- ava 參考http://blog.csdn.net/xjun0812/article/details/64919063 　　　　http://www.jianshu.com/p/16d3e4

JS知識整理隨筆（3）數組

.... nat 一個 .so 項目 stat 分享它的處的創建數組使用Array構造函數語法：new Array() 小括號說明預先知道數組要保存的項目數量向Array構造函數中傳遞數組應包含的項使用數組字面量表示法由一對包含數組項的方括號[]表示，

簡易版爬蟲（豆瓣）

douban spa http sta imp bsp ont color run import requestsimport redef get_douban(): res_str = requests.get("https://movie.douban.com/t

js基本語法總結（一）

向上取整取余轉字符串結果 lin ase 調試錯誤進行 1.js簡介 a）js是一種網頁腳本語言，使得瀏覽器可以與網頁互動。 js的一種基於對象和事件驅動，具有安全性能的腳本語言，腳本語言就是在客戶端的瀏覽器就可以互動響應處理程序的語言，而不需要服務器的處理和響應

node.js初步了解（3）——慕課網（回調，作用域，上下文）

span clas global ava 運行 time log timeout color 1. 1 //回調:回調是異步編程最基本的方法，node.js需要按順序執行異步邏輯的時候，一般采用後續傳遞的方式，將後續邏輯封裝在回調函數中，作為起始函數的參數。 2 //

Node.js ORM框架Sequelize（一）搭建服務

服務 l數據庫數據需要 log alt mysq 執行準備需要準備的環境：node.js mysql 1、在本地創建一個文件夾 2、執行npm init 創建成一個Node包，執行成功後文件夾裏會有一個json文件 3、安裝Sequelize 4、在

JAVAscript學習筆記 js事件第一節（原創）參考js使用表

onchange onf form 看不見鼠標 hello cnblogs html 加載 <!DOCTYPE html> <html lang="en" onUnload="ud()"> <head> <meta ch

JAVAscript學習筆記 js異常第二節（原創）參考js使用表

htm demo cnblogs value demo1 span 自定義 char 按鈕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JS函數學習（2）

有一個關鍵字引入 apply() call() get error 方法 version JavaScript的函數不但是“頭等公民”，而且可以像變量一樣使用，具有非常強大的抽象能力函數體內部的語句在執行時，一旦執行到return時，函數就執行完畢，並將結果返回。

js函數知識點（一）

scrip article 函數返回值解決方案 net 匿名 res 定義一、函數聲明的方式 function 函數名(參數列表){ 函數體; return 返回值} 問題：會被聲明提前給出以下解決方案： var函數名=function (參數列表){ 函數體;

Node.js學習之旅（二）-----MongoDB的安裝與啟動

tar 商業 blank script img blog javascrip ref es2017 安裝與啟動MongoDB Windows 用戶向導：https://docs.mongodb.com/manual/tutorial/install-mongodb-on-

immutable.js 更新數組（mergeDeepWith）

pos ids 改變如果 post imm orm return bubuko 使用情境：　　技術棧為：react + redux + antd (reducer中處理數據使用了immutable.js). 　　問題：如下圖，做一個搜索功能，form表單每改變一次，都會

實現簡易聊天室（一）

ima log body .com 麻煩導入定義右鍵正常預備工作：（1）讀取文件的時候可能會遇到多個文件一起傳，可以用線程池。（2）發送不同類型的請求時，如發送的是聊天信息，發送的是文件，發送的是好友上線請求等，但對於接受者來說都是字節流無法分別，這就需要我們

js常見算法（一）

min replicat subst 解析url class ati ali console maximum 1.每個單詞手字母大寫 var capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char =>

js 簡易日曆的製作（innerHTML）

相關推薦