案例2

最新推荐文章于 2019-10-15 19:55:23 发布

Galaksen

最新推荐文章于 2019-10-15 19:55:23 发布

阅读量164

点赞数

分类专栏：学习笔记文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_41857060/article/details/100562702

版权

学习笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

1.元素隐藏的不同方式

2.表格隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 400px;
            margin: 100px auto;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid gainsboro;
            width: 500px;
            cursor: pointer;
        }

        th,
        td {
            border: 1px solid gainsboro;
            color: black;
            padding: 10px;
        }

        tbody tr{
            background-color: pink;
        }

        th {
            background-color: #10b5fb;
            font: bold 16px "微软雅黑";
            color: white;
        }

        td {
            font: 14px "微软雅黑";
        }
    </style>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>SEX</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>1</td>
            <td>Tom</td>
            <td>male</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Cindy</td>
            <td>female</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Judy</td>
            <td>female</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Maria</td>
            <td>female</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }

    var trs = my$("j_tb").getElementsByTagName("tr");
    for (var i= 0; i< trs.length; i++) {
        //奇数行红，偶数行黄
        trs[i].style.backgroundColor = i % 2 === 0 ? "red" : "yellow";
        //鼠标进入--换颜色
        trs[i].onmouseover=mouseoverHandle;
        //鼠标离开--恢复原色
        trs[i].onmouseout=mouseoutHandle;
    }
    //当鼠标进入的时候,先把设置后的颜色保存起来,等到鼠标离开再恢复即可
    var lastColor;
    function mouseoverHandle(){
        lastColor = this.style.backgroundColor;
        this.style.backgroundColor="pink";
    }
    function mouseoutHandle(){
        this.style.backgroundColor=lastColor;
    }
</script>
</body>
</html>

鼠标进入，红色变成粉色，鼠标离开变回红色：

3.tab切换效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换效果</title>
    <style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        li {
            width: 50px;
            height: 30px;
            line-height: 30px;
            background-color: beige;
            text-align: center;
            float: left;
            margin-left: 5px;
        }

        li.current {
            background-color: burlywood;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="menu">
    <ul id="list">
        <li class="current"><a href="http://www.baidu.com">首页</a></li>
        <li><a href="javascript:void(0);">播客</a></li>
        <li><a href="javascript:void(0);">博客</a></li>
        <li><a href="javascript:void(0);">相册</a></li>
        <li><a href="javascript:void(0);">关于</a></li>
        <li><a href="javascript:void(0);">帮助</a></li>
    </ul>
</div>
<script>
    function getFirstElement(element) {
        if (element.firstElementChild) {
            return element.firstElementChild;
        } else {
            var node = element.firstChild;
            while (node && node.nodeType != 1) {
                node = node.nextSibling;
            }
            return node;
        }
    }
    var liObjs = document.getElementById("list").children;
    for (var i = 0; i < liObjs.length; i++) {
        var aObj = getFirstElement(liObjs[i]);
        aObj.onclick=function () {
            //第一件事:把这个a所在的li的所有的兄弟元素的类样式全部移除
            for(var j=0;j<liObjs.length;j++){
                liObjs[j].removeAttribute("class");
            }
            //第二件事:
            //当前点击的a的父级元素li(点击的这个a所在的父级元素li),设置背景颜色
            this.parentNode.className="current";
        };
    }
</script>
</body>
</html>

4.大量字符串拼接效果实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大量字符串拼接效果实现</title>
</head>
<body>
<input type="button" value="拼接" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>
//在新浏览器内，这两种方法的效率差不多
    /*document.getElementById("btn").onclick=function () {
        var str="";
      var input=document.getElementsByTagName("input");
      for(var i=0;i<input.length-1;i++){
          if(input[i].type!=="button"){
              str+=input[i].value+"|";
          }
      }
      str+=input[input.length-1].value;
      console.log(str);
    };*/

    //推荐使用数组的方式拼接大量的字符串
    document.getElementById("btn").onclick=function () {
        var str=[];
        var input=document.getElementsByTagName("input");
        for(var i=0;i<input.length;i++){
            if(input[i].type!=="button"){
                str.push(input[i].value);
            }
        }
        console.log(str.join("|"));
    };
</script>
</body>
</html>

5.无刷新评论

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无刷新评论</title>
</head>
<body>
<table id="tb" border="1">
    <thead>
    <tr>
        <th>昵称</th>
        <th>评论</th>
    </tr>
    </thead>
    <tbody id="tbd">
    <tr>
        <td>Amber</td>
        <td>我喜欢蓝色</td>
    </tr>
    </tbody>
</table>
<div>
    昵称:<input type="text" value="" id="userName"/><br/>
    <textarea name="" id="view" cols="30" rows="10"></textarea><br/>
    <input type="button" value="评论" id="btn"/><br/>
</div>
<script>
    function my$(id){
        return document.getElementById(id);
    }
    //获取按钮,注册点击事件
    document.getElementById("btn").onclick = function () {
        //获取昵称的元素
        var userName = my$("userName");
        //获取评论的元素
        var view = my$("view");
        //创建行
        var tr = document.createElement("tr");
        //行加到tbody中
        my$("tbd").appendChild(tr);
        //创建列
        var td1 = document.createElement("td");
        tr.appendChild(td1);
        td1.innerHTML = userName.value;
        //创建列
        var td2 = document.createElement("td");
        tr.appendChild(td2);
        td2.innerHTML = view.value;
        //清空
        userName.value = "";
        view.value = "";
    };

</script>
</body>
</html>

6.数组从大到小排序

Galaksen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例2

目录1.元素隐藏的不同方式2.表格隔行变色3.tab切换效果4.大量字符串拼接效果实现5.无刷新评论6.数组从大到小排序1.元素隐藏的不同方式2.表格隔行变色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫