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>

 

 

4.博客输入字符,下边显示剩余字符

复制代码

posted on 2016-12-22 11:49  向前看！明天会更好！  阅读(165)  评论(0)  编辑  收藏  举报