目录
- 一、JavaScript入门
- 1 - JavaScript简介
- 2 - JavaScript嵌入页面的方式
- 3 - 变量、数据类型及基本语法规范
- 4 - 函数定义和调用
- 5 - 获取元素
- 6 - 操作元素
- 7 - 事件属性及匿名函数
- 8 - 条件语句
- 9 - 案例：聊天对话框
- 二、JavaScript进阶
- 1 - 数组及操作方法
- 2 - 循环
- 3 - 定时器
- 4 - 定时器制作动画经典案例
- 5 - 字符串处理
- 6 - JavaScript变量作用域
- 7 - 封闭函数
一、JavaScript入门
1 - JavaScript简介
- JavaScript介绍：JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的
- 前端三大块
- HTML：页面结构
- CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
- JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
2 - JavaScript嵌入页面的方式
- 三种嵌入页面的方式
- 行间事件（主要用于事件）：
<input type="button" name="" onclick="alert('ok！');"> - 页面script标签嵌入：
<script type="text/javascript"> alert('ok！'); </script> - 外部引入：
<script type="text/javascript" src="js/index.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 第三种页面引入JavaScript的方式：外链式 推荐使用 -->
<script src="js/hello.js"></script>
<!-- 第二种页面引入JavaScript的方式：内嵌式，部分推荐 -->
<script>
alert('hello world,again!');
</script>
</head>
<body>
<!-- 第一种页面引入JavaScript的方式：行间事件，不推荐使用 -->
<div onclick="alert('hello world!')">这是一个div</div>
</body>
</html>3 - 变量、数据类型及基本语法规范
- 定义变量：JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’
- 5种基本数据类型
- ①.number 数字类型
- ②.string 字符串类型
- ③.boolean 布尔类型 true 或 false
- ④.undefined类型，变量声明未初始化，它的值就是undefined
- ⑤.null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null（获取元素失败的时候会返回null）
- 1种复合类型：object
- 变量、函数、属性、函数参数命名规范
- ①.区分大小写
- ②.第一个字符必须是字母、下划线（_）或者美元符号（$）
- ③.其他字符可以是字母、下划线、美元符或数字
- 匈牙利命名风格
- 对象o Object 比如：oDiv
- 数组a Array 比如：aItems
- 字符串s String 比如：sUserName
- 整数i Integer 比如：iItemCount
- 布尔值b Boolean 比如：bIsComplete
- 浮点数f Float 比如：fPrice
- 函数fn Function 比如：fnHandler
- 正则表达式re RegExp 比如：reEmailCheck
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 单行注释
/*
多行
注释
*/
// 定义变量
/*
var iNum01 = 12;
var sTr = 'abc';
var bIsMove = true;
*/
var iNum01 = 12, sTr = 'abc', bIsMove = true;
// 变量声明但是没有初始化，它的值和类型都是undefined
var iNum02;
alert(iNum01);
alert(sTr);
alert(bIsMove);
alert(iNum02);
</script>
</head>
<body>
</body>
</html>4 - 函数定义和调用
- 变量与函数预解析：JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 函数调用,函数在下面定义，在上面调用，这个叫做函数的预解析
fnMyalert();
// 定义函数
function fnMyalert() {
alert('hello!'); // hello
}
// 变量在下面定义，在上面调用，变量的值是undefined,这个叫做变量的预解析
alert(iNum01); // undefined，不会报错
var iNum01 = 12;
alert(iNum01); // 12
</script>
</head>
<body>
</body>
</html>- 函数传参与return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 定义可以传参的函数
function fnAdd(iNum01, iNum02) {
var iRs = iNum01 + iNum02;
//alert(iRs);
}
function fnAdd2(iNum01, iNum02) {
var iRs = iNum01 + iNum02;
alert(iNum01);
return iRs; // return 在这一句返回值之后，就结束了函数的运行，它下面的语句不会执行
//return; 只写一个return，表示在这一句结束函数的运行，但是不返回值
alert(iNum02);
}
// 调用传参的函数
var iRs2 = fnAdd(10, 5); // 函数没有返回值，得到的值是undefined
var iRs3 = fnAdd2(20, 5);
//alert(iRs2);
alert(iRs3);
</script>
</head>
<body>
</body>
</html>5 - 获取元素
- 获取元素方法：使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>- 加载顺序问题上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种
- 将javascript放到页面最下边
- 将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了
- 将javascript放到页面最下边
....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>- window.onload
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>- 案例：获取元素后，修改元素的颜色、高度、宽度、背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 当整个页面加载完之后，再执行大括号里面的代码
window.onload = function () {
var oDiv = document.getElementById('div01');
oDiv.style.color = 'blue';
oDiv.style.width = '300px';
oDiv.style.height = '300px';
oDiv.style.background = 'gold';
}
</script>
</head>
<body>
<div id="div01">这是一个div元素</div>
</body>
</html>6 - 操作元素
- 操作元素属性
- var 变量 = 元素.属性名 读取属性
- 元素.属性名 = 新属性值 改写属性
- 属性名在js中的写法
- html的属性和js里面属性写法一样
- “class” 属性写成 “className”
- “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
- innerHTML：innerHTML可以读取或者写入标签包裹的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.sty01 {
color: red;
font-size: 20px;
}
.sty02 {
color: pink;
font-size: 30px;
text-decoration: none;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div01');
var oA = document.getElementById('link01');
// 读取属性值
var sId = oDiv.id;
//alert(sId);
// 写属性值，也叫作设置属性值
oDiv.style.color = 'red';
// 属性名称中带“-”的，要写成驼峰式
oDiv.style.fontSize = '30px';
// 设置class属性值,class属性名称需要写成className
oA.className = 'sty02';
// 操作元素包裹的内容
// 读取包裹的内容
var sTr = oDiv.innerHTML;
//alert(sTr);
// 写元素包裹的内容
oDiv.innerHTML = '改变的文字';
oDiv.innerHTML = '<a href="http://www.baidu.com">百度网</a>';
oDiv.innerHTML = '<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>'
}
</script>
</head>
<body>
<div id="div01">这是一个div</div>
<a href="#" class="sty01" id="link01">这是一个链接</a>
</body>
</html>7 - 事件属性及匿名函数
- 事件属性：元素上除了有样式，id等属性外，还有事件属性，常用的事件属性有鼠标点击事件属性(onclick)，鼠标移入事件属性(onmouseover),鼠标移出事件属性(onmouseout),将函数名称赋值给元素事件属性，可以将事件和函数关联起来
- 匿名函数：定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div01');
/*function fnChange(){
oDiv.style.width = '200px';
oDiv.style.height = '200px';
oDiv.style.background = 'gold';
}
//fnChange();
oBtn.onclick = fnChange; //不加括号，加括号是获取函数返回值
*/
// 上面两句可以改成下面匿名函数的形式：
oBtn.onclick = function () {
oDiv.style.width = '200px';
oDiv.style.height = '200px';
oDiv.style.background = 'gold';
};
}
</script>
</head>
<body>
<input type="button" value="改变样式" id="btn">
<div id="div01">这是一个div</div>
</body>
</html>- 案例：网页换肤（设置不同的css样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/skin01.css" id="link01">
<script>
window.onload = function () {
var oLink = document.getElementById('link01');
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
oBtn01.onclick = function () {
oLink.href = 'css/skin01.css';
}
oBtn02.onclick = function () {
oLink.href = 'css/skin02.css';
}
}
</script>
</head>
<body>
<h1>网页内容</h1>
<input type="button" value="皮肤一" id="btn01">
<input type="button" value="皮肤二" id="btn02">
</body>
</html>8 - 条件语句
- 条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var iNum01 = 12;
var sNum01 = '12';
/*if(iNum01==12){
alert('相等！')
}
else{
alert('不相等！');
}*/
// "==" 默认会将符号两边的变量转换成数字在进行对比，这个叫做隐式转换
if (sNum01 == 12) {
alert('相等！')
}
else {
alert('不相等！');
}
// "===" 不会转换符号两边的变量类型
if (sNum01 === 12) {
alert('相等！')
}
else {
alert('不相等！');
}
var iNow = 5;
if (iNow == 0) {
alert('休息');
}
else if (iNow == 1) {
alert('学习')
}
else if (iNow == 2) {
alert('学习')
}
else if (iNow == 3) {
alert('休息')
}
else {
alert('自习')
}
</script>
</head>
<body>
</body>
</html>9 - 案例：聊天对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.talk_con {
width: 600px;
height: 500px;
border: 1px solid #666;
margin: 50px auto 0;
background: #f9f9f9;
}
.talk_show {
width: 580px;
height: 420px;
border: 1px solid #666;
background: #fff;
margin: 10px auto 0;
overflow: auto;
}
.talk_input {
width: 580px;
margin: 10px auto 0;
}
.whotalk {
width: 80px;
height: 30px;
float: left;
outline: none;
}
.talk_word {
width: 420px;
height: 26px;
padding: 0px;
float: left;
margin-left: 10px;
outline: none;
text-indent: 10px;
}
.talk_sub {
width: 56px;
height: 30px;
float: left;
margin-left: 10px;
}
.atalk {
margin: 10px;
}
.atalk span {
display: inline-block;
background: #0181cc;
border-radius: 10px;
color: #fff;
padding: 5px 10px;
}
.btalk {
margin: 10px;
text-align: right;
}
.btalk span {
display: inline-block;
background: #ef8201;
border-radius: 10px;
color: #fff;
padding: 5px 10px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oWord = document.getElementById('words');
var oWho = document.getElementById('who');
var oTalk = document.getElementById('talkwords');
var oBtn = document.getElementById('talksub');
oBtn.onclick = function () {
// 获取下拉框的value属性值
var sVal01 = oWho.value;
// 获取单行文本输入框里面的内容
var sVal02 = oTalk.value;
// 清空输入框的内容
oTalk.value = '';
// 判断输入框是否为空
if (sVal02 == '') {
alert('请输入内容！');
return;
}
// 拼接结构的字符串
var sTr = '';
if (sVal01 == 0) {
sTr = '<div class="atalk"><span>A说：' + sVal02 + '</span></div>';
} else {
sTr = '<div class="btalk"><span>B说：' + sVal02 + '</span></div>';
}
// 将结构的字符串放到聊天记录的容器标签中
oWord.innerHTML = oWord.innerHTML + sTr;
}
}
</script>
</head>
<body>
<div class="talk_con">
<div class="talk_show" id="words">
<div class="atalk"><span>A说：吃饭了吗？</span></div>
<div class="btalk"><span>B说：还没呢，你呢？</span></div>
</div>
<div class="talk_input">
<select class="whotalk" id="who">
<option value="0">A说：</option>
<option value="1">B说：</option>
</select>
<input type="text" class="talk_word" id="talkwords">
<input type="button" value="发送" class="talk_sub" id="talksub">
</div>
</div>
</body>
</html>二、JavaScript进阶
1 - 数组及操作方法
- 定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];- 操作数组中数据的方法
- 获取数组的长度：aList.length;
- 用下标操作数组的某个数据：aList[0];
- join() 将数组成员通过一个分隔符合并成字符串（数组本身不会改变）
- push() 和 pop() 从数组最后增加成员或删除成员
- reverse() 将数组反转
- indexOf() 返回数组中元素第一次出现的索引值
- splice() 在数组中增加或删除成员
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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('e');
//alert(aList02);
// 删除数组最后一个成员
aList02.pop();
//alert(aList02);
// 将数组反转
aList02.reverse();
//alert(aList02);
// 获取某个成员在数组中第一次出现的索引值
var aList03 = ['a', 'b', 'c', 'd', 'a', 'b', 'c', 'd'];
var iPos = aList03.indexOf('c');
// 如果成员不存在，就返回-1
var iPos2 = aList03.indexOf('e');
//alert(iPos);
//alert(iPos2);
// 将数组通过某个字符串拼接处一个大的字符串返回
var sTr = aList03.join('-');
var sTr2 = aList03.join('');
//alert(sTr);
//alert(sTr2);
alert(aList03);
// 同时在数组中增加或删除成员
aList03.splice(4, 2);
alert(aList03); // a,b,c,d,c,d
aList03.splice(4, 2, 'e', 'f', 'g');
alert(aList03);
</script>
</head>
<body>
</body>
</html>- 多维数组：
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;2 - 循环
- 批量操作数组中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var aList = ['a', 'b', 'c', 'd', 'e', 'f'];
var iLen = aList.length;
for (var i = 0; i < iLen; i++) {
alert(aList[i]);
}
</script>
</head>
<body>
</body>
</html>- 案例：数组去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var aList = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'a', 'b', 'c', 'd', 'e', 'f', 'g']
var aList2 = [];
for (var i = 0; i < aList.length; i++) {
if (aList.indexOf(aList[i]) == i) {
aList2.push(aList[i]);
}
}
alert(aList2)
</script>
</head>
<body>
</body>
</html>- 案例：将数组数据放到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.list {
width: 300px;
list-style: none;
padding: 0px;
margin: 50px auto;
}
.list li {
line-height: 50px;
border-bottom: 1px dotted black;
}
</style>
<script>
window.onload = function () {
var aList = ['碟中谍6', '红海', '古墓丽影3', '熊出没', '喜羊羊和灰太狼', '小猪佩奇']
var sTr = '';
var oUl = document.getElementById('list');
for (var i = 0; i < aList.length; i++) {
sTr += '<li>' + aList[i] + '</li>';
}
//alert(sTr);
oUl.innerHTML = sTr;
}
</script>
</head>
<body>
<ul class="list" id="list">
<!-- <li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li>
<li>电影名称排行</li> -->
</ul>
</body>
</html>3 - 定时器
- 定时器在javascript中的作用：定时调用函数、制作动画
- 定时器相关方法
- setTimeout 只执行一次的定时器
- clearTimeout 关闭只执行一次的定时器
- setInterval 反复执行的定时器
- clearInterval 关闭反复执行的定时器
- 创建定时器及关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function fnMyalert() {
alert('起床了！');
}
// 创建只执行一次的定时器,第一个参数是函数名称，第二个参数是间隔的时间，单位是毫秒，不用写单位
var timer01 = setTimeout(fnMyalert, 2000);
// 关闭只执行一次的定时器
clearTimeout(timer01);
// 创建反复执行的定时器
var timer02 = setInterval(fnMyalert, 2000);
// 关闭反复执行的定时器
clearInterval(timer02);
</script>
</head>
<body>
</body>
</html>4 - 定时器制作动画经典案例
- 案例：定时器制作移动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background: gold;
position: fixed;
top: 100px;
left: 0px;
}
</style>
<script>
window.onload = function () {
var oBox = document.getElementById('box');
var iLeft = 0;
var timer = setInterval(fnMove, 30);
function fnMove() {
iLeft += 3;
if (iLeft > 600) {
clearInterval(timer);
}
oBox.style.left = iLeft + 'px';
}
}
</script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>- 案例：定时器制作左右移动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background: gold;
position: fixed;
left: 0px;
top: 100px;
}
</style>
<script>
window.onload = function () {
var oBox = document.getElementById('box');
var iLeft = 0;
var iSpeed = 5;
var timer = setInterval(fnMove, 30);
function fnMove() {
iLeft += iSpeed;
if (iLeft > 600) {
iSpeed = -5;
}
if (iLeft < 0) {
iSpeed = 5;
}
oBox.style.left = iLeft + 'px';
}
}
</script>
</head>
<body>
<div class="box" id="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;
/* 样式的值如果是0，可以不写单位 */
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 oList = document.getElementById('list');
var oLeft = document.getElementById('btn01');
var oRight = document.getElementById('btn02');
var oSlide = document.getElementById('slide');
// 将ul中的5个li复制一份，成为10个li
oList.innerHTML = oList.innerHTML + oList.innerHTML;
var iLeft = 0;
var iSpeed = -3;
// 定义一个变量，来存储iSpeed上一次的值
var iLastSpeed = -3;
var timer = setInterval(fnMove, 30);
function fnMove() {
iLeft += iSpeed;
// 运动到最左边的时候
if (iLeft < -1000) {
iLeft = 0;
}
// 运动到最右边的时候，也就是起始位置
if (iLeft > 0) {
iLeft = -1000;
}
oList.style.left = iLeft + 'px';
}
// 左右箭头的点击事件
oLeft.onclick = function () {
iSpeed = -3;
}
oRight.onclick = function () {
iSpeed = 3;
}
// 给滚动的图片外面的容器标签做鼠标的移入移出事件
oSlide.onmouseover = function () {
//clearInterval(timer);
iLastSpeed = iSpeed;
iSpeed = 0;
}
oSlide.onmouseout = function () {
//timer = setInterval(fnMove,30);
iSpeed = iLastSpeed;
}
}
</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>5 - 字符串处理
- 字符串操作方法
- ①.字符串合并操作：“ + ”
- ②.parseInt() 将数字字符串转化为整数
- ③.parseFloat() 将数字字符串转化为小数
- ④.split() 把一个字符串分隔成字符串组成的数组
- ⑤.indexOf() 查找字符串是否含有某字符
- ⑥.substring() 截取字符串 用法： substring(start,end)（不包括end）
- ⑦.字符串反转reverse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var iNum01 = 12;
var iNum02 = 12.32;
var sNum01 = '12';
var sNum02 = '12.32'
// "+" 符号运算，如果符号两边都是数字，就做加法运算，如果有一边是字符串，就做字符串拼接
//alert(iNum01 + 10);
//alert(sNum01 + 10);
// 将整数的字符串转化为整数，用parseInt()方法
//alert( parseInt(sNum01) + 20 );
//alert( parseInt(sNum02) + 20 );
// 将小数的字符串转化为小数，用parseFloat() 方法
//alert( parseFloat(sNum02) + 20 );
// 将字符串分割成数组
var sTr = '2018-9-2';
var aList = sTr.split('-');
var aList2 = sTr.split('');
//alert(aList);
//alert(aList2);
// 获取某小段字符在大段字符里面第一次出现的索引值
var sTr2 = 'abcdef12345ghif1jkl';
var iPos = sTr2.indexOf('f1');
var iPos2 = sTr2.indexOf('i1');
//alert(iPos);
//alert(iPos2);
// 字符串切片
var sTr3 = sTr2.substring(6, 11);
// 写一个参数，表示从这个参数一直切割到字符串结尾
var sTr4 = sTr2.substring(6);
alert(sTr3);
alert(sTr4);
</script>
</head>
<body>
</body>
</html>6 - JavaScript变量作用域
- 全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问
- 局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问
- 注意： 函数内部，如果不用var来定义变量，那么这个变量会变成全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 定义全局变量
var iNum01 = 12;
function fnMyalert() {
// 定义局部变量
var iNum02 = 24;
// 函数内部调用全局变量
alert(iNum01);
// 函数内部调用局部变量
alert(iNum02);
// 在函数内部修改全局变量的值
iNum01 = 13;
// 函数内部，如果不用var来定义变量，那么这个变量会变成全局变量
iNum03 = 36;
alert(iNum01);
}
fnMyalert();
alert('函数外面调用iNum01: ' + iNum01);
alert('函数外面调用iNum03: ' + iNum03);
alert('函数外面调用iNum02: ' + iNum02); // 报错 Uncaught ReferenceError: iNum02 is not defined
</script>
</head>
<body>
</body>
</html>调试方法：在chrome中查看console打印日志
代码中调用：console.log(打印内容)通过标题栏来显示变量或对象：document.title = 'iNum01的值是：' + iNum01;断点调试方法：通过chrome浏览器调试工具的sources窗口，可以对外链的js文件进行断点调试
7 - 封闭函数
- 封闭函数：封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数
- 一般定义的函数和执行函数
function myalert(){
alert('hello!');
};
myalert();- 封闭函数
(function(){
alert('hello!');
})();- 还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
alert('hello!');
}()- 封闭函数的作用：封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全
- test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/touzi.js"></script>
<script src="js/tishi.js"></script>
<script>
fnTouzi();
</script>
</head>
<body>
</body>
</html>- touzi.js
function fnTouzi(){
alert('请输入投资金额：');
}- tishi.js
/*
function fnWrap(){
function fnTouzi(){
alert('亲，请关注我们的新产品！');
}
fnTouzi();
};
fnWrap();
*/
// 上面的写法fnWrap还可能重名，可以改写成下面封闭函数的形式：
// 一个分号表示一个空的js语句，是合法的。
;;;;;;
// 在代码前面加分号，是为了在代码压缩成一行时，前面的代码在最后没有加分号，导致代码出错！
/*;(function(){
function fnTouzi(){
alert('亲，请关注我们的新产品！');
}
fnTouzi();
})();
*/
// 封闭函数装高手的写法：
/*;!function(){
function fnTouzi(){
alert('亲，请关注我们的新产品！');
}
fnTouzi();
}();
*/
;~function(){
function fnTouzi(){
alert('亲，请关注我们的新产品！');
}
fnTouzi();
}();
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
