学习笔记之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{
        50px;
        height:35px;
        border:1px solid #FFFFFF;
        text-align:center;
        vertical-align:middle;
        line-height:35px;
        background-color:#66FFFF;
        }
    .b11{
        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{
        150px;   
        height:50px;
        border:1px solid #0FF;
        text-align:center;
        vertical-align:middle;
        line-height:50px;
        
        }
    .c2{
        150px;
        height:50px;                         /*设置宽，高，边框，行居中，列居中，行高；*/
        /*border:1px solid #0FF;
        text-align:center;
        vertical-align:middle;
        line-height:50px;
        border-top-0px;/*取消上边框就可以使边框整体看起来只有一条线啦*/
        /*//display:none;*/  /*一上来就是隐藏状态，直到点击时为止*/
        /*}
    #c1,.c2:hover{
        cursor:pointer;}*/  /*逗号是并的意思，别忘啦。鼠标变小手状，下面是移动到时变背景色*/
    /*.c2:hover{
        background-color:#FFC;}

body中：

<div style="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; }