什么是JavaScript ?
js简单的页面校验
<script>
function cheakForm(){
// var input1 = document.getElementById("111");
// var input2 = input1.value;
// if(input2.length >= 6){
// return true;
// }
// else{
// alert("用户名太短!");
// }
// return false;
//
//邮箱的校验
var email = document.getElementById("email");
var Uemail = email.value;
if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(Uemail)){
alert("校验成功");
}
else{
alert("校验失败");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="../../02-网站注册页面/网站注册页面.html" onsubmit="return cheakForm()">
用户名:<input type="text" id="111" /><br />
邮箱:<input type="text" id="email" /><br />
<input type="submit" value="提交" />
</form>
</body>
运行结果
点击之后
自动轮播图片之
切换图片
<script>
function changeImg(){
var img = document.getElementById("1001");
img.src = "../img/1-161104143944.gif";
}
</script>
</head>
<body>
<input type="button" value="点击切换" onclick="changeImg()"/>
<br />
<img src="../img/222.jpg" id="1001"/>
</body>
运行结果
点击之后
自动轮播图片之
定时器
<script>
function test(){
console.log("setInterval被调用了");
}
var timerID;
function startDingshiqi(){
timerID = setInterval("test()",3000);
}
function stopDingshiqi(){
cleraInterval(timerID);
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startDingshiqi()"/>
<input type="button" value="关闭定时器" onclick="stopDingshiqi()"/>
</body>
运行结果
调出Console控制台之后,点开启定时器
图片自动轮播案例
步骤分析
<script>
var index = 0;
function changeImg(){
var img = document.getElementById("2333");
var curindex = index%3+1;//能得到 1 2 3
img.src = "../img/"+curindex+".jpg";
index = index + 1;
}
function init(){
setInterval("changeImg()",1500);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="2333" />
</body>
运行结果
点开之后,首先是
1.5秒之后
又1.5秒之后
完成了图片轮播
显示和隐藏图片
<script>
function hideImg(){
var img = document.getElementById("img1");
img.style.display = "none";
}
function showImg(){
var img = document.getElementById("img1");
img.style.display = "block";
}
</script