JS(10)_js john()-CSDN博客

本文链接：https://blog.csdn.net/john_boom/article/details/78254445

复习

window - document
document.title document.head document.body
document.documentElement (约等于 document.html )
scrollTop 被卷去的头部 scrollLeft 封装自己的函数
scrollTo(x,y) 去往页面的 x 和 y 坐标的位置
window.scrollTo(x,y)
window.onscroll = fucntion() { fun (); } fun() function() {iffss }
JSON js 对象表示法数据传输
var json = {} 对象 var arr = [] ; 数组 var num; 变量
var json = { width: “100px” , height: 100 } 声明的方法
json.height 100 使用

client 家族

client 可视区域
offsetWidth: width + padding + border （披着羊皮的狼）
clientWidth： width + padding 不包含border
scrollWidth: 大小是内容的大小

检测屏幕宽度(可视区域)

ie9及其以上的版本
window.innerWidth
标准模式
document.documentElement.clientWidth
怪异模式
document.body.clientWidth
自己封装一个返回可视区宽度和高度的函数。

window.onresize 改变窗口事件

window.onscroll = function() {}屏幕滚动事件
window.onresize = function() {} 窗口改变事件
onresize 事件会在窗口或框架被调整大小时发生
要求：
当我们的页面宽度大于 960 像素的时候页面颜色是红色
当我们的页面宽度大于 640 小于 960 页面的颜色是绿色
剩下的颜色是蓝色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变页面大小导致颜色变化</title>
</head>
<body>
</body>
</html>
<script>
    function client() {//封装可视区域大小的函数
        if(window.innerWidth != null)// ie9+最新浏览器
        {
            return{
                width: window.innerWidth,
                height:window.innerHeight
            }
        }
        else if (document.compatMode === "CSS1Compat") { //标准浏览器
            return {
                width: document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }
        }
        return {  //怪异浏览器
            width:document.body.clientWidth,
            height:document.body.clientHeight
        }
    }
    reSize();
    window.onresize = reSize;//不带括号，只要屏幕出发，就调用reSize函数
    function reSize() {
        var clientWidth = client().width;
        if (clientWidth > 960) {
            document.body.style.backgroundColor = "red";
        }else if (clientWidth > 640 ) {
            document.body.style.backgroundColor = "green";
        }else {
            document.body.style.backgroundColor = "pink";
        }
    }
</script>

function fun() { 语句 }
fun 是函数体的意思
fun() 调用函数的意思

检测屏幕宽度(分辨率)

clientWidth 返回的是可视区大小浏览器内部的大小
window.screen.width 返回的是我们电脑的分辨率跟浏览器没有关系

简单冒泡机制

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
顺序
E 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡的问题</title>
</head>
<body>
<button id="btn">点击</button>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    document.onclick = function () {
        alert("点击了空白处");
    }
    btn.onclick = function (event) {
        alert("点击了按钮");
        var event = event || window.event;
        if(event && event.stopPropagation){
            event.stopPropagation();//w3c标准
        }else {
            event.cancelBubble = true;//ie678 ie浏览器
        }
    }
</script>

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

阻止冒泡的方法

标准浏览器和 ie浏览器
w3c的方法是event.stopPropagation() proPagation—传播传递
IE则是使用event.cancelBubble = true bubble 冒泡泡泡 cancel 取消
兼容的写法：

   if(event && event.stopPropagation)
          {
             event.stopPropagation();  //  w3c 标准
          }
         else
          {
              event.cancelBubble = true;  // ie 678  ie浏览器
   }

小案例点击空白处隐藏盒子

这个案例就是说，一个盒子，点击除了自己之外的任何一个地方，就会隐藏。
原理：
点击自己不算 ( 怎么证明我是我点击的这个对象id 正好和自己一样 )
点击空白处就是点击 document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击空白处隐藏</title>
    <style>
        body {
            height: 2000px;
        }
        #mask {
            width: 100%;
            height: 100%;
            opacity: 0.4; /*半透明*/
            filter: alpha(opacity = 40);/*ie 6半透明*/
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
        #show {
            width: 300px;
            height: 300px;
            background-color: #fff;
            position: fixed;
            left: 50%;
            top: 50%;
            margin:  -150px 0 0 -150px;
            display: none;
        }
    </style>
</head>
<body>
<a href="javascript:;" id="login">注册</a>
<a href="javascript;:">登录</a>
<div id="mask"></div>
<div id="show"></div>
</body>
</html>
<script>
    function $(id) { return document.getElementById(id);}
    var login = document.getElementById("login");
    login.onclick = function (event) {
        $("mask").style.display = "block";
        $("show").style.display = "block";
        document.body.style.overflow = "hidden";//不显示滚动条
        //取消冒泡
        var event = event || window.event;
        if (event && event.stopPropagation) {
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    }
    document.onclick = function (event) {
        var event = event || window.event;

        var targetId = event.target ? event.target.id : event.srcElement.id;

        if(targetId != "show"){
            $("mask").style.display = "none";
            $("show").style.display = "none";
            document.body.style.overflow = "visible";//显示滚动条
        }
    }
</script>

判断当前对象

火狐谷歌等 - - event.target.id
ie 678 - - event.srcElement.id
兼容性写法：
var targetId = event.target ? event.target.id : event.srcElement.id;

targetId != "show"

选中之后，弹出层

我们想，选中某些文字之后，会弹出一个弹出框
这个和我们前面讲过的拖拽有点不一样。
拖拽是拖着走。拉着鼠标走。
选择文字：这个弹出的层选中的时候不出来，弹起鼠标的时候才出现。
所以这个的事件一定是 onmouseup . 盒子显示而且盒子的位置再鼠标的 clientX 和 clientY 一模一样
用来判断选择的文字：

获得用户选择内容

window.getSelection() 标准浏览器
document.selection.createRange().text; ie 获得选择的文字
兼容性的写法：

if(window.getSelection)
{
    txt = window.getSelection().toString();   // 转换为字符串
}
else
{
    txt = document.selection.createRange().text;   // ie 的写法
}

综合代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 400px;
            margin:50px;
        }
        #demo {
            width: 100px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
<span id="demo"></span>
<div id="test">我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div>
<div id="another">
    我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
</div>
</body>
</html>
<script>
    function $(id) {return document.getElementById(id)}
    $("test").onmouseup = function(event) {
        var event = event || window.event;
        var x = event.clientX;
        var y = event.clientY;
        var txt;
        if (window.getSelection) {
            txt = window.getSelection().toString();
        }else{
            txt = document.selection.createRange().text;
        }
        if (txt) {
            show(x,y,txt);
        }
    }
    document.onmousedown = function (event) {
        var event = event || window.event;
        var targetId = event.target ? event.target.id : event.scrElement.id;
        if (targetId !="demo") {
            $("demo").style.display = "none";
        }
    }
    function show(mousex,mousey,contentText) {
        setTimeout(function () {
            $("demo").style.display = "block";
            $("demo").style.left = mousex +"px";
            $("demo").style.top = mousey +"px";
            $("demo").innerHTML = contentText;
        },200)
    }
</script>

动画原理

人走路的时候，步长
动画的基本原理：让盒子的 offsetLeft + 步长
盒子原来的位置 0 + 10 盒子现在的offsetLeft 10
10 + 10 = 20 + 10
原理：

<script>
    //动画的基本原理   盒子的 offsetLeft  +  步长
    var btn = document.getElementsByTagName("button")[0];
    var div = document.getElementsByTagName("div")[0];
    var timer = null;
    btn.onclick = function() {
       timer = setInterval(function() {
           if(div.offsetLeft > 400)
           {
               clearInterval(timer);
           }
           div.style.left = div.offsetLeft + 10  + "px";
       },20);
    }
</script>

|-5| = 5

Math.abs(-5)取绝对值函数 js 就是数学计算

匀速运动封装函数

   function animate(obj,target){
          var speed = obj.offsetLeft < target ? 5 : -5;  // 用来判断 应该 +  还是 -
          obj.timer = setInterval(function() {
              var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
              obj.style.left = obj.offsetLeft + speed + "px";
              if(Math.abs(result)<=5)  // 如果差值不小于 5 说明到位置了
              {
                  clearInterval(obj.timer);
                  obj.style.left = target + "px";  // 有5像素差距  我们直接跳转目标位置
              }
          },30)
      }

案例：轮播图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0; list-style:none; border:0;}
.all{
  width:500px;
  height:200px;
  padding:7px;
  border:1px solid #ccc;
  margin:100px auto;
  position:relative;
}
.screen{
    width:500px;
    height:200px;
     overflow:hidden;
    position:relative;
}

.screen li{ width:500px; height:200px; overflow:hidden; float:left;}
.screen ul{ position:absolute; left:0; top:0px; width:3000px;}
.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
.all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}
.all ol li.current{ background:yellow;}

</style>
<script type="text/javascript">
  function animate(obj,target) {
    clearInterval(obj.timer);
    var speed = obj.offsetLeft < target ? 15:-15;
    obj.timer = setInterval(function(){
        var result = target - obj.offsetLeft;
        obj.style.left = obj.offsetLeft + speed +"px";
        if (Math.abs(result)<=15) {
          clearInterval(obj.timer);
          obj.style.left = target + "px";
        }
    },10)
  }
  window.onload = function() {
    var box = document.getElementById("all");
    var ul = document.getElementById("ul");
    var ulLis = ul.children;
    //因为要无缝滚动，所以要克隆第一张，放到最后一张后面
    ul.appendChild(ul.children[0].cloneNode(true));

    var ol = document.createElement("ol");
    box.appendChild(ol);
    for (var i = 0; i < ulLis.length-1; i++) {
        var li = document.createElement("li");
        li.innerHTML = i+1;
        ol.appendChild(li);
    }
    ol.children[0].className = "current";

    //开始动画部分
    var olLis = ol.children;
    for (var i = 0; i < olLis.length; i++) {
      olLis[i].index = i;
      olLis[i].onmouseover = function() {
        for (var j = 0; j < olLis.length; j++) {
          olLis[j].className = "";
        }
        this.className = "current";
        animate(ul,-this.index*500)
        square = key = this.index;
      }
    }
    //添加定时器
    var timer =null;//轮播图的定时器
    var key = 0;//控制播放张数
    var square = 0;//控制小方块
    timer = setInterval(autoplay,1000);
    function autoplay() {
      key++;
      if (key>ulLis.length -1) {
        ul.style.left = 0;
        key =1;
      }
      animate(ul,-key*500);
      square++;
      if (square >olLis.length -1) {
        square = 0;
      }
      for (var i = 0; i < olLis.length; i++) {
        olLis[i].className = "";
      }
      olLis[square].className = "current";
    }
    box.onmouseover = function() {
      clearInterval(timer);
    }
    box.onmouseout = function() {
      timer = setInterval(autoplay,1000);
    }
  }
</script>

</head>

<body>
<div class="all" id='all'>
    <div class="screen">
        <ul id="ul">
            <li><img src="images/taobao/1.jpg" width="500" height="200" /></li>
            <li><img src="images/taobao/2.jpg" width="500" height="200" /></li>
            <li><img src="images/taobao/3.jpg" width="500" height="200" /></li>
            <li><img src="images/taobao/4.jpg" width="500" height="200" /></li>
            <li><img src="images/taobao/5.jpg" width="500" height="200" /></li>
        </ul>

    </div>
</div>
</body>
</html>