十秒倒计时题:
整体思路:现将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" οnclick="Xl('b2')">美丽的</div> <div id="b2"> <div class="b11">简单</div> <div class="b11">简单</div> <div class="b11">简单</div> </div> <div class="b1" οnclick="Xl('b3')">美丽的</div> <div id="b3"> <div class="b11">大方</div> <div class="b11">大方</div> <div class="b11">大方</div> </div> <div class="b1" οnclick="Xl('b4')">美丽的</div> <div id="b4"> <div class="b11">的</div> <div class="b11">的</div> <div class="b11">的</div> </div> <div class="b1" οnclick="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" οnclick="Xz('c2')">请选择山东地市</div> <div class="c2" οnclick="We(this)">济南</div> <div class="c2" οnclick="We(this)">青岛</div> <div class="c2" οnclick="We(this)">淄博</div> <div class="c2" οnclick="We(this)">烟台</div> <div class="c2" οnclick="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; }