函数封装使用
-
先创建common.js文件
/* *作用:获取非行间样式和行间样式 *params elem 标签 *params attr String 样式名 */ function getStyle(elem,attr){ if(window.getComputedStyle){ //标准浏览器 return window.getComputedStyle(elem)[attr]; }else{//IE低版本浏览器 return elem.currentStyle[attr]; } }
-
在页面中使用
<script src="./common.js"></script> <body> <div style="color: red;font-size: 20px;"></div> <script> console.log(getStyle) var oDiv = document.getElementsByTagName("div")[0] var a = getStyle(oDiv, "color"); console.log(a); var b = getStyle(oDiv, "fontSize"); console.log(b); </script> </body>
2.小鸟起飞案例
==js中如果涉及到元素移动 建议大家使用定位==
2.1开始起飞(从左往右飞)
-
实现步骤
-
点击按钮 改变img的left值
-
left值 = 在当前left值的基础上 + 10
-
开启定时器 自动移动图片位置
-
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./common.js"></script> <style> * { margin: 0; padding: 0; } img { width: 200px; height: 200px; position: absolute; left: 0px; } </style> </head> <body> <button>开始飞</button> <br> <img src="./img/right.gif" alt=""> <script> // 1.点击一下 向右移动10px var btn = document.getElementsByTagName("button")[0]; var oImg = document.getElementsByTagName("img")[0]; // 2.点击事件 btn.onclick = function () { setInterval(function () { // 在left值的基础上+10 先获取到left值 var current = parseInt(getStyle(oImg, "left")) + 10 oImg.style.left = current + "px"; }, 50) } </script> </body>
-
问题1 一直飞 飞出屏幕
-
解决: 限制飞的范围 当飞到1000px的手 停止定时器
-
// 2.点击事件 btn.onclick = function () { var timer = setInterval(function () { // 在left值的基础上+10 先获取到left值 var current = parseInt(getStyle(oImg, "left")) + 10 if(current>=1000){ current = 1000; // 停止定时器 clearInterval(timer) } console.log(current); oImg.style.left = current + "px"; }, 50) }
-
问题2 多次点击 速度越来愉快
-
分析原因: 每次点击都会定义一个定时器 多次点击会导致定时器累加 会累加执行
-
解决方法:每次点击的时候 先把原先的定时器清除掉
-
<script> // 1.点击一下 向右移动10px var btn = document.getElementsByTagName("button")[0]; var oImg = document.getElementsByTagName("img")[0]; var timer; // 2.点击事件 btn.onclick = function () { clearInterval(timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉 timer = setInterval(function () { // 在left值的基础上+10 先获取到left值 var current = parseInt(getStyle(oImg, "left")) + 10 if(current>=1000){ current = 1000; // 停止定时器 clearInterval(timer) } console.log(current); oImg.style.left = current + "px"; }, 50) } </script>
2.2来回飞(从右往左飞)
-
实现步骤
-
在left值的基础上 -10
-
-
问题1:解决目标值的问题 飞到0就停止
// 2.往回飞 btn[1].onclick = function () { // 改变图片的路径 oImg.src = "./img/left.gif"; timer = setInterval(function () { // 在当前left值的基础上-10 var current = parseInt(getStyle(oImg, "left")) - 10; //判断目标值 if(current<=0){ current=0; clearInterval(timer); } oImg.style.left = current + "px" }, 50) }
-
问题1 如果点击开始起飞 但是飞到一半就返回 和越飞越快的问题
-
解决方法 让开始起飞和结束起飞共用一个定时器 每次点击的时候 都清除定时器
<script> // 1.点击一下 向右移动10px var btn = document.getElementsByTagName("button"); var oImg = document.getElementsByTagName("img")[0]; var timer; // 2.开始飞 btn[0].onclick = function () { // 改变图片路径 oImg.src = "./img/right.gif"; clearInterval(timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉 timer = setInterval(function () { // 在left值的基础上+10 先获取到left值 var current = parseInt(getStyle(oImg, "left")) + 10 if (current >= 1000) { current = 1000; // 停止定时器 clearInterval(timer) } console.log(current); oImg.style.left = current + "px"; }, 50) } // 2.往回飞 btn[1].onclick = function () { // 改变图片的路径 oImg.src = "./img/left.gif"; clearInterval(timer); timer = setInterval(function () { // 在当前left值的基础上-10 var current = parseInt(getStyle(oImg, "left")) - 10 if(current<=0){ current=0; clearInterval(timer); } oImg.style.left = current + "px" }, 50) } </script>
2.3小鸟起飞函数封装
2.3.1基础封装
<body> <button>开始飞</button> <button>往回飞</button> <br> <img src="./img/right.gif" alt=""> <script> // 1.点击一下 向右移动10px var btn = document.getElementsByTagName("button"); var oImg = document.getElementsByTagName("img")[0]; var timer; // 2.开始飞 btn[0].onclick = function () { // 改变图片路径 oImg.src = "./img/right.gif"; move(oImg, "left", 10, 1000) } // 2.往回飞 btn[1].onclick = function () { // 改变图片的路径 oImg.src = "./img/left.gif"; move(oImg, "left", -10, 0) } // 3.基础封装 /* 封装的步骤 1.先声明一个函数 将主要代码放入到函数中 2.找函数中可变的值 作为函数参数代入到函数中 3.调用调试 */ function move(elem, attr, step, target) { /* elem 操作的元素 attr 属性 step 步长 可以是正数 也可以是负数 + 10 + -10 target 目标值 */ clearInterval(timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉 timer = setInterval(function () { // 在left值的基础上+10 先获取到left值 var current = parseInt(getStyle(elem, attr)) + step if(current>=target){ current = target; // 停止定时器 clearInterval(timer) } console.log(current); elem.style[attr] = current + "px"; }, 50) } </script> </body>
2.3.2解决目标值
-
问题1:目标值问题
-
分析原因
-
开始飞 if (current >= target)
-
往回飞 if (current <= target)
-
-
解决方法:根据step判断
-
开始飞 step 10 > 0
-
往回飞 step 10 < 0
-
-
<body> <button>开始飞</button> <button>往回飞</button> <br> <img src="./img/right.gif" alt=""> <script> // 1.点击一下 向右移动10px var btn = document.getElementsByTagName("button"); var oImg = document.getElementsByTagName("img")[0]; var timer; // 2.开始飞 btn[0].onclick = function () { // 改变图片路径 oImg.src = "./img/right.gif"; move(oImg, "left", 10, 1000) } // 2.往回飞 btn[1].onclick = function () { // 改变图片的路径 oImg.src = "./img/left.gif"; move(oImg, "left", -10, 0) } /* 问题1:目标值问题 分析原因 开始飞 if (current >= target) 往回飞 if (current <= target) 解决方法 根据step判断 开始飞 step 10 > 0 往回飞 step 10 < 0 */ function move(elem, attr, step, target) { /* elem 移动的元素 attr 改变的属性 step步长 可以是正数也可以是负数 target目标值 */ clearInterval(timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉 timer = setInterval(function () { // 在left值的基础上+10 先获取到left值 var current = parseInt(getStyle(elem, attr)) + step if (step > 0 && current >= target) { current = target; // 停止定时器 clearInterval(timer) } else if (step < 0 && current <= target) { current = target; clearInterval(timer); } elem.style[attr] = current + "px"; }, 50) } </script> </body>
2.3.3解决step正负数问题
-
问题2:用户不考虑step正负数的问题
-
解决方法:判断current值和target值 current target
-
开始飞 0 < 1000 +step
-
往回飞 1000 > 0 - step
-
-
<body> <button>开始飞</button> <button>往回飞</button> <br> <img src="./img/right.gif" alt=""> <script> // 1.点击一下 向右移动10px var btn = document.getElementsByTagName("button"); var oImg = document.getElementsByTagName("img")[0]; var timer; // 2.开始飞 btn[0].onclick = function () { // 改变图片路径 oImg.src = "./img/right.gif"; move(oImg, "left", 10, 1000) } // 2.往回飞 btn[1].onclick = function () { // 改变图片的路径 oImg.src = "./img/left.gif"; move(oImg, "left", 10, 0) } /* 问题1:目标值问题 分析原因 开始飞 if (current >= target) 往回飞 if (current <= target) 解决方法 根据step判断 开始飞 step 10 > 0 往回飞 step 10 < 0 */ /* 问题2:用户不考虑step正负数的问题 解决方法 current target 开始飞 0 < 1000 +step 往回飞 1000 > 0 -step */ function move(elem, attr, step, target) { /* elem 移动的元素 attr 改变的属性 step步长 可以是正数也可以是负数 target目标值 */ //解决步长 step = parseInt( getStyle(elem,attr) ) < target ? step:-step clearInterval(timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉 timer = setInterval(function () { // 在left值的基础上+10 先获取到left值 var current = parseInt(getStyle(elem, attr)) + step //解决目标值 if (step > 0 && current >= target) { current = target; // 停止定时器 clearInterval(timer) } else if (step < 0 && current <= target) { current = target; clearInterval(timer); } elem.style[attr] = current + "px"; }, 50) } </script> </body>
2.3.4函数封装最终版
-
common.js
/* *author 朱银娟 *作用 让样式运动 * params elem 标签 * params attr string类型 样式名 * params step numbre类型 步长 * params target number类型 目标值 */ function move(elem, attr, step, target) { /* elem 移动的元素 attr 改变的属性 step步长 可以是正数也可以是负数 target目标值 */ step = parseInt( getStyle(elem,attr) ) < target ? step:-step clearInterval(elem.timer);// timer这里存储的就是定时器id 先把原先的定时器清除掉 elem.timer = setInterval(function () { //将定时器id存储到标签的自定义属性timer上 // 在left值的基础上+10 先获取到left值 var current = parseInt(getStyle(elem, attr)) + step if (step > 0 && current >= target) { current = target; // 停止定时器 clearInterval(elem.timer) } else if (step < 0 && current <= target) { current = target; clearInterval(elem.timer); } elem.style[attr] = current + "px"; }, 50) }
-
在页面中使用
<script> var btn = document.getElementsByTagName("button")[0]; var oDiv = document.getElementsByTagName("div")[0]; btn.onclick = function(){ // move(oDiv,"width",20,500); move(oDiv,"height",10,100); } </script>