JavaScript
一、javaScript
JS开发: 是一门脚本语言,由浏览器来解释执行,不需要经过编译
JS声明变量: var 变量的名字;
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。JS声明函数: function 函数的名称(参数的名字){}
JS开发的步骤:
1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作, 弹框, 修改页面内容,动态去添加一些东西
1.自动轮播图片
1.1切换图片
步骤：
1.事件：点击事件onclick
2.事件要触发函数：changemg()
3.在函数中
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function changeImg(){
//alert("要切换了")
var img=document.getElementById("img1");
img.src="../img/002.jpg"
}
</script>
</head>
<body>
<input type="button" value="点击切换图片" onclick="changeImg()"/><br />
<img src="../img/001.jpg" id="img1"/>
</body>
</html>
1.2定时器
setInterval("函数",时间);//会一直运行
setTimeout("函数",时间);//只运行一次
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//window对象是一个最底层的对象
//window.setInterval("alert('123')",2000);
function test(){
console.log("setInterval调用了")
}
var timerID;
function startTimer(){
timerID=setInterval("test()",2000);
}
function stopTimer(){
//关闭定时器的方法clearInterval()
clearInterval(timerID);
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startTimer()"/><br />
<input type="button" value="关闭定时器" onclick="stopTimer()"/><br />
</body>
</html>
1.3图片自动播放
步骤：
1.确定事件：文档加载完成的事件onload
2.事件的触发：init()
3.函数里面要做的一些事情：(通常会操作元素，提供交互)
1.开启定时器：执行切换图片的函数changeImg()
4.changeImg()
1.获得想要切换图片的那个元素
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var index=0;
function changeImg(){
//获得想要切换图片的那个元素
var img=document.getElementById("img1");
//计算出当前要切换到第几张图片
var curIndex=index%3+1;//0,1,2
img.src="../img/00"+curIndex+".jpg";//1,2,3
index=index+1;
}
function init(){
setInterval("changeImg()",2000);
}
</script>
</head>
<body onload="init()">
<img src="../img/001.jpg" id="img1"/>
</body>
</html>
2.网站定时弹出广告
2.1显示和隐藏广告
要点分析：
- 定时器
- setInterval : 每隔多少毫秒执行一次函数
- setTimeout: 多少毫秒之后执行一次函数
- clearInterval：清除定时器
- clearTimeout：清除定时器
- 显示广告 img.style.display = "block"
- 隐藏广告 img.style.display = "none"
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function showImg(){
var img=document.getElementById("img1");
//图片显示display="block"
img.style.display="block";
}
function hideImg(){
var img=document.getElementById("img1");
//图片隐藏display="none
img.style.display="none";
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showImg()"/>
<input type="button" value="隐藏" onclick="hideImg()"/><br />
<img src="../img/001.jpg" id="img1" />
</body>
</html>
2.2定时弹出广告
步骤：
1.确定事件：页面加载完成事件onload
2.事件要触发的函数：init()
3.init函数里面做一件事：
1.启动一个定时器:setTimeout()
2.显示一个广告：
1.再去开启一个定时5秒后，关闭广告
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//开启广告的函数
function showImg(){
//首先要获取要操作的img
var img=document.getElementById("img1");
//显示广告
img.style.display="block";
//在开启定时器，关闭广告
setTimeout("hideImg()",3000);
}
//关闭广告的函数
function hideImg(){
//首先要获取要操作的img
var img=document.getElementById("img1");
//隐藏广告
img.style.display="none";
}
function init(){
setTimeout("showImg()",3000);
}
</script>
</head>
<body onload="init()">
<img src="../img/003.jpg" id="img1" />
</body>
</html>
3.表单校验
要点分析：
onfocus 事件: 获得焦点事件
onblur : 失去焦点
onkeyup : 按键抬起事件
JS开发步骤：
1. 确定事件
2. 事件要触发函数: 定义函数
3. 函数通常都要去做一些交互: 点击, 修改图片,
动态修改innerHTML属性... innerTEXT
步骤：
确认事件
校验用户名
1.当鼠标移动到输入框中的时候，给用户一个提示
事件：焦点事件onfocus
触发函数：
函数里面要做的一些事情
span给用户提示信息
2.当用户鼠标移开后，校验一下用户输入
事件：失去焦点 onblur
触发函数：
函数要做的事情：
校验用户输入
获取操作的元素
得到用户输入的值
3.当用户按键输入抬起的时候，校验一下用户输入
事件：onkeyup
引入外部js：
<script type="text/javascript" src="../js/regutils.js"></script>
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/regutils.js"></script>
<script>
/*
* 1.确定事件：onfocus 获得焦点
* 2.事件要驱动函数
* 3.函数要干一些事情：修改span的内容
*/
function showTips(spqnID,messages){
//首先要获得要操作的元素span
//var span=document.getElementById("span_username");
var span=document.getElementById(spqnID);
span.innerHTML=messages;
}
/*
* 校验用户名
* 1.事件：onblur 失去焦点 onkeyup 按键弹抬起
* 2.函数：checkUsername()
* 3.函数去显示校验结果
*/
function checkUsername(){
//获取用户输入的账户
var uNmae=document.getElementById("username").value;
//对输入的内容进行校验
//获得要操作的元素span
var span=document.getElementById("span_username");
if (uNmae.length<6) {
span.innerHTML="<font color='red' size='2'>用户名小于6位</font>";
return false;
} else{
span.innerHTML="<font color='lawngreen' size='2'>正确</font>";
return true;
}
}
/*
* 校验密码
*/
function checkPwd(){
//获取用户输入的密码
var uPwd=document.getElementById("password").value;
//对输入内容进行校验
//获得要操作的元素span
var span=document.getElementById("span_password");
if (uPwd.length<6) {
span.innerHTML="<font color='red' size='2'>密码小于6位</font>";
return false;
} else{
span.innerHTML="<font color='lawngreen' size='2'>可用</font>";
return true;
}