JavaScript相关操作
JavaScript介绍
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的。
前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
JavaScript嵌入页面的方式
1、行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
2、页面script标签嵌入
<script type="text/javascript">
alert('ok！');
script>
3、外部引入
<script type="text/javascript" src="js/index.js">script>
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<script src="js/hello.js">script>
<script>
alert('hello world,again!');
script>
head>
<body>
<div onclick="alert('hello world!')">这是一个divdiv>
body>
html>
js/hello.js
alert('hello world,again and again!')
变量、数据类型及基本语法规范
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’
var iNum = 123;
var sTr = 'asd';
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var iNum = 45,sTr='qwe',sCount='68';
变量类型
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
1种复合类型：
object
javascript语句与注释
1、javascript语句开始可缩进也可不缩进，缩进是为了方便代码阅读，一条javascript语句应该以“;”结尾;
<script type="text/javascript">
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
alert(sTr);
};
fnAlert();
</script>
2、javascript注释
<script type="text/javascript">
// 单行注释
var iNum = 123;
/*
多行注释
1、...
2、...
*/
var sTr = 'abc123';
</script>
变量、函数、属性、函数参数命名规范
1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字
匈牙利命名风格：
对象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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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); //undefined
</script>
</head>
<body>
</body>
</html>
函数
函数就是重复执行的代码片。
函数定义与执行
<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
// 函数执行
fnAlert();
</script>
变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<script type="text/javascript">
fnAlert(); // 弹出 hello！
alert(iNum); // 弹出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>
示例
<!DOCTYPE html>
<html lang="en">
<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>
//函数调用 函数在下面定义，在上面调用，这个叫做函数的预解析
fnMyalert();
//定义函数
function fnMyalert(){
alert('hello!');
}
//变量在下面定义，在上面调用，变量的值是undefined,这个叫做变量的预解析
alert(iNum01);
var iNum01 = 12;
alert(iNum01);
</script>
</head>
<body>
</body>
</html>
函数传参 javascript的函数中可以传递参数。
<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>
函数’return’关键字
函数中’return’关键字的作用：
1、返回函数中的值或者对象
2、结束函数的运行
<script type="text/javascript">
function fnAdd(iNum01,iNum02){
var iRs = iNum01 + iNum02;
return iRs;
alert('here!');
}
var iCount = fnAdd(3,4);
alert(iCount); //弹出7
</script>
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<script>
//定义可以传参的函数
function fnAdd(isNum01,isNum02) {
var iRs = isNum01+isNum02;
// alert(iRs);
}
function fnAdd2(isNum01,isNum02) {
var iRs = isNum01+isNum02;
alert(isNum01)
return iRs; // return 在这一句返回值之后，就结束了函数的运行，它下面的语句不会执行
//return; 只写一个return，表示在这一句结束函数的运行，但是不返回值
alert(isNum02);
}
//调用传参的函数
// 函数没有返回值，得到的值是undefined
var iRs2 = fnAdd(10,5);
// alert(iRs2);//undefined
var iRs3 = fnAdd2(10,5);
alert(iRs3);
script>
head>
<body>
body>
html>
获取元素方法
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>
上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：
第一种方法：将javascript放到页面最下边
....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
第二种方法：将javascript语句放到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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
操作元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作元素属性
var 变量 = 元素.属性名 读取属性
元素.属性名 = 新属性值 改写属性
属性名在js中的写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
// 写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = sValue;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">chengpeng</a>
innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var sTxt = oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML = '传智播客';
}
</script>
......
<div id="div1">这是一个div元素</div>
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<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);这是一个div
//写元素包裹的内容
oDiv.innerHTML = '改变的文字';
oDiv.innerHTML = '百度网';
oDiv.innerHTML = '- 列表文字
- 列表文字
- 列表文字
'
}
script>
head>
<body>
<div id="div01">这是一个divdiv>
<a href="#" class="sty01" id="link01">这是一个链接a>
body>
html>
事件属性
元素上除了有样式，id等属性外，还有事件属性，常用的事件属性有鼠标点击事件属性(onclick)，鼠标移入事件属性(onmouseover),鼠标移出事件属性(onmouseout),将函数名称赋值给元素事件属性，可以将事件和函数关联起来。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div01');
function fuChange(){
oDiv.style.width = '200px';
oDiv.style.height = '200px';
oDiv.style.background = 'gold';
}
// fuChange();
oBtn.onclick = fuChange;
}
script>
head>
<body>
<input type="button" value="改变样式" id="btn">
<div id="div01">这是一个divdiv>
body>
html>
匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div01');
//匿名函数
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">这是一个divdiv>
body>
html>
网页换肤
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<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>
css/中的skin01.css文件
body{
background:#ddd;
}
input{
width:200px;
height:50px;
background:pink;
//半圆
border-radius:25px;
border:0px;
outline:none;
}
css/中的skin02.css文件
body{
background:green;
}
input{
width:200px;
height:50px;
background:gold;
border:0px;
/* 改掉轮廓 */
outline:none;
}
条件语句
通过条件来控制程序的走向，就需要用到条件语句。
条件运算符
、=、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else
var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
sTr = '大于';
}
else
{
sTr = '小于';
}
alert(sTr);
多重if else语句
var iNow = 1;
if(iNow==1)
{
... ;
}
else if(iNow==2)
{
... ;
}
else
{
... ;
}
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<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>
数组及操作方法
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];
操作数组中数据的方法
1、获取数组的长度：aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出4
2、用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4
4、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
5、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
6、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
7、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
批量操作数组中的数据，需要用到循环语句
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<script>
//创建数组的第一种方式:
var aList01 = new Array(1,2,3);
//创建数组的第二种方式，直接量的方式
var aList02 = ['a','b','c','d'];
//获取数组成员的个数
var iLen = aList02.length;
//alert(iLen); //4
//操作数组的某个成员
// alert(aList02[2]); //c
//在数组后面增加成员
aList02.push('e');
// alert(aList02); //a b c d e
//删除数组最后一个成员
aList02.pop();
// alert(aList02) // a b c d
//将数组反转
aList02.reverse();
// alert(aList02); //d c b a
//获取某个成员的在数组中第一次出现的索引值
var aList03 = ['a','b','c','d','a','b','c','d'];
var iPos = aList03.indexOf('c');
//如果成员不存在 就返回-1;
var iPos2 = aList03.indexOf('e');
// alert(iPos); //2
// alert(iPos2); // -1
//将数组通过某个字符串拼接出一个大的字符串返回
var sTr = aList03.join('-');
var sTr2 = aList03.join('');
// alert(sTr); //a-b-c-d-a-b-c-d
// alert(sTr2) //abcdabcd
//同时在输出中增加或输出成员
aList03.splice(4,2);
alert(aList03); //a,b,c,d,c,d
aList03.splice(4,2,'e','f','g'); //a,b,c,d,e,f,g
alert(aList03);
script>
head>
<body>
body>
html>
循环语句
程序中进行有规律的重复性操作，需要用到循环语句。
for循环
for(var i=0;i示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<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>
1、数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for(var i=0;i示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<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++) {
//第一次取出字符的索引值==i
if(aList.indexOf(aList[i])==i){
aList2.push(aList[i]);
}
}
alert(aList2);
script>
head>
<body>
body>
html>
2、将数组数据放入页面
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<style>
.list{
width: 300px;
padding: 0px;
margin: 50px auto;
list-style: none;
}
.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 +='' +aList[i]+'';
}
oUl.innerHTML = sTr;
}
script>
head>
<body>
<ul class="list" id="list">
ul>
body>
html>
定时器
定时器在javascript中的作用
1、定时调用函数
2、制作动画
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<script>
function fnMyalert(){
alert('起床了!');
}
//创建只执行一次的定时器，第一个参数是函数名称
// 第二个参数是间隔的时间，单位是毫秒，不用写单位
var timer01 = setTimeout(fnMyalert,2000);
//关闭只执行一次的定时器
clearTimeout(timer01);
//创建反复反复执行的定时器
var timer02 = setInterval(fnMyalert,2000);
//关闭返回执行的定时器
clearInterval(timer02);
script>
head>
<body>
body>
html>
1、定时器制作移动动画
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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 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>
2、定时器制作无缝滚动
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 oListul = document.getElementById('list');
var oLeftdiv = document.getElementById('btn01');
var oRightdiv = document.getElementById('btn02');
var oSlidediv = document.getElementById('slide');
//将ul中的5个li复制一份，成为10个li
oListul.innerHTML = oListul.innerHTML+oListul.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;
}
oListul.style.left=iLeft+'px';
}
// 左右箭头的点击事件
oLeftdiv.onclick = function(){
iSpeed = -3;
}
oRightdiv.onclick = function(){
iSpeed = 3;
}
// 给滚动的图片外面的容器标签做鼠标的移入移出事件
oSlidediv.onmouseover = function(){
// clearInterval(timer);
iLastSpeed = iSpeed;
iSpeed = 0;
}
oSlidediv.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>
字符串处理方法
1、字符串合并操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02); //弹出36
alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr); // 弹出12abc
2、parseInt() 将数字字符串转化为整数
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36
alert(parseInt(sNum03)) //弹出数字12 将字符串小数转化为数字整数
3、parseFloat() 将数字字符串转化为小数
var sNum03 = '12.32'
alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
4、split() 把一个字符串分隔成字符串组成的数组
var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");
alert(aRr); //弹出['2017','4','2']
alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']
5、indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2
6、substring() 截取字符串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl
字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<script>
var iNum01 = 12;
var iNum02 = 12.32;
var sNum01 = '12';
var sNum02 = '12.32';
//+符号运算，如果符号两边都是数字，就做加法运算，
//如果有一边是字符串，就做字符串拼接
// alert(iNum01+10); //12
// alert(sNum01+10); // 1210
//将整型的字符串转化为整数,用parseInt()方法
// alert(parseInt(sNum01)+20); //32
// alert(parseInt(sNum02)+20); //32
//将小数的字符串转化为小数，用parseFloat方法
// alert(parseFloat(sNum02)+20);//32.32
//将字符串分割成数组
var sTr = '2023-9-25';
var aList = sTr.split('-');
var aList2 = sTr.split('');
// alert(aList);//2023,9,25
// alert(aList2); //2,0,2,3,-,9,-,2,5
//获取某小段字符在大段字符里面第一次出现的索引值
var sTr2 = 'abcdef12345ghif1jkl';
var iPos = sTr2.indexOf('f1');
var iPos2 = sTr2.indexOf('i1');
// alert(iPos); //5
// alert(iPos2); //-1 不在返回-1
//字符串切片
var sTr3 = sTr2.substring(6,11);
//写一个参数，表示从这个参数一直切割到字符串结尾
var sTr4 = sTr2.substring(6);
alert(sTr3);//12345
alert(sTr4);//12345ghif1jkl
script>
head>
<body>
body>
html>
变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
// 定义全局变量
var a = 12;
function myalert()
{
// 定义局部变量
var b = 23;
alert(a);
// 修改全局变量
a++;
alert(b);
}
myalert(); // 弹出12和23
alert(a); // 弹出13
alert(b); // 出错
</script>
示例
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<script>
//定义全局变量
var iNum01 = 12;
function fnMyalert(){
//定义局部变量
var iNum02 = 24;
//函数内部调用全局变量
// alert(iNum01); //12
//函数内部调用局部变量
// alert(iNum02);//24
//在函数内部修改全局变量
iNum01 = 13;
alert(iNum01); //13
//函数内部，如果不用var来定义变量，那么这个变量变成全局变量
iNum03 = 36;
}
fnMyalert();
alert('函数外面调用iNum01: ' + iNum01); //13
alert('函数外面调用iNum03: ' + iNum03); // 36
alert('函数外面调用iNum02: ' + iNum02); //不会执行 is not defined
script>
head>
<body>
body>
html>
调试程序的方法
前端代码一般都是通过chrome浏览器的调试工具来进行调试的，调试方式如下：
输出变量和对象的方法：
1、alert
2、console.log
3、document.title
断点调试
通过chrome浏览器调试工具的sources窗口，可以对外链的js文件进行断点调试
封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数：
function myalert(){
alert('hello!');
};
myalert();
封闭函数：
(function(){
alert('hello!');
})();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
alert('hello!');
}()
封闭函数的作用
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如：
var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();
示例
tishi,js
// function fnWrap(){
// function fnTouzi(){
// alert('亲，请关注我们的新产品!');
// }
// fnTouzi();
// }
// fnWrap();
//上面的写法还可能重名，可以改写成下面的封闭函数的形式
// 一个分号表示一个空的js语句，是合法的。
;;;;;;
// 在代码前面加分号，是为了在代码压缩成一行时，
//前面的代码在最后没有加分号，导致代码出错！
;(function(){
function fnTouzi(){
alert('亲，请关注我们的新产品!');
}
fnTouzi();
})();
// 封闭函数装高手的写法：
// ;!function(){
// function fnTouzi(){
// alert('亲，请关注我们的新产品!');
// }
// fnTouzi();
// }();
;~function(){
function fnTouzi(){
alert('亲，请关注我们的新产品!');
}
fnTouzi();
}();
touzhi,js
function fnTouzi(){
alert('请输入投资金额: ');
}
html
DOCTYPE html>
<html lang="en">
<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>Documenttitle>
<script src="js/touzi.js">script>
<script src="js/tishi.js">script>
<script>
fnTouzi();
script>
head>
<body>
body>
html>