1.函数封装使用
-
先创建common.js文件
/*
*author:朱银娟
*作用:获取非行间样式和行间样式
*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>
3.轮播图
3.1轮播图-交互
-
问题1 最后一张切换到第一张的时候 会倒着移动
-
分析原因：最后一张图到第一张图 是left值-2400px 到 0px的过程 就有倒叙效果
-
解决方法：在最后再添加第一张图片 给用户造成视觉差
-
-
问题2:最后一张图片的指示点对应不上
-
分析原因： n = 4 oSpan[4]不存在
-
解决方法：n=4是第一张图片 让oSpan[0]设置背景色
-
<script>
// 1.自动切换 定时器
var list = document.getElementsByClassName("list")[0];
var oSpan = document.getElementsByTagName("span");
var oBox = document.getElementsByClassName("box")[0];
var timer = setInterval(auto, 1000);
var n = 0;
function auto() {
// 显示第一张 left -800px*0
// 显示第二张 left -800px*1
// 显示第三张 left -800px*2
// 显示第四张 left -800px*3
// 显示第一张 left -800px*4
n++;
if (n > 4) {
list.style.left = "0px";
n = 1;
}
move(list, "left", 100, -800 * n);
/*
问题1 最后一张切换到第一张的时候 会倒着移动
解决方法：在最后再添加第一张图片 给用户造成视觉差
*/
// 改变指示点颜色
for (var i = 0; i < oSpan.length; i++) {
oSpan[i].style.backgroundColor = "#fff";
}
/*
问题2:最后一张图片的指示点对应不上
分析原因：n = 4 oSpan[4]不存在
解决方法：n=4是第一张图片 让第一个指示显示
*/
if (n == 4) {
oSpan[0].style.backgroundColor = "red"
} else {// n= 1 2 3 让对应span显示红色背景
// 第一张图 oSpan[0] 第二章图 oSpan[1]
oSpan[n].style.backgroundColor = "red";
}
}
// 2.划入盒子 停止图片切换
oBox.onmouseover = function () {
clearInterval(timer);
}
// 3.滑出盒子 开启图片切换
oBox.onmouseout = function () {
timer = setInterval(auto, 1000)
}
// 4.点击左箭头 切换图片
// 5.点击右箭头 切换图片
// 6.点击指示点 切换图片
</script>
4. 对象概念
-
对象： 在JS中万物皆对象，可以将对象分为“内部对象”、“宿主对象”和“自定义对象”三种。
-
本地对象「内部对象」：JS中的内部对象包括Array、Boolean、Date、Function、Global、 Math、Number、Object、RegExp、String，Error对象， 其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。
-
宿主对象：宿主对象就是执行JS脚本的环境提供的对象，就是浏览器提供的对象，如window和document
-
自定义对象
-
-
API
-
API，全称Application Programming Interface，即应用程序编程接口。说白了就是别人提供好的函数，但是这些函数都是封装好的，固定功能的，可以直接调用实现功能的。 例如遥控器，不同的按键不同的功能，都是提前定义好的
-
5.Math对象
5.1 取整
-
parseInt 强制转换Number类型 从左往右开始转换 遇到不能转换的或者末尾结束 如果一开始就不能转换则是NaN 结果取整
-
Math.floor 向下取整 舍弃小数部分
-
Math.ceil 向上取整 有小数就进位
-
Math.round 四舍五入 取整
<script>
// 1.Math对象 是内置对象 不需要实例化即可使用
console.log(Math);
// 2.取整
// parseInt 强制转换Number类型 从左往右开始转换 遇到不能转换的或者末尾结束 如果一开始就不能转换则是NaN 结果取整
console.log(parseInt("123px"));//123
console.log(parseInt("10.5px"));//10
console.log(parseInt("adc123"));//NaN
// Math.floor 向下取整 舍弃小数部分
console.log(Math.floor(10.5));// 10
console.log(Math.floor(10.9));// 10
console.log(Math.floor(3.9999999));// 10
console.log(Math.floor(3.000000000001));// 10
// Math.ceil 向上取整 有小数就进位
console.log(Math.ceil(10.5));//11
console.log(Math.ceil(10.1));//11
console.log(Math.ceil(3.9999999));//4
console.log(Math.ceil(3.00000001));//4
// Math.round 四舍五入 取整
console.log(Math.round(3.4)); //3
console.log(Math.round(3.5));// 4
console.log(Math.round(3.00000001));//3
console.log(Math.round(3.09999001));//3
</script>
5.2 数学方法
-
Math.max(数值1,数值2......) 找序列中最大的值
-
Math.min(数值1,数值2......) 找序列中最小的值
-
Math.abs( ) 取绝对值
-
Math.sqrt( ) 开根号
-
Math.pow(num,n) 次方幂 num底数 n n次幂
// 1.数学方法 // Math.max(数值1,数值2......) 找序列中最大的值 console.log(Math.max(1,2,3,4,5));//5 // Math.min(数值1,数值2......) 找序列中最小的值 console.log(Math.min(1,2,3,4,5));//1 // Math.abs 取绝对值 console.log(Math.abs(-10));// 10 // Math.sqrt() 开根号 console.log(Math.sqrt(9));//3 console.log(Math.sqrt(81));//9 // Math.pow(num,n) 次方幂 num底数 n n次幂 console.log(Math.pow(2,10));// 1024 console.log(Math.pow(10,2));// 100
5.3 随机数
-
Math.random() 随机生成0-1之间的数 包括0 不包括1
-
公式 生成min到max之间的随机数
-
Math.random() * (max-min+1) + min
-
<script> var a = Math.random(); //随机0-1之间的数 console.log(a); //1. 随机1-10之间的数据 Math.random() * (max-min+1) + min var b = Math.floor( Math.random() * 10 + 1 ) // [1 11] console.log(b);
-
随机抽奖
// 2.随机抽奖 var arr = ["玛莎拉蒂","宾利","北京2套房","上海汤臣一品","十月一能买到车票回家"] // 0-4(arr.length-1) 求0到arr.length-1之间的随机数 var index =Math.floor( Math.random() * (arr.length-1-0+1) + 0 ); console.log(arr[index]) </script>
6.面试题
1-js的对象分为哪几类，每类对象分别都有什么? 2-随机生成min到max的正数 3-必须掌握获取非行间样式 4-必须掌握函数样式move
扫一扫
3361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
