11.8 js 再提高
- 循环
- 数组常用操作方法
- 工作场景实例
- 字符串及操作
- 定时器demo
- 补充知识点:变量作用域 调bug 封闭函数
1.循环for while
循环目的就是遍历,重复执行
for循环相比较更方便,因为while可能会忘记写增量,工作部署中会导致服务器宕机,下面给出语法规则:
while和for与c语言里用法一样
<script>
// 设定初始值
var i =0
while(i<3)
{
alert('while')
//增量
//i += 1 i-=1 i--
i++
}
//for(初始值;条件;增量){} 和c语言一样
for(i=0;i<5;i++)
{
alert('while')
}
</script>
2.数组及操作方法
数组用于存储数据,相比变量,变量一次只能存一个,数组可以存多个。就像python中的列表
//var xx= 值
var arrNum = new Arrar(10, 20, 30, 'aaa')//用函数声明数组,可以存不同数据类型,尽量避免
常用创建方法;
var arr2 = [10, 20, 30, 40, 'abc']
相比而言,就是python里的列表
例如取哪个数组的哪个下标就是 arr2[2]
取长度, arr2.length
结尾添加arr2.push()
arr2.push('jka')
结尾删除pop
arr2.pop()
splice任意位置删除,添加
arr2.splice(位置下标,删除个数,添加的数据)
join(‘分割符号’)分割数组为字符串
数组反转 .reverse()
返回下标(返回这个数据第一次出现的下标)
arr2.indexOf(20)
前添加unshift 前删除shift
3.小demo
数组数据写入页面
获取元素,定义变量,拼接填充,innerHTML写入
4.数组去重
看数组的所有数据,如果是没有重复的,放到newArr中
重复,indexOf的下标与遍历的下标不相等
var arr = [10, 20, ...]
var newArr = []
for(var i=0;i<arr.length;i++)
{
if(arr.indeOf(arr[i]) == i)
{
newArr.push(arr[i])
}
}
5.调bug的方法
浏览器检查,console,有报错信息,有错误行
alert显示会断点,阻挡程序执行,我们可以改成console.log转化到日志输出,输出到控制台
document.title会让标题栏改变
6.字符串的操作方法
- parseInt(str字符串) 转化为整型
- parseFloat() 保留小数
- substring(开始下标,结束下标) 截取字符串,不包含结束位
- split(‘分割符’) 分割为数组
7.定时器
控制命令重复执行,用自己的延迟时间控制命令是否重复执行
单次定时器:用时间控制命令执行一次
多次循环定时器:用时间控制命令多次执行
//单次setTimeout()
//多次setInterval()
//函数都有相同的两个参数
参数1:命令-- 1.匿名函数形式 2.函数名形式
参数2;延迟时间,毫秒为单位
停止定时器clearInterval(定时器名字)
clearTimeout
var oTimer=null//定时器是对象型数据类型
oBtn1.onclick = function(){
setTime(function(){
alert('单次')
},2000)
}
funtion aa(){
alert('多次')
}
oBtn2.onclick= function(){
oTimer = setInterval(aa,2000)
}
oBtn3.onclick = function(){
clearInterval(oTimer)
oTimer = null//因为定时器里还有很多命令,为了释放浏览器缓存,将oTimer清空不保存
}
8.标签位移原理
用position absolute或者fiexd不定位
window.onload = function(){
var oBox = document.getElementById('box')
var num = 0;
var speed = 5;
setInterval(fnMove,30)
function fnMove(){
num += speed
if (num >600)
{
speed = -5
}
if (num <0)
{
speed = 5
}
oBox.style.left = num+'px'
}
}
9.轮播图无缝滚动实现
循环的滚动
复制一份整体的备份
在一边走到头的时候,快要留白,立马切换到重开始,就是left=0
注意的是要定时器的命名,定时器要记得清除