javascript

http://www.cnblogs.com/wupeiqi/articles/5602773.html

跑马灯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<marquee behavior="" direction="">alex is sb</marquee>-->
    <div id="wel">
        欢迎光临
    </div>

</body>
<script>
    function  test() {
        var mywel = document.getElementById('wel')
        var content = mywel.innerText;

        var f_content = content.charAt(0);
//        返回字符串中的第0个字符
        var l_content = content.substring(1,content.length);

        var new_content = l_content + f_content;
        mywel.innerText = new_content;
        //console.log(new_content)
    }
    setInterval('test();',500)
</script>
</html>

显示时间案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="clock">

    </div>

</body>
<script>
    function clock() {
        var mydate = new Date();
        var myyear = mydate.getFullYear();
        var mymounth = mydate.getMonth() + 1;
        var myday = mydate.getDate();

        var myhour = mydate.getHours()
        var myminutes = mydate.getMinutes();
        var mysec = mydate.getSeconds();

        var res = myyear+'-'+mymounth+'-'+myday+' '+myhour+':'+myminutes+':'+mysec;
        var myclock = document.getElementById('clock');
        myclock.innerText = res;
//        console.log(res)

    }
    setInterval('clock();',1000)
</script>
</html>

 表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<script src="jquery-3.1.1.js"></script>-->
    <title>Title</title>
</head>
<body>
<input type="text" id="username" value="dsad"/>
<input type="button" value="全选" onclick = "selectAll();"/>
<input type="button" value="取消" onclick = "cancelAll();"/>
<input type="button" value="反选" onclick = "ReverseAll();"/>
<table border="1">
    <thead>
    <tr>
        <th>操作</th>
        <th>ip</th>
        <th>端口</th>
    </tr>
    </thead>
    <tbody id="info">
    <tr>
        <td><input type="checkbox" /></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    </tbody>
    <select name="" id="mySel">
        <option value="1">alex</option>
        <option value="2">is</option>
        <option value="3">sb</option>
    </select>
</table>
</body>
    <script>
        function selectAll(){

            //1.得到tbody
            var myTodby = document.getElementById('info');

            //2.找下面的孩子
            var myTrs = myTodby.children;

            for(var i=0; i<myTrs.length;i++){
                var myInput = myTrs[i].children[0].children[0];
                myInput.checked = true;
            }
        }

        function cancelAll(){
             //1.得到tbody
            var myTodby = document.getElementById('info');

            //2.找下面的孩子
            var myTrs = myTodby.children;

            for(var i=0; i<myTrs.length;i++){
                var myInput = myTrs[i].children[0].children[0];
                myInput.checked = false;
            }
        }
        function ReverseAll(){
             //1.得到tbody
            var myTodby = document.getElementById('info');

            //2.找下面的孩子
            var myTrs = myTodby.children;

            for(var i=0; i<myTrs.length;i++){
                var myInput = myTrs[i].children[0].children[0];
//                myInput.checked = false;
                if(myInput.checked){
                     myInput.checked = false;
                }else{
                     myInput.checked = true;
                }
            }
        }
    </script>
</html>

模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>
    <style>
        .one{
            position: fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color: black;
            opacity: 0.6;

        }
        .info{
            width: 400px;
            height:300px;
            position: fixed;
            top:50px;
            left:400px;
            right:400px;
            background-color: white;
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }

    </style>
</head>
<body>
    <div>
        <input type="button" value="点击" onclick = "showModel();"/>
    </div>
    <!--遮罩层-->
    <div class="one hide"></div>

    <div class="info hide">
        <p>
            <input type="text" /><p></p>
            <input type="text" /><p></p>
            <input type="button" value="取消" onclick="hideModel();">
            <input type="button" value="确定">
        </p>
    </div>
</body>
<script>
    function showModel(){
        var myone = document.getElementsByClassName("one")[0];
        var info = document.getElementsByClassName("info")[0];
//        console.log(myone);
        myone.classList.remove('hide');
        info.classList.remove('hide');
    }
    function hideModel(){
        var myone = document.getElementsByClassName("one")[0];
        var info = document.getElementsByClassName("info")[0];

        myone.classList.add('hide');
        info.classList.add('hide');
    }
</script>
</html>

创建节点Attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>
</head>
<body>
    <div id="myinput">

    </div>

</body>
<script>
    var myinput = document.getElementById("myinput");
//    var tag = "<input type='text' />";
//    myinput.insertAdjacentHTML('beforeEnd',tag);
      var myipt  = document.createElement("input"); // <input type="">
      myipt.setAttribute("type","button");
      myipt.setAttribute("value","点击");
        myinput.appendChild(myipt);

</script>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hongpeng0209/p/6423752.html