js基础10-应用案例

来源：互联网发布：华硕超频软件编辑：程序博客网时间：2024/05/01 00:54

var json = {} 对象 var arr = [] ; 数组 var num;变量

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

<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        }    }    document.write(client().width);</script>

2. window.onresie 改变窗口事件，响应式设计

昨天 window.onscroll = function() {} 屏幕滚动事件

今天 window.onresize = function() {} 窗口改变事件

onresize 事件会在窗口或框架被调整大小时发生

要求：

当我们的页面宽度大于 960 像素的时候页面颜色是红色

当我们的页面宽度大于 640小于960 页面的颜色是绿色

剩下的颜色是蓝色

function fun() { 语句 }

fun 是函数体的意思

fun() 调用函数的意思

<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;  // 不带括号，只要屏幕触发，就调用 reSzie 函数    //alert(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 = "blue";         }    }</script>

3. 云课堂响应式设计记住！！！

原理：clientWidth > 640 && clientWidth < 980 属于pad，调用pad css

clientWidth < 640 属于mobile，调用mobile css

这个link要写在前面两个之后

var styleCss = document.getElementById("styleCss");window.onresize = reSize;function reSize() {   var clientWidth = client().width;   if(clientWidth > 980)   {      styleCss.href = "";    }   else if(clientWidth > 640)   {      styleCss.href = "css/pad.css";    }   else   {      styleCss.href = "css/mobile.css";   }}

4. 区别函数调用

<script>    function fun() {        return 3;    }    console.log(fun);  // 返回函数体 function fun() { retrun 3}    console.log(fun()); // 调用函数  3  返回的是结果    fun();    window.onresize = 3 // 我们真实需要得到 window.onresize = fun;    window.onresize = function fun() { retrun 3}</script>

5. 阻止冒泡事件面试题！！

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

顺序

E 6.0:

div -> body -> html -> document

其他浏览器:

div -> body -> html -> document -> window

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

<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;  // ie 678  ie浏览器        }    }</script>

6. 小案例点击空白处隐藏盒子应用于右下角扫描微信二维码

给body加 overflow：hidden , 不显示滚动条

点击时不显示滚动条 document.body.style.overflow = "hidden"; // 不显示滚动条

// alert(event.target.id); // 返回的是点击的某个对象的id 名字 火狐谷歌等

火狐谷歌等 event.target.id

ie 678 event.srcElement.id

vartargetId=event.target?event.target.id:event.srcElement.id;

var event = event || window.event;// alert(event.target.id);  // 返回的是点击的某个对象的id 名字// alert(event.srcElement.id);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"; // 显示滚动条}

css代码

<!DOCTYPE html><html><head lang="en">    <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>

js代码重要，重点看黄色注释 , 点击空白处隐藏

<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;        // alert(event.target.id);  // 返回的是点击的某个对象的id 名字        // alert(event.srcElement.id);        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>

7. 选中之后，弹出层

我们想，选中某些文字之后，会弹出一个弹出框

这个和我们前面讲过的拖拽有点不一样。

拖拽是拖着走。拉着鼠标走。

选择文字：这个弹出的层选中的时候不出来，弹起鼠标的时候才出现。

所以这个的事件一定是 onmouseup .盒子显示而且盒子的位置再鼠标的clientX 和clientY一模一样

用来判断选择的文字：

<script type="text/javascript">    function $(id){return document.getElementById(id)}    $("test").onmouseup = function(event){        var event = event || window.event;        var x = event.clientX;        var y = event.clientY;        showBox(x,y);    }     function showBox(mousex,mousey){        $("demo").style.display = "block";        $("demo").style.left = mousex + "px";        $("demo").style.top = mousey + "px";    }    </script>

8. 获得用户选择内容

window.getSelection() 标准浏览器

document.selection.createRange().text; ie 获得选择的文字

兼容性的写法：

选中文字才弹出对话框，只是鼠标点击不弹对话框，使框内显示选中文字

var txt;  // 用于存贮文字的变量if(window.getSelection)  // 获取我们选中的文字{    txt = window.getSelection().toString();   // 转换为字符串}else{    txt = document.selection.createRange().text;   // ie 的写法}if(txt)   // 为防止鼠标点击弹起框框， 所有的字符串都为真  "" 是假    所有的数字为真  0  为假{    //看看有没有选中的文字，没有选中文字为空的，就不应该执行   点击一下鼠标 就是空的    showBox(x,y,txt);  // 调用函数}

延迟处理采用setTimeout函数

function showBox(mousex,mousey,contentText) {  // 相关操作  ，延迟            setTimeout(function() {                $("demo").style.display = "block";                $("demo").style.left = mousex + "px";                $("demo").style.top = mousey + "px";                $("demo").innerHTML = contentText;            },200)}

点击空白处隐藏

document.onmousedown = function(event) {  // 点击空白处隐藏    var event = event || window.event;    var targetId = event.target ? event.target.id : event.srcElement.id;    if(targetId != "demo"){        $("demo").style.display = "none";    }}

<script>    function $(id) {return document.getElementById(id)}    $("test").onmouseup = function(event) {        var event = event || window.event;        var x = event.clientX;  //  鼠标的x坐标        var y = event.clientY;  //  同理        var txt;  // 用于存贮文字的变量        if(window.getSelection)  // 获取我们选中的文字        {            txt = window.getSelection().toString();   // 转换为字符串        }        else        {            txt = document.selection.createRange().text;   // ie 的写法        }        if(txt)   // 所有的字符串都为真  "" 是假    所有的数字为真  0  为假        {            //看看有没有选中的文字，没有选中文字为空的，就不应该执行   点击一下鼠标 就是空的            showBox(x,y,txt);  // 调用函数        }    }    document.onmousedown = function(event) {  // 点击空白处隐藏        var event = event || window.event;        var targetId = event.target ? event.target.id : event.srcElement.id;        if(targetId != "demo"){            $("demo").style.display = "none";        }    }    function showBox(mousex,mousey,contentText) {  // 相关操作  ，延迟                setTimeout(function() {                    $("demo").style.display = "block";                    $("demo").style.left = mousex + "px";                    $("demo").style.top = mousey + "px";                    $("demo").innerHTML = contentText;                },200)    }</script>

 <style>        div {            width: 400px;            margin:50px;        }        #demo {            width: 100px;            height: 100px;            background-color: pink;            position: absolute;            top: 0;            left: 0;            display: none;        }    </style>

<body><span id="demo"></span><div id="test">我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div><div id="another">    我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字</div></body>

9. 动画原理之前的动画行走方式全忘记只记这个！！！

人走路的时候，步长

动画的基本原理： 让盒子的新的 offsetLeft + 步长

盒子原来的位置 0 + 10 盒子现在的offsetLeft 10

10 + 10 = 20 + 10

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div {            width: 100px;            height: 100px;            background-color: pink;            position: absolute;        }    </style></head><body><button>开始</button><div></div></body></html><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>

10. 动画原理封装函数重点看js动画封装

<html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div {            width: 100px;            height: 100px;            background-color: pink;            position: absolute;        }    </style></head><body><button id="btn200">200</button><button id="btn400">400</button><div id="run"></div></body></html>

<script>    function $(id) {return document.getElementById(id)}    $("btn200").onclick = function() {        animate($("run"),200);  // animate 自定义函数        // 第一个参数  谁做动画    第二参数目标位置    }    $("btn400").onclick = function() {        animate($("run"),400);    }    var arr = [];    arr.index = 10;   // 自定 属性  arr 的 index  arr 专属    var index = 20; // 变量   miss 自由的  任何人都可以使用    // 运动函数   /* for(var i=0; i<lis.length;i++)    {        lis[i].index = i;    }*/    function animate(obj,target){        obj.timer = setInterval(function() {  // 开启定时器            if(obj.offsetLeft > target)            {                clearInterval(obj.timer);            }            obj.style.left = obj.offsetLeft + 10 + "px";        },30)    }</script>

11. 匀速运动函数封装记住！！！

|-5| = 5

Math.abs(-5) 取绝对值函数

一、理解为什么要用 var result = obj.offsetLeft - target 判断停止定时器

二、如何实现自由倒退前进，采用 var result = target - obj.offsetLeft ; // 差值不会超过5 ，来进行控制是否到了位置

1 、如何实现前进倒退：如果target > obj.offsetLeft , 前进；如果target < obj . offsetLet , 后退
var speed = obj.offsetLeft < target ? 5 : -5; // 用来判断应该 + 还是

<script type="text/javascript">    function $(id){return document.getElementById(id)}    $("btn200").onclick = function(){        animate($("box"),200);    }    $("btn400").onclick = function(){        animate($("box"),400);    }    function animate(obj,target){        var timer = null;        obj.timer = setInterval(fn, 30);        var speed = obj.offsetLeft < target ? 5 : -5;        function fn(){            if (obj.offsetLeft > target) {                clearInterval(obj.timer);            }            obj.style.left = obj.offsetLeft + speed + "px";        }    }</script>

2、如何实现自由倒退前进，采用 var result = target - obj.offsetLeft ; //差值不会超过5，来进行控制是否到了位置

if (Math.abs(result) <= 5) { // Math.abs(-5) 取绝对值函数

clearInterval(obj.timer); //差值小于5，到了位置

obj.style.left = target + "px"; //直接跳转到target位置

}

<script type="text/javascript">    function $(id){return document.getElementById(id)}    $("btn200").onclick = function(){        animate($("box"),200);    }    $("btn400").onclick = function(){        animate($("box"),400);    }    function animate(obj,target){        clearInterval(obj.timer);        var timer = null;        obj.timer = setInterval(fn, 30);        function fn(){            var speed = obj.offsetLeft < target ? 5 : -5; //判断前进后退            var result = target - obj.offsetLeft ; // 差值不会超过5            if (Math.abs(result) <= 5) {                clearInterval(obj.timer); //差值小于5 ，到了位置                obj.style.left = target + "px";  //直接跳转到target位置            }            obj.style.left = obj.offsetLeft + speed + "px";        }    }</script>

3. /* 动画函数封装后可以应用到其他盒子上 */

完整代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        #box {            position: absolute;            width: 100px;            height: 100px;            background-color: pink;        }        #box1 {            position: absolute;            top: 150px;            width: 200px;            height: 200px;            background-color: purple;        }    </style></head><body><button id="btn200">200</button><button id="btn400">400</button><div id="box"></div><div id="box1"></div></body></html><script>    var box = document.getElementById("box");    var box1 = document.getElementById("box1");    var btn200 = document.getElementById("btn200");    var btn400 = document.getElementById("btn400");    btn200.onclick = function() {        animate(box,200);        animate(box1,500);    }    btn400.onclick = function() {        animate(box,400);    }    //  封装匀速运动    function animate(obj,target){        clearInterval(obj.timer);  // 先清除定时器        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)    }</script>

12. 轮播图动画

0 0