js大雜燴

時間 2019-11-15
原文原文鏈接
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #card{
            width: 300px;
            height: 200px;
        }
        #tit{
            width: 100%;
            height: 13px;
            line-height: 25px;
        }
        #tit h3{
            margin: 0px;
            padding: 0px;
            width: 80px;
            background: #cccccc;
            float: left;
            line-height: 25px;
            text-align: center;
            border: 2px solid white;
            font-size: 12px;
            color: white;
        }
        #content{
            width: 100%;
            height: 175px;
            background: #888;
            color: white;
        }
        #content div{
            display: none;
        }
        #content .one{
            display: block;
        }
        #tit .titin{
            border: 2px solid #888;
            background: #888;
        }
    </style>
</head>
<body>
<a id="alink" href="http://www.baidu.com" target="_blank" title="this is test"><b>test</b></a><br>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>
    <script>
        for(var i=1;i<=9;i++){
            for(var j=1;j<=i;j++){
                document.write(j+"x"+i+"="+(j*i)+"&nbsp;&nbsp;&nbsp");
            }
            document.write("<br>");
        }
        document.write("---------------------------------------------------------------------------------------------------<br>")
        for(var i=9;i>=1;i--){
            for(var j=1;j<=i;j++){
                document.write(j+"x"+i+"="+(j*i)+"&nbsp;&nbsp;&nbsp");
            }
            document.write("<br>");
        }
        document.write("---------------------------------------------------------------------------------------------------<br>")
        document.write('<table border="1" width="800" >');
            var i=0;
            while(i<1000){
                if(i%10==0)
                {
                    if(i%20==0)
                        bg="#CCCCCCCC";
                        else
 bg="#FFFFFFFF";

                    document.write('<tr onMouseOver="show(this)" onMouseOut="noShow(this)" bgColor="'+bg+'">')
                }

                document.write('<td>'+i+'</td>');
                i++

                if(i%10==0)
                    document.write('</tr>')
            }
        document.write('</table>')
        var ys=null
        function show(obj){
            ys=obj.bgColor;
            obj.bgColor="red";
        }
        function noShow(obj){
            obj.bgColor=ys;
        }
        document.write("-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>")
        table(8,8);
        table(5,3);
        function table(row,col) {
            document.write('<table border="1" width="800">');
            for (var i = 0; i < row; i++) {
                if (i % 2 == 0)
                    bg = "red";
                else
 bg = "";
                document.write('<tr bgColor="' + bg + '">');
                for (var j = 0; j < col; j++)
                    document.write('<td>' + (i * col + j) + '</td>')
                document.write('</tr>')
            }
            document.write('</table>')
        }
 function demo(start,end,check){
            for(var i=start;i<end;i++){
                if(check(i)){
                    document.write(i+"<br>");
                }
            }
        }
        demo(10,500,function(num){
            if(num%3==0){
                return true;
            }else{
                return false;
            }
        })
        document.write("-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>")
        var str="%u5F53%u4ECA%u65F6%u4EE3%u65F6%u95F4%u6BB5%u4E0A%u8BFE%u89C9%u5F97%u4E0A%u8BFE%u5C31%u662F%u89C9%u5F97%u65F6%u95F4%u5927%u5BB6%u65F6%u95F4%u4F46%u662F%u70B9%u51FB%u4E0A%u520A%u767B%u59D0%u59D0%u6211i%u5927%u59D0%u5927%u5BB6%u70B9%u51FB%u51E0%u70B9%u7761%u80AF%u5FB7%u57FA%u53E6%u5916i%u7684dmfkl%25%24%23HBJDBJDn%u6211%u7684%u7834%u5730%u65B9%uFF1B%u5206%u997F%u54" +
                "E6%u8BC4%u5206%u5BA2%u670D%u7F34%u8D39%u91D1%u989D%u4E30%u5BCC%u59DC%u6069%u83F2 ";
//        alert(str);
 document.write(unescape(str));

        document.write("-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>")

        var dt=new Date();

        var st="今天是: ";
        st+=dt.getYear()+"年";
        st+=(dt.getMonth()+1)+"月"
 st+=dt.getDate()+"日 ";
        st+=dt.getHours()+":";
        st+=dt.getMinutes()+":";
        st+=dt.getSeconds()+" ";

        switch (dt.getDay()){
            case 0:
                st+="Sunday ";
                break;
            case 1:
                st+="Monday";
                break;
            case 2:
                st+="Tuesday";
                break;
            case 3:
                st+="Wednesday ";
                break;
            case 4:
                st+="Thursday ";
                break;
            case 5:
                st+="Friday ";
                break;
            case 6:
                st+="Saturday ";
                break;
        }
        document.write(st);
        document.write("-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>")

        var p={name:"zhangSan",age:18,sex:"man"};
//        alert(p.name)
//        alert(p["name"])

 document.write("-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>")

        var rows=20;//行數
 var cols=20;//列數

 var w=15;//寬
 var h=15;//高
        //聲明一個數組
 var map=new Array();

        for(i=0;i<rows;i++){
            //數組map中分別聲明數組
 map[i]=new Array();
            for(var j=0;j<cols;j++){
                map[i][j]=0;//二維數組中的每一個元素爲0
 }
        }

        map[Math.floor(Math.random()*rows)][Math.floor(Math.random()*cols)]=1;
        map[Math.floor(Math.random()*rows)][Math.floor(Math.random()*cols)]=2;

        for(var i=0;i<rows;i++){
            for(var j=0;j<cols;j++) {
                if(map[i][j]==1)
                    var bg="red";
                else if(map[i][j]==2)
                    var bg="blue";
                else
                    var bg="yellow";
                document.write('<div style="position: absolute;top: ' + (100 + h * i) + 'px;left: ' + (800 + w * j) + 'px;width: ' + w + 'px;height: ' + h + 'px;overflow: hidden;background: '+bg+';border:1px solid white"></div>');
                }
            }
        document.write("-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>")
        var aobj=document.getElementById("alink");
        aobj.href="http://www.sina.com";
        aobj.target="_self";
        aobj.title="demo demo demo";

        aobj.className="test";
        aobj.className+="demo";
        aobj.className="";

        document.write("-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>")

        document.write("<ul>");
        for(var i=0;i<20;i++) {
            document.write("<li>");
            document.write('<input type="checkbox" name="ids[]" value="'+i+'">aaaaaaa')
            document.write("</li>");
        }
        document.write("</ul>");
    </script>
<a href="javascript:sall()">全選</a>
<a href="javascript:fall()">反選</a>
<a href="javascript:nall()">全不選</a>
<!--<a href="javascript:sall()">刪除</a>-->

<label for="ss"><input id="ss" type="checkbox" onclick="newsall(this)">全選</label>

<script>
    var cnames=document.getElementsByName("ids[]");
//    alert(cnames[5].checked=true);
 function sall(){//全選
 for(var i=0;i<cnames.length;i++){
            cnames[i].checked=true;
        }
    }

    function fall(){//全不選
 for(var i=0;i<cnames.length;i++){
            if(cnames[i].checked){
                cnames[i].checked=false;
            }else{
                cnames[i].checked=true;
            }
        }
    }

    function nall(){//反選
 for(var i=0;i<cnames.length;i++){
            cnames[i].checked=false;
        }
    }

    function newsall(obj){//全選（新）
 for(var i=0;i<cnames.length;i++){
            cnames[i].checked=obj.checked;
        }
    }
</script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>
<form name="frm1">
    <input type="text" name="username" value="zhangSan">
</form>

<form name="frm2">
    <input type="text" name="username" value="liSi">
</form>

<form name="frm3">
    <input type="text" name="username" value="admin">
</form>

<script>
//    var names=document.getElementsByName("username")[0];
 alert(document.forms[1].username.value);
    alert(document.forms["frm2"].username.value);
    alert(document.forms.item(1).username.value);
    alert(document.forms.item("frm2").username.value);
    alert(document.forms.frm2.username.value);
    alert(document.frm2.username.value);
    alert(document["frm2"].username.value);
//    alert(names.value);
</script>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>
<div id="card">
    <div id="tit">
        <h3 onmouseover="show(0)" class="titin">第一項</h3>
        <h3 onmouseover="show(1)">第二項</h3>
        <h3 onmouseover="show(2)">第三項</h3>
    </div>
    <div id="content">
        <div class="one">
            <ul>
                <li>aaaaaaaaaaaa</li>
            </ul>
        </div>

        <div>
            <ul>
                <li>bbbbbbbbbbbbb</li>
                <li>bbbbbbbbbbbbb</li>
            </ul>
        </div>

        <div>
            <ul>
                <li>cccccccccccc</li>
                <li>cccccccccccc</li>
            </ul>
        </div>
    </div>
</div>

<script>
    var h3os=document.getElementsByTagName("h3");
    var cdivs=document.getElementById("content").getElementsByTagName("div");
    function show(num){
        for(var i=0;i<h3os.length;i++){
            if(i==num){
                h3os[num].className="titin";
                cdivs[num].style.display="block";
            }else{
                h3os[i].className="";
                cdivs[i].style.display="none";
            }
        }
//        alert(num);
 }
//    alert(document.scripts.length)
</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。