轮播图自动播放
需求：有一组图片，每隔3秒钟，就去切换一张，最终是一直不停的切换
技术分析：
切换图片：
每个三秒钟做一件事：
步骤分析：
1.确定事件：文档加载完成的事件 onload
2.事件要触发：init()
3.函数里面要做一些事情：（通常会去操作元素，提供交互）
1.开启定时器：执行切换图片的函数 changelmg()
4.changelmg()
1.获得要切换图片的那个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeImg()
4. changeImg()
1. 获得要切换图片的那个元素
-->
<script>
var index = 0;
function changeImg(){
//1. 获得要切换图片的那个元素
var img = document.getElementById("img1");
//计算出当前要切换到第几张图片
var curIndex = index%3 + 1; //0,1,2
img.src="../img/"+curIndex+".jpg"; //1,2,3
//每切换完,索引加1
index = index + 1;
}
function init(){
setInterval("changeImg()",1000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>
完成页面定时弹出广告
需求分析
一般网页，当我们打开的时候，它在5之后，显示一个广告，让我们看5秒钟，然后他的广告就自动消失了！
技术分析
- 定时器
- seInterval:每隔多少毫秒执行一次函数
2.setTimeout:多少毫秒之后执行一次函数
3.clearInterval
4,clearTimeout
- 显示广告 img.style.display = "block"
- 隐藏广告 img.style.display = "none"
步骤分析
1.确定事件：页面加载完成的事件 onload
2.事件要触发函数 init()
3.init函数里面做一件事情：
1.启动一个定时器：setTimeout()
2.显示一个广告
- 再去开启一个定时5秒钟之后，关闭广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 页面加载完成的事件 onload
2. 事件要触发函数: init()
3. init函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
1. 再去开启一个定时5秒钟之后,关闭广告
-->
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//显示广告
img.style.display = "block";
//再开启定时器,关闭广告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//隐藏广告
img.style.display = "none";
}
</script>
</head>
<body onload="init()">
<img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//window 对象是一个最顶层对象
// window.setInterval("alert('123');",2000);
function test(){
console.log("setInterval 调用了");
}
// setInterval("test()",2000);
// setTimeout("test()",2000);
var timerID;
function startDinshiqi(){
// timerID = setInterval("test()",2000);
timerID = setTimeout("test()",3000);
}
function stopDingshiqi(){
// clearInterval(timerID);
clearTimeout(timerID);
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startDinshiqi()" /><br />
<input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br />
</body>
</html>
表单校验
需求：
当用户输入信息有问题的时候，我们就在输入框的后面给用户一个友好提示。
技术分析：
【HTML中innerHTML属性】
【JS中的常用事件】
onfocus事件：获得焦点事件
onblur:失去焦点
onkeyup:按键抬起事件
步骤分析：
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
确认事件
事件触发函数
函数操作元素
校验用户名
1. 当用户鼠标移动到输入框中时候, 请给用户一个提示
事件: 焦点事件 onfocus
触发函数
函数里面要做一些事情
span 给用户提示信息
2. 当用户鼠标移开时候, 校验一下用户输入
事件: 失去焦点 onblur
触发函数
函数要干事情:
校验用户输入
得到用户输入的值
3. 当用户按键输入抬起的时候, 校验一下用户输入
-->
<script>
function showTips(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
function checkUsername(){
/*
alert(this) 每一个函数中都隐藏着一个this指针, 指向的是当前事件触发对象
*/
var uValue = document.getElementById("username").value;
// alert(uValue);
var span = document.getElementById("span_username");
if(uValue.length < 6){
span.innerHTML = "对不起,太短啦!"
return false;
}else{
span.innerHTML = "恭喜您,够用!"
return true;
}
}
function checkForm(){
var flag = checkUsername();
return flag;
}
</script>
</head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()">
用户名:<input type="text" id="username" onblur="checkUsername()" onfocus="showTips('span_username','用户名长度不能小于6位')" /><span id="span_username"></span> <br />
<input type="submit" value="注册" />
</form>
</body>
</html>
表单校验demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
/*
1. 确定事件 : onfocus
2. 事件要驱动函数
3. 函数要干一些事情: 修改span的内容
*/
function showTips(spanID,msg){
//首先要获得要操作元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校验用户名:
1.事件: onblur 失去焦点
2.函数: checkUsername()
3.函数去显示校验结果
*/
function checkUsername(){
//获取用户输入的内容
var uValue = document.getElementById("username").value;
//对输入的内容进行校验
//获得要显示结果的span
var span = document.getElementById("span_username");
if(uValue.length < 6){
//显示校验结果
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
/*
密码校验
*/
function checkPassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
//对密码输入进行校验
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
return true;
}
}
/*
确认密码校验
* */
function checkRePassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
//获取确认密码输入
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
//对密码输入进行校验
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}
/*
校验邮箱
* */
function checkMail(){
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);
var span = document.getElementById("span_email");
//对邮箱输入进行校验
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
return false;
}
}
function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
</script>
</head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >
用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
手机号:<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
上午回顾：
定时器:
setIntervarl("test（)",3000)每隔多少毫秒执行一次函数
setTimeout("test()",3000)多少毫秒之后执行一次函数
timerID上面定时器调用之后
clearInterval()
clearTimeout()
切换图片
img. src = "图片路径"
事件：文本加载完成的事件 onload事件
显示广告：img.style.display = "block"
隐藏广告：img.style.diplay = "none"
引入一个外部js文件
<script src="js文件的路径" type="text/javascript"/>
表单校验中常用的事件：
获得焦点事件 onfocus
失去焦点事件 onblur
按键抬起事件 onkeyup
JS开发步骤
1.确定事件
2.事件要触发函数：定义函数
3.函数通常都要做一些交互：点击，修改图片，动态修改innerHTML属性...innerTEXT
表格隔行换色
需求分析
我们商品分类的信息太多，如果没一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色
技术分析
改变行的颜色
步骤分析
代码实现
<!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></title>
<!--
1.确定事件
2.事件要触发函数：init（）
3.函数：操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
-->
<script>
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows =tab.rows;
//便利所有的行，然后根据奇数 偶数
for(var i=0;i < rows.length; i++){
var row = rows[i];//得到其中某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
</script>
</head>
<body onload="init()" >
<table border="1px" width="600px" id="tab">
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为，小米，尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td>电脑办公</td>
<td>联想，小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>馋嘴零食</td>
<td>辣条，麻花，黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td>床上用品</td>
<td>床单，被套，四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>书</td>
<td>儿童，文学，小说</td>
<td>特价书</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</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></title>
<!--
1.确定事件
2.事件要触发函数：init（）
3.函数：操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
-->
<script>
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows =tab.rows;
//便利所有的行，然后根据奇数 偶数
for(var i=1;i < rows.length; i++){
var row = rows[i];//得到其中某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
/*
全选和全不选步骤分析：
1.确定事件： onclick 单机事件
2.事件触发函数：checkAll()
3.函数要去做一些事情：
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态
*/
function checkAll(){
// 获得当前第一个checkbox的状态
var check1 = document.getElementById("check1");
//得到当前checked状态
var checked = check1.checked;
// 获得所有分类项的checkbox
// var checks = document.getElementsByTagName("input");
var checks = document.getElementsByName("checkone");
// alert(checks.length);
for(var i = 0 ; i < checks.length;i++){
// 修改每一个checkbox的状态
var checkone = checks[i];
checkone.checked = checked;
}
}
</script>
</head>
<body onload="init()" >
<table border="1px" width="600px" id="tab">
<tr>
<td>
<input type="checkbox" onclick="checkAll()" id="check1" / >
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为，小米，尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>2</td>
<td>电脑办公</td>
<td>联想，小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>3</td>
<td>馋嘴零食</td>
<td>辣条，麻花，麻瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>4</td>
<td>床上用品</td>
<td>床单，被套，四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>5</td>
<td>书</td>
<td>儿童，文学，小说</td>
<td>特价书</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
省市联动
需求分析
技术分析
什么是DOM：Document Object Model:管理我们的文档 增删改查规则
[HTML中的DOM操作]
一些常用的 HTML DOM 方法:
getElementById(id) - 获取带有指令 id 的节点 （元素）
appendChiId(node) - 插入新的子节点（元素）
remmoveChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）子节点
attributes - 节点（元素）的属性节点
查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode()创建文本节点。
inserBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。
