JS（Blue代码）

其他 2020-04-05 10:06:18 阅读次数: 0

文章目录

1-表格添加、删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function() {
            var oTab = document.getElementById('tab1');
            var oBtn = document.getElementById('btn1');
            var oName = document.getElementById('name');
            var oAge = document.getElementById('age');
           // var id = oTab.t
             var id = oTab.tBodies[0].rows.length+1;

            oBtn.onclick = function() {
                var oTr = document.createElement('tr');

                var oTd = document.createElement('td');
                oTd.innerHTML=id++;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML=oName.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML=oAge.value;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML='<a href="javascript:;">删除</a>';
                oTr.appendChild(oTd);

                oTd.getElementsByTagName('a')[0].onclick = function() {
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                }
                oTab.tBodies[0].appendChild(oTr);
            }
        }
    </script>
</head>
<body>
    姓名：<input type="text" name="" id="name">
    年龄：<input type="text" name="" id="age">
    <input type="button" name="" id="btn1" value="添加">
    <table border='1' width='500' id='tab1'>
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>blue</td>
                <td>27</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>张三</td>
                <td>22</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>李四</td>
                <td>24</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>王五</td>
                <td>55</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td>赵六</td>
                <td>66</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

2-表格搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function() {
            var oTab = document.getElementById('tab1');
            var oBtn = document.getElementById('btn1');
            var oName = document.getElementById('name');
          
            oBtn.onclick = function() {
                for(var i=0;i<oTab.tBodies[0].rows.length; i++) {

                    var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                    var sName = oName.value.toLowerCase();
                    var arr = sName.split(' ');

                    oTab.tBodies[0].rows[i].style.background='';
                    for(var j=0; j<arr.length; j++) {
                        if(sTab.search(arr[j]) != -1) {
                        oTab.tBodies[0].rows[i].style.background = 'yellow';
                    }
                    }
                    
                }
            }
        }
    </script>
</head>
<body>
    <!-- 
        1.忽略大小写 toLowerCase
        2.模糊查询 search
        3.多关键字查询 split 
     -->
    姓名：<input type="text" name="" id="name">
    <input type="button" name="" id="btn1" value="搜索">
    <table border='1' width='500' id='tab1'>
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>blue</td>
                <td>27</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>张三</td>
                <td>22</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>李四</td>
                <td>24</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>王五</td>
                <td>55</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td>赵六</td>
                <td>66</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td>三三</td>
                <td>66</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

3-表格排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function() {
            var oTab = document.getElementById('tab1');
            var oBtn = document.getElementById('btn1');
          
            oBtn.onclick = function() {
                var arr = [];
                for(var i=0; i<oTab.tBodies[0].rows.length; i++) {
                    arr[i] = oTab.tBodies[0].rows[i];
                }
                arr.sort(function(tr1, tr2) {
                    var n1 = parseInt(tr1.cells[0].innerHTML);
                    var n2 = parseInt(tr2.cells[0].innerHTML);
                    return n1-n2;
                });

                for(var i=0; i<arr.length; i++) {
                    oTab.tBodies[0].appendChild(arr[i]);
                }
            }
        }
    </script>
</head>
<body>
    <!-- 
        1.忽略大小写
        2.模糊查询
        3.多关键字查询
     -->
    <input type="button" name="" id="btn1" value="排序">
    <table border='1' width='500' id='tab1'>
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>blue</td>
                <td>27</td>
                <td></td>
            </tr>
            <tr>
                    <td>6</td>
                    <td>三三</td>
                    <td>66</td>
                    <td></td>
                </tr>
            <tr>
                <td>2</td>
                <td>张三</td>
                <td>22</td>
                <td></td>
            </tr>
            
            <tr>
                <td>4</td>
                <td>王五</td>
                <td>55</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td>赵六</td>
                <td>66</td>
                <td></td>
            </tr>
            <tr>
                    <td>3</td>
                    <td>李四</td>
                    <td>24</td>
                    <td></td>
                </tr>
        </tbody>
    </table>
</body>
</html>

4-运动基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: relative;
            top: 100px;
            left: 0;
        }
    </style>
    <script>
        var timer=null;
        function startMove() {
            var oDiv = document.getElementById('div1');
            clearInterval(timer);

            timer = setInterval(function() {
                var speed = 1;
                if(oDiv.offsetLeft >= 300) {
                    clearInterval(timer);
                }
                else
                {
                    oDiv.style.left = oDiv.offsetLeft + speed +'px';
                }
            },30);
        }
    </script>
</head>
<body>
    <input type="button" id="btn1" value="开始运动" onclick="startMove()">
    <div id="div1"></div>
</body>
</html>

5-分享到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 150px;
            height: 200px;
            background-color: pink;
            position: absolute;
            left: -150px;
        }
        #div1 span {
            position: absolute;
            width: 20px;
            height: 60px;
            line-height: 20px;
            background-color: yellow;
            right: -20px;
            top: 70px;
        }
    </style>
    <script>
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function() {
                startMove(0);
            }
            oDiv.onmouseout = function() {
                startMove(-150);
            }
        };
        var timer = null;
        
        function startMove(iTarget) {
            var oDiv = document.getElementById('div1');

            clearInterval(timer);
            timer = setInterval(function() {
                var speed = 0;

                if(oDiv.offsetLeft > iTarget){
                    speed = -10;
                }
                else {
                    speed = 10;
                }

                if(oDiv.offsetLeft == iTarget) {
                    clearInterval(timer);
                }
                else {
                    oDiv.style.left = oDiv.offsetLeft+ speed + 'px';
                }
            },30); 
        }
    </script>
</head>
<body>
    <div id="div1">
        <span>分享到</span>
    </div>
</body>
</html>

6-淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
            opacity: 0.3;
        }
    </style>
    <script>
        window.onload = function() {
            var oDiv = document.getElementById('div1');

            oDiv.onmouseover = function() {
                startMove(100); 
            }

            oDiv.onmouseout = function() {
                startMove(30); 
            }
        }
        var alpha = 30;
        var timer = null;

        function startMove(iTarget) {
            var oDiv = document.getElementById('div1');

            clearInterval(timer);
            timer = setInterval(function() {
                if(alpha < iTarget) {
                    speed= 10;
                }
                else{
                    speed = -1;
                }
                if(oDiv.style.opacity == iTarget) {
                    clearInterval(timer);
                }
                else
                {
                    alpha += speed;
                    oDiv.style.opacity=alpha/100;
                }
            },30);
        }
    </script>
</head>
<body>
    <div id='div1'></div>
</body>
</html>

7-缓冲运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 600px;
            top: 50px;
        }
        #div2 {
            width: 1px;
            height: 300px;
            position: absolute;
            left: 300px;
            top: 0;
            background-color: greenyellow;
        }
    </style>
    <script>
        function startMove() {
            var oDiv = document.getElementById('div1');
            setInterval(function() {
                var speed = (300-oDiv.offsetLeft)/10;
                speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
                oDiv.style.left = oDiv.offsetLeft+speed+'px';
            },30);
        }
    </script>
</head>
<body>
    <input type="button" value="开始运动" onclick="startMove()">
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

8-动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            margin: auto;
            text-align: center;
        }
        #tab {
            border: 1px solid #000;
            margin: auto;
            width: 500px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id='div1'>
        <input type="text" id="id">
        <input type="text" id="name">
        <input type="text" id="gender">
        <a href="javascript:;" id="add">添加</a><br>
        <table id="tab">
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>性别</td>
                <td>操作</td>
                
            </tr>
            <tr>
                <td>1</td>
                <td>bubu</td>
                <td>男</td>
                <td><a href="javascript:;" onclick='delTr(this);'>删除</a></td>
    
            </tr>
            <tr>
                <td>2</td>
                <td>pupu</td>
                <td>女</td>
                <td><a href="javascript:;" onclick='delTr(this);'>删除</a></td>
            </tr>
        </table>
    </div>
        
    <script>
        //1.给添加按钮绑定单击事件
        document.getElementById("add").onclick = function(){
             //2.获取文本框的内容
             var id = document.getElementById("id").value;
             var name = document.getElementById("name").value;
             var gender = document.getElementById("gender").value;
             //获取tab
             var table = document.getElementById("tab");
             //追加一行
             table.innerHTML += "<tr>"+
                   " <td>"+id+"</td>"+
                   "<td>"+ name +"</td>"+
                   "<td>"+ gender +"</td>"+
                   " <td><a href='javascript:void(0);' class='del' οnclick='delTr(this);'>删除</a></td>"+
                   "</tr>";             
         }
         function delTr(a) {
             var tab = a.parentNode.parentNode.parentNode;
             var td = a.parentNode.parentNode;
            tab.removeChild(td);
         }
    </script>
</body>
</html>
LuckyGuyy
发布了53 篇原创文章 · 获赞 13 · 访问量 2262
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_36821220/article/details/103407281
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022