學習筆記之HTML（十秒倒計時；列表收起、展開；下拉列表；

十秒倒計時題：
整體思路：現將10與按鈕在body中做出來，然后再在script中寫函數。可以用間隔或者延遲，但聽老師說一般使用間隔的多。
寫上延遲的代碼（引用下面的函數），然后寫一個函數，先將之前的10和按鈕用獲取元素ID獲取出來，然后再來一個if，else，使如果10變為0就移除按鈕的不可用屬性，其他則1、再次引用延遲，2、把10的ID取整每次-1定義，3、再將每次取整的值賦給定義的數，以此循環

<span id="c">10</span>
<input type="button" value="ok" disabled="disabled" id="anniu">-

<script type="text/javascript">
window.setTimeout("Ab()",1000);
//如果用setIntval（間隔），下面else中的window.setTimeout("Ab()",1000);全部刪去就行
function Ab()
{
    var ci=document.getElementById("c");
    var an=document.getElementById("anniu");
    if(parseInt(ci.innerHTML)==0)
        {
        an.removeAttribute("disabled");
        }
    else
        {
        window.setTimeout("Ab()",1000);
        var b=parseInt(ci.innerHTML)-1;
        ci.innerHTML=b;
        }
}

列表（點擊展開，點擊收起）：

style：

*{margin:0px auto; padding:0px;}
    .b1{
        width:50px;
        height:35px;
        border:1px solid #FFFFFF;
        text-align:center;
        vertical-align:middle;
        line-height:35px;
        background-color:#66FFFF;
        }
    .b11{
        width:50px;
        height:35px;
        border:1px solid #FFFFFF;
        text-align:center;
        vertical-align:middle;
        line-height:35px;
        background-color:#FFFF00;
        }
    #b2{display:none;}
    #b3{display:none;}
    #b4{display:none;}
    #b5{display:none;}

body

<div class="b1" onclick="Xl('b2')">美麗的</div>
　　<div id="b2">
    <div class="b11">簡單</div>
    <div class="b11">簡單</div>
    <div class="b11">簡單</div>
    </div>
<div class="b1" onclick="Xl('b3')">美麗的</div>
　　<div id="b3">
    <div class="b11">大方</div>
    <div class="b11">大方</div>
    <div class="b11">大方</div>
    </div>
<div class="b1" onclick="Xl('b4')">美麗的</div>
　　<div id="b4">
    <div class="b11">的</div>
    <div class="b11">的</div>
    <div class="b11">的</div>
    </div>
<div class="b1" onclick="Xl('b5')">美麗的</div>
　　<div id="b5">
    <div class="b11">u</div>
    <div class="b11">u</div>
    <div class="b11">u</div>
</div>

script中

思路：一、先寫div，1、外層的div及內容寫出來，2、第二層的div及內容。注意第二層的所有內容應當嵌套在一個div中，便於之后的點擊函數操作。二，再把第一二層的div樣式寫好，三在第一層的div那寫一個點擊事件連接到第二層那個嵌套的div的ID上，四在函數里，先用ID的方式獲取元素，如果點擊時獲取到的元素樣式是顯示的，就運行不顯示，反之運行顯示。

function Xl(a)
 {
     var a=document.getElementById(a);
    if(a.style.display=="block")
    {
        a.style.display="none";
    }
    else
    {
        a.style.display="block";
    } 
     
 }

用div做下拉列表框：

style中的樣式：

c1{
        width:150px;   
        height:50px;
        border:1px solid #0FF;
        text-align:center;
        vertical-align:middle;
        line-height:50px;
        
        }
    .c2{
        width:150px;
        height:50px;                         /*設置寬，高，邊框，行居中，列居中，行高；*/
        /*border:1px solid #0FF;
        text-align:center;
        vertical-align:middle;
        line-height:50px;
        border-top-width:0px;/*取消上邊框就可以使邊框整體看起來只有一條線啦*/
        /*//display:none;*/  /*一上來就是隱藏狀態，直到點擊時為止*/
        /*}
    #c1,.c2:hover{
        cursor:pointer;}*/  /*逗號是並的意思，別忘啦。鼠標變小手狀，下面是移動到時變背景色*/
    /*.c2:hover{
        background-color:#FFC;}

body中：

<div style="width:150px; height:350px;">
    <div id="c1" onclick="Xz('c2')">請選擇山東地市</div>
    <div class="c2" onclick="We(this)">濟南</div>
    <div class="c2" onclick="We(this)">青島</div>
    <div class="c2" onclick="We(this)">淄博</div>
    <div class="c2" onclick="We(this)">煙台</div>
    <div class="c2" onclick="We(this)">濰坊</div>
</div>

script:

function Xz(a)
    {
        var c2=document.getElementsByClassName("c2");//先定義
        for(i=0;i<c2.length;i++)
        {
        c2[i].style.display="block";//c2的某個位置上的元素循環出現
        }
    }
    function We(a)
    {
        c1=document.getElementById("c1");
        c1.innerHTML=a.innerHTML;//，由於上面已經用函數引用過了，用形參來代指哪個下拉列表中的內容；很強勢！
        c2=document.getElementsByClassName("c2");
        for(var i=0;i<c2.length;i++)
        {
            c2[i].style.display="none";//這里的none或block一定要加雙引號！！
            }
    }

 

//一些寫法
select {
  /*Chrome和Firefox里面的邊框是不一樣的，所以復寫了一下*/
  border: solid 1px #000;

  /*很關鍵：將默認的select選擇框樣式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在選擇框的最右側中間顯示小箭頭圖片*/
  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


  /*為下拉小箭頭留出一點位置，避免被文字覆蓋*/
  padding-right: 14px;
}


/*清除ie的默認選擇框樣式清除，隱藏下拉箭頭*/
select::-ms-expand { display: none; }