其他分享
首页 > 其他分享> > BOM+DOM案例——阻止链接跳转，div滚动条，元素的隐藏方式，字符串拼接

BOM+DOM案例——阻止链接跳转，div滚动条，元素的隐藏方式，字符串拼接

作者：互联网

文章目录

阻止超链接跳转 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<a href="http://www.baidu.com" id="ak">百度</a>
<script src="common.js"></script>
<script>
  my$("ak").onclick=function (e) {
    // 方法一
    // alert("被点了");
    // 方法二
    // return false;
    // 方法三
    window.event.preventDefault();//阻止浏览器的默认的事件
  };
</script>
</body>
</html>
div的滚动条案例 
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 300px;
      height: 500px;
      border: 1px solid red;
      margin: 100px;
      position: relative;
      overflow: hidden;
    }

    .content {
      padding: 5px 18px 5px 5px;
      position: absolute;
      top: 0;
      left: 0;

    }

    .scroll {
      width: 18px;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #eee;
    }

    .bar {
      height: 100px;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: red;
      border-radius: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <div class="content" id="content">
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
    <div>大鹏一日同风起，扶摇直上九万里</div>
 

  </div><!--文字内容-->
  <div id="scroll" class="scroll"><!--装滚动条的层-->
    <div class="bar" id="bar"></div><!--滚动条-->
  </div>
</div>
<script src="common.js"></script>
<script>
  //获取需要的元素

  //最外面的div
  var box = my$("box");
  //文字div
  var content = my$("content");
  //装滚动条的div---容器
  var scroll = my$("scroll");
  //滚动条
  var bar = my$("bar");

  //设置滚动条的高度
  //滚动条的高/装滚动条的div的高=box的高/文字div的高
  //滚动条的高=装滚动条的div的高*box的高/文字div的高
  var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;
  bar.style.height = height + "px";

  //移动滚动条
  bar.onmousedown = function (e) {
    var spaceY = e.clientY - bar.offsetTop;
    document.onmousemove = function (e) {//移动事件
      var y = e.clientY - spaceY;
      y=y<0?0:y;//最小值
      y=y>scroll.offsetHeight-bar.offsetHeight?scroll.offsetHeight-bar.offsetHeight:y;
      bar.style.top = y + "px";

      //设置鼠标移动的时候,文字不被选中

      window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();

      //滚动条的移动距离/文字div的移动距离=滚动条最大的移动距离/文字div的最大移动距离

      //文字div的移动距离=滚动条的移动距离*文字div的最大移动距离/滚动条最大的移动距离

      var moveY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
      //设置文字div的移动距离
      content.style.marginTop=-moveY+"px";




    };
  };

  document.onmouseup=function () {
    //鼠标抬起的时候,把移动事件干掉
    document.onmousemove=null;
  };


</script>

</body>
</html>
元素隐藏的几种方式 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      border:1px solid red;

    }
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>哈哈
<script src="common.js"></script>
<script>

  document.getElementById("btn").onclick=function () {
    //隐藏div
    //不占位
    //my$("dv").style.display="none";
    //占位
    //my$("dv").style.visibility="hidden";
    //占位
    //my$("dv").style.opacity=0;
    //占位
    //my$("dv").style.height="0px";
    //my$("dv").style.border="0px solid red";
  };
</script>
</body>
</html>
table隔行变色 
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 500px;
      margin: 100px auto 0;
    }

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

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: pink;
    }
  </style>
</head>
<body>
<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>课程</th>
      <th>成绩</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        1
      </td>
      <td>中爱心</td>
      <td>语文</td>
      <td>100</td>

    </tr>
    <tr>
      <td>
        2
      </td>
      <td>奥语</td>
      <td>日语</td>
      <td>100</td>
    </tr>
    <tr>
      <td>
        3
      </td>
      <td>枫林晚</td>
      <td>营销学</td>
      <td>100</td>
    </tr>
    <tr>
      <td>
        4
      </td>
      <td>芙蓉妹妹</td>
      <td>数学</td>
      <td>10</td>
    </tr>
    <tr>
      <td>
        5
      </td>
      <td>性之助</td>
      <td>英语</td>
      <td>100</td>
    </tr>
    <tr>
      <td>
        6
      </td>
      <td>莫迪卡</td>
      <td>体育</td>
      <td>100</td>
    </tr>
    <tr>
      <td>
        7
      </td>
      <td>阿拉蕾</td>
      <td>体育</td>
      <td>100</td>
    </tr>
    </tbody>
  </table>
</div>
<script src="common.js"></script>
<script>

  //先获取所有的行
  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 = "green";
  }
  function mouseoutHandle() {//鼠标离开
    this.style.backgroundColor = lastColor;
  }
</script>


</body>
</html>
字符串拼接

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>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 src="common.js"></script>
<script>

  //  var str="abcef";
  //  console.log(str[2]);
  //  str[2]="H";
  //  console.log(str);


  //字符串特性:不可变性
  //点击按钮实现拼接
  //  document.getElementById("btn").οnclick=function () {
  //    var str="";
  //    //获取所有的文本框
  //    var inputs=document.getElementsByTagName("input");
  //    //每个文本框的value属性值
  //    for(var i=0;i<inputs.length-1;i++){
  //      if(inputs[i].type!="button"){
  //        str+=inputs[i].value+"|";
  //      }
  //    }
  //    console.log(str+inputs[inputs.length-1].value);
  //  };

  //推荐使用数组的方式拼接大量的字符串
  document.getElementById("btn").onclick = function () {
    var str = [];
    //获取所有的文本框
    var inputs = document.getElementsByTagName("input");
    //每个文本框的value属性值
    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].type != "button") {
        str.push(inputs[i].value);
      }
    }
    console.log(str.join("|"));//字符串
  };
</script>

</body>
</html>

标签：DOM,同风起,一日,滚动条,跳转,大鹏,div,扶摇直上,九万里
来源： https://blog.51cto.com/u_15265965/2894289