JavaScript高级
1. 数组及操作方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 创建数组的第一种方式：
var aList01 = new Array(1, 2, 3);
// 创建数组的第二种方式：
var aList02 = ['a', 'b', 'c', 'd'];
// 获取数组成员的个数
var iLen = aList02.length;
// alert(iLen);
// 操作数组的某个成员，用下标
// alert(aList02[2]);
// 在数组后面增加成员
// aList02.push('d');
// alert(aList02);
// 删除数组的最后一个成员
// aList02.pop();
// 将数组反转
// aList02.reverse();
// alert(aList02);
// 返回某个元素第一次出现的索引值
var aList03 = ['a', 'b', 'c', 'd', 'a', 'b', 'c'];
var iPos = aList02.indexOf('c');
// alert(iPos);
var iPos2 = aList03.indexOf(1); // 不存在的成员返回-1
// alert(iPos2);
// 同时在数组中增加或删除成员
alert(aList03);
aList03.splice(4, 2); // a,b,c,d,c
alert(aList03);
aList03.splice(4, 1, 'e', 'f', 'g'); // a,b,c,d,e,f,g
alert(aList03);
// 将数组拼接返回一个字符串
var sTr = aList03.join('-'); // a-b-c-d-e-f-g
alert(sTr);
// 使用空字符串join，直接将数组连成字符串
var sTr2 = aList03.join('');
alert(sTr2);
// 二维数组
var aList04 = [[1, 2, 3], ['a', 'b', 'c']];
alert(aList04[0][1]);
</script>
</head>
<body>
</body>
</html>
2. 循环语句
eg：将数组中的数据放入页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list{
list-style: none;
width: 300px;
padding: 0px;
margin: 50px auto 0px;
}
.list li{
line-height: 60px;
border-bottom: 1px dotted black;
}
</style>
<script>
window.onload = function(){
var alist = ['海王', '毒液', '复仇者联盟4', '变形金刚5', '碟中谍6', '战狼3'];
var oUl = document.getElementById("list");
var sTr = "";
for(var i=0; i<alist.length; i++){
sTr += "<li>"+alist[i]+"</li>";
}
// alert(sTr);
// 将sTr放进去
oUl.innerHTML = sTr;
}
</script>
</head>
<body>
<ui class="list" id="list">
<!-- <li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li> -->
</ui>
</body>
</html>
3. 定时器
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
参数1：调用的函数
参数2：定时时间ms
- 左右移动动画实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height : 200px;
background: gold;
position: fixed;
left: 0px;
top: 100px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("div01");
var iLeft = 0;
var oTimer = setInterval(fnMove, 30);
var iSpeed = 2;
function fnMove(){
iLeft += iSpeed;
if(iLeft>=600 || iLeft<=0){
iSpeed *= -1;
}
oDiv.style.left = iLeft+'px';
}
}
</script>
</head>
<body>
<div id="div01" class="box"></div>
</body>
</html>
- 无缝滚动
- 定时器
- 鼠标移入移出事件
- 鼠标点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul{
margin:0;
padding:0;
}
.list_con{
width:1000px;
height:200px;
border:1px solid #000;
margin:10px auto 0;
background-color:#f0f0f0;
position:relative;
overflow:hidden;
}
.list_con ul{
list-style:none;
width:2000px;
height:200px;
position:absolute;
left:0;
top:0;
}
.list_con li{
width:180px;
height:180px;
float:left;
margin:10px;
}
.btns_con{
width:1000px;
height:30px;
margin:50px auto 0;
position:relative;
}
.left,.right{
width:30px;
height:30px;
background-color:gold;
position:absolute;
left:-40px;
top:124px;
font-size:30px;
line-height:30px;
color:#000;
font-family: 'Arial';
text-align:center;
cursor:pointer;
border-radius:15px;
opacity:0.5;
}
.right{
left:1010px;
top:124px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('list');
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
var oSlide = document.getElementById('slide');
// 将ul中的5个li赋值成10个li
oUl.innerHTML += oUl.innerHTML;
// alert(oUl.innerHTML);
var iLeft = 0;
var iSpeed = -3;
var oTimer = setInterval(fnMove, 30);
function fnMove(){
iLeft += iSpeed;
// 当移动到最左边的时候
if(iLeft<-1000){
iLeft = 0;
}
// 当移动到最右边的时候
if(iLeft>0){
iLeft = -1000;
}
oUl.style.left = iLeft + 'px';
}
oBtn01.onclick = function(){
iSpeed = -3;
}
oBtn02.onclick = function(){
iSpeed = 3;
}
// 鼠标移入事件
oSlide.onmouseover = function(){
clearTimeout(oTimer);
}
// 鼠标移出事件
oSlide.onmouseout = function(){
oTimer = setInterval(fnMove, 30);
}
}
</script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul id="list">
<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
</ul>
</div>
</body>
</html>
4. 字符串操作
+字符串拼接：当符号左右两边都是数字，做数字变量的相加，如果两边一个是数字一个是字符串，那么就做字符串拼接，返回结果是一个字符串。- parseInt() 将数字字符串转化为整数
- parseFloat() 将数字字符串转化为小数
- split() 把一个字符串分隔成字符串组成的数组
- indexOf() 查找字符串是否含有某字符
- substring() 截取字符串 用法： substring(start,end)（不包括end）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var iNum01 = 12;
var sNum01 = '12';
var sNum02 = '12.34';
// alert(iNum01+sNum01); 1212
// alert(parseInt('123'));
// 将整数的字符串转换成整数用parseInt
// alert(parseInt(sNum01)+10);
// alert(parseFloat(sNum02)+10)
// 将字符串分割返回一个数组
var sTr = '2021-01-20';
var aList = sTr.split('-'); // 2021,01,20
// alert(aList);
// 获取某一小段字符串在大段字符串里面第一次出现的索引值
var sTr2 = 'abcdef123ijkl12m';
var iPos = sTr2.indexOf('12'); // 6
var iPos2 = sTr2.indexOf('124'); // 如果没有这段字符串返回-1
// alert(iPos);
// alert(iPos2);
// 字符串切片
var sTr3 = sTr2.substring(6, 9); // 参数:start-end 不包括end
var sTr3 = sTr2.substring(6); // 从start-末尾
// alert(sTr3);
// alert(sTr4);
// 字符串反转
// 从字符串转数组，使用数组的反转方法，将数组转字符串
var sTr4 = 'abcde';
var sTr5 = sTr4.split('').reverse().join('');
alert(sTr5);
</script>
</head>
<body>
</body>
</html>
5. 变量的作用域
注意：在函数内部给一个不存在的变量赋值，不加var关键字，这个语句是一个全局变量声明，这个变量在函数外部可访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 定义全局变量
var iNum01 = 12;
// alert(iNum01);
function fnMyalert(){
// 定义局部变量
var iNum02 = 24;
// 函数内部访问全局变量
alert('函数内部弹出iNum01:'+iNum01);
// 函数内部访问局部变量
alert('函数内部弹出iNum02:'+iNum02);
// 在函数内部修改全局变量
iNum01 = 13;
alert('在函数内部弹出iiNum01:'+iNum01);
// 在函数内部给一个不存在的变量赋值，不加var关键字，这个语句是一个全局变量声明，这个变量在函数外部可访问
iNum03 = 36;
}
fnMyalert();
alert('函数外部弹出iNum01:'+iNum01);
// alert('函数外部弹出iNum02:'+iNum02); // 报错，局部变量不能在其作用域外访问，这行会报错
alert('函数外部弹出iNum03:'+iNum03)
</script>
</head>
<body>
</body>
</html>
6. 调试程序的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var iNum01 = 12;
var iNum02 = 24;
var sTr = 'a, b, c';
var aList = ['a', 'b', 'c'];
// 打印显示变量的值
// alert(iNum01);
// console选项里面可以显示类型
console.log(sTr);
console.log(aList);
// 将变量或对象显示在标题栏上
document.title = 'iNum01的值：'+iNum01;
</script>
</head>
<body>
</body>
</html>
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
