正文
js串讲回顾
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
注：1.xx.nextSibling.css.xxx->xx的下一个元素的css样式;2. window.opener.document.getElementById("cms");->找到父级窗口中id为cms的元素
1.QQ面板效果:
<title>无标题文档</title><style type="text/css">.a1{ background:#003; padding:3px; font-size:18px; color:#FFF; text-align:center; margin-top:1px }.b1{ height:150px; background:#CC9; display:none;}#wai{ width:200px;border:1px solid #000}</style></head><body><div id="wai"><div class="a1">我的好友</div><div class="b1"></div><!--a1和a2必须紧挨,不然方法里面nextSibling没有效果--><div class="a1">黑名单</div><div class="b1"></div><div class="a1">最近联系</div><div class="b1"></div></div></body><script type="text/javascript">var a1 = document.getElementsByClassName("a1");for(var i=0;i<a1.length;i++) //给ClassName为a1的加上点击事件{ a1[i].setAttribute("onclick","show(this)");}function show(xx){ var b1 = document.getElementsByClassName("b1"); for(var i=0;i<b1.length;i++) //设置所有ClassName为b1的display为隐藏 { b1[i].style.display="none"; } //让xx的下个元素显示 xx.nextSibling.style.display="block";//nextSibling获取xx的下一个元素,两个元素必须紧挨,不能有空格、回车或别的字符串}</script>
2.彩票36选7
<style type="text/css">.bbb{ width:60px; height:60px; font-size:28px; font-weight:bold; font-style:oblique; margin:5px}#ss{ font-size:20px;}.ccc{ position:absolute;width:80px; height:40px; font-size:18px; font-weight:bold; font-style:oblique;}</style></head><body><form><div id="di"></div><br /><font id="ss">您选中的号码有:</font><span id="w"></span><br /><span><input type="reset" value="重置" class="ccc" onclick="cz(this)"/></span></form></body><script type="text/javascript">for(var i=1;i<=36;i++) //循环出所有按钮{ var s = "<input type='button' class='bbb' value='"+i+"' onclick='dd(this)' />";//给input加上click事件,用于disabled的取消和设置 var di = document.getElementById("di"); di.innerHTML += s;}var count=0;function dd(bt){ count++; if(count>7) //如果数字多于7个,return { return; } else { var v = bt.value; //循坏遍历出显示数字的span var span = "<span clsaa='spa' style='font-size:20px;color:red; margin-right:10px' onclick='qux(this)'>"+v+"</span>"; var ww = document.getElementById("w"); ww.innerHTML += span; bt.setAttribute("disabled","disabled"); }}function qux(sp) //点击数字取消后,按钮的disabled也要消除{ sp.remove(); var s = sp.innerHTML; var btn1 = document.getElementsByClassName("bbb"); for(var i=0;i<btn1.length;i++) { if(s == btn1[i].value) { btn1[i].removeAttribute("disabled"); break; } } count--;}function cz(rt){ var s = document.getElementById("w"); s.innerHTML=""; var bt = document.getElementsByClassName("bbb"); for(var i=0;i<bt.length;i++) { if( bt[i].getAttribute("disabled")) { bt[i].removeAttribute("disabled"); } } window.location.href="g1.html";//bug->设置重置按钮的话，全部清空后, 不刷新页面不能再点击,}</script></html>
3.在线时钟
<body><div id="sj" style=" font-size:30px; color:#006; font-weight:bold"></div></body><script type="text/javascript">function show(){ var d = new Date(); //var h = d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();//方法一 var h = d.getHours()+":"; //方法二 h += d.getMinutes()+":"; //方法二 h += d.getSeconds(); //方法二 document.getElementById("sj").innerHTML = h; window.setTimeout("show()",1000);//多长时间调一次函数方法,递归}window.setTimeout("show()",500);//要多长时间显示在页面</script>
4.博客输入字符,下边显示剩余字符
<body><textarea cols="40" rows="6" onkeyup="up()" id="t"></textarea><br /><span>您还可以输入<span id="sp">140</span>个字</span></body><script type="text/javascript">function up() //onkeyup{ var t = document.getElementById("t").value.length; //取到textarea里面的value的长度 document.getElementById("sp").innerHTML=140-t; //每敲下键盘就执行一次代码,算出来的数字就往id为sp的span里面扔一次}</script>
5.登录框光标移开value值改变
<form>用户名:<input type="text" id="uid" value="必填" style="color:#999" /><br />密码:<input type="password" id="pwd" /></form></body><script type="text/javascript">uid.setAttribute("onfocus","bt(this)");uid.setAttribute("onblur","bl(this)");function bt(txt){ if(txt.value !="必填" && txt.style.color !="#999") { } else { txt.value=""; txt.style.color="#000"; }}function bl(txt){ if(txt.value.length==0) { txt.value="必填"; txt.style.color="#999"; }}</script>
6.翻牌效果:
<style type="text/css">.c{ width:100px; height:100px; border:2px solid #666; float:left; margin:3px; background:#CCF;}.d{ width:100px; height:100px; border:2px solid #666; float:left; margin:3px; background:yellow}</style></head><body><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div></body><script type="text/javascript">function bbb(fs){ fs.style.background="red";}function eee(move){ move.style.background="#CCF";}var cc = document.getElementsByClassName("c");for(var i=0;i<cc.length;i++){ cc[i].setAttribute("onmouseover","bbb(this)"); cc[i].setAttribute("onmouseout","eee(this)");}</script>
