使用JS完成页面定时弹出广告
JS开发的步骤:
1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作, 弹框, 修改页面内容,动态去添加一些东西1. 完成页面定时弹出广告
1.1 需求分析
一般网页，当我们刚打开的时候，它会5秒之后，显示一个广告，让我们看5秒钟，然后他的广告就自动消失了！
1.2 技术分析
- 定时器
- setInterval : 每隔多少毫秒执行一次函数
- setTimeout: 多少毫秒之后执行一次函数
- clearInterval
- clearTimeout
- 显示广告 img.style.display = "block"
- 隐藏广告 img.style.display = "none"
1.3 步骤分析
- 确定事件: 页面加载完成的事件 onload
- 事件要触发函数: init()
- init函数里面做一件事:
- 启动一个定时器 : setTimeout()
- 显示一个广告
- 再去开启一个定时5秒钟之后,关闭广告
1.4 代码实现
<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>
1.5扩展
- JS的引入方式
0. 轮播图自动播放
需求:
有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换
技术分析:
切换图片:
每个三秒钟做一件事:
步骤分析:
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeImg()
4. changeImg()
1. 获得要切换图片的那个元素<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
自动轮播图片
</title>
<script>
var num=0;
function init(){
setInterval('changImg()',1000);
}
function changImg(){
var img=document.getElementById("img1");
var Number=num%4+1;
img.src="../img/"+Number+".jpg";
num=num+1;
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>
使用JS完成表单的校验
2. 完成完成表单的校验
2.1 需求分析
昨天我们做了一个简单的表单校验，每当用户输入出错的时候，我们是弹出了一个对话框，提示用户去修改。这样的用户体验效果非常不好好。我们今天就是需要来对他进行一个修改，当用户输入信息有问题的时候，我们就再输入框的后面给他一个友好提示。
2.2 技术分析
【HTML中innerHTML属性】
【JS中的常用事件】
onfocus 事件: 获得焦点事件
onblur : 失去焦点
onkeyup : 按键抬起事件
2.3 步骤分析
2.4 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
表单校验
</title>
<link rel="stylesheet" href="../css/div.css" />
<script type="text/javascript" src="../js/Check.js"></script>
</head>
<body>
<div id="div">
<p>True mastery of any skill takes a lifetime. 对任何技能的掌握都需要一生的刻苦操练。</p>
</div>
<div id="zhuce">
<table id="table" >
<td>
<form action="../01-自动轮播图片/自动轮播图片.html" onsubmit="return Submint()">
<table align="center">
<tr>
<td colspan="3" align="center">
<font color="#000000" size="6" face="仿宋">注册表</font>
</td>
</tr>
<tr>
<!--onblur 事件会在对象失去焦点时发生。 onfocus 事件在对象获得焦点时发生 -->
<td>USER_NAME</td>
<td><input type="text" id="username" onfocus="Tishi('jyname','提示：用户名需要至少输入5个字符哦') " onblur="CheckusernamePassworld('jyname','username')"/></td>
<td width="300px"><span id="jyname"></span></td>
</tr>
<tr>
<td>PASS_WORD</td>
<td><input type="password" id="password" onfocus="Tishi('jypass','提示：密码需要至少输入5个字符哦')" onblur="CheckusernamePassworld('jypass','password')"/></td>
<td width="300px"> <span id="jypass" ></span> </td>
</tr>
<tr>
<td>OK PASS_WORD</td>
<td><input type="password" id="repassword" onfocus="Tishi('jyrepass','提示：需要与上面密码一样哦')" onblur="Checkpassworld('password','repassword','jyrepass')"></td>
<td width="300px"><span id="jyrepass"></span></td>
</tr>
<tr>
<td>EMAIL</td>
<td><input type="email" id="emil" onfocus="Tishi('jyemail','提示：请输入正确的邮箱号码')" onblur="checkEmail('emil','jyemail')"/></td>
<td width="300px"><span id="jyemail" ></span></td>
</tr>
<tr>
<td>PHONE_NUMBER</td>
<td><input type="tel" onfocus="Tishi('jytel','提示：请输入正确的手机号码')"/></td>
<td width="300px"><span id="jytel" ></span></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>
</td>
</table>
</div>
<div id="div">
<p>Sweat is the lubricant of success. 汗水是成功的润滑剂。</p>
</div>
</body>
</html>
<!-- js -->
//提示信息
function Tishi(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = "<font color=plum> ?"+msg+"</font>";
}
//检查用户的用户名和用户密码是否够五位，不够则不让通过
function CheckusernamePassworld(Spandata,IDdata){
//获取用户输入的内容
var uValue = document.getElementById(IDdata).value;
var sapn =document.getElementById(Spandata);
if(uValue.length<5){
sapn.innerHTML="<font color='red'>? 请输入至少五位数用户名！</font>";
return false;
}else{
sapn.innerHTML="?";
return true;
}
}
//校验确认密码
function Checkpassworld(id1,id2,span){
var pass = document.getElementById(id1).value;
var repass =document.getElementById(id2).value;
var span=document.getElementById(span);
if(pass==repass){
span.innerHTML="<font color='green'>?</font>";
return true;
}else{
span.innerHTML="<font color='red'>? 两次密码输入不一致</font>";
return false;
}
}
/*
用途：检查输入的Email信箱格式是否正确
输入：strEmail：字符串
返回：如果通过验证返回true,否则返回false
*/
function checkEmail(Email,Span)
{
var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if ( emailReg.test(document.getElementById(Email).value) ) {
document.getElementById(Span).innerHTML="?";
return true;
}
else {
document.getElementById(Span).innerHTML="<font color='red'>? 您输入的Email地址格式不正确</font>";
return false;
}
};
//总校验，看表单是否提交
function Submint(){
var booleanValue= checkEmail(Email,Span) && Checkpassworld(id1,id2,span) && CheckusernamePassworld(Spandata,IDdata) && Tishi(spanID,msg);
return booleanValue;
}
上午回顾:
定时器:
setInterval("test()",3000) 每隔多少毫秒执行一次函数
setTimeout("test()",3000) 多少毫秒之后执行一次函数
timerID 上面定时器调用之后
clearInterval()
clearTimeout()
切换图片
img.src = "图片路径"
事件: 文档加载完成的事件 onload事件
显示广告 : img.style.display = "block"
隐藏广告: img.style.display ="none"
引入一个外部js文件
<script src="js文件的路径" type="text/javascript"/>
表单校验中常用的事件:
获得焦点事件: onfocus
失去焦点事件 onblur
按键抬起事件: onkeyup
JS开发步骤
1. 确定事件
2. 事件要触发函数: 定义函数
3. 函数通常都要去做一些交互: 点击, 修改图片, 动态修改innerHTML属性... innerTEXT
3使用JS完成表格的隔行换色
3.1 需求分析
我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色
3.2 技术分析
改变行的颜色
3.3 步骤分析
- 确定事件: 文档加载完成 onload
- 事件要触发函数: init()
- 函数:操作页面的元素 要操作表格中每一行 动态的修改行的背景颜色
- 事件要触发函数: init()
3.4 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
` 事件：加载事件onload()
事件触发函数：init()
事件行为： 操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
-->
<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";
}
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr>
<td>
<input type="checkbox" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<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>
4. 复选框的全选和全不选
4.1 需求分析
商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有的商品
4.2 技术分析
事件 : onclick点击事件
4.3 步骤分析
全选和全不选步骤分析:
1.确定事件: onclick 单机事件 2.事件触发函数: checkAll() 3.函数要去做一些事情: 获得当前第一个checkbox的状态 获得所有分类项的checkbox 修改每一个checkbox的状态
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*`
事件：加载事件onload()
事件触发函数：init()
事件行为： 操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
*/
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";
}
}
}
/*
事件：单击事件：onclick()
事件触发函数：CheckAll()
3.函数要去做一些事情:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态
*/
function CheckAll(){
var checkb= document.getElementById("check1");
//获得当前第一个checkbox的状态
var checked=checkb.checked;
// alert(checked);
//获得所有分类项的checkbox
// var checks = document.getElementsByTagName("input"); 根据标签选择
// var checks = document.getElementsByName("checkone"); 根据name选择
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>
5. 省市联动效果
5.1 需求分析
5.2 技术分析
什么是DOM: Document Object Model : 管理我们的文档 增删改查规则
【HTML中的DOM操作】
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。
删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。
修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点
5.3 步骤分析
5.4 代码实现
6. 使用JS控制下拉列表左右选择
6.1 需求分析:
在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品
6.2 步骤分析:
6.3 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步骤分析
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
-->
<script>
function selectOne(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
// 2. 将选中的元素添加到右边的Select中就可以
rightSelect.appendChild(option1);
}
}
}
//将左边所有的商品移动到右边
function selectAll(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightSelect.appendChild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" onclick="selectOne()"> >> </a> <br />
<a href="#" onclick="selectAll()"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
今天内容简单回顾:
定时器:
setInterval
setTimeout
clearInterval
clearTimeout
控制图片显示隐藏
img.style.display = "block"
img.style.display = "none"
表单中常用的事件:
onfocus: 获取焦点事件
onblur : 失去焦点的事件
onkeyup: 按键抬起的事件
onclick: 单击事件
ondblclick: 双击事件
表格隔行换色,鼠标移入和移除要变色:
onmouseenter: 鼠标移入
onmouseout: 鼠标移出
onload: 文档加载完成事件
onsubmit: 提交
onchange: 下拉列表内容改变
checkbox.checked 选中状态
DOM的文档操作:
添加节点: appendChild
创建节点: document.createElement
创建文本节点: document.createTextNode()
JS开发步骤:
1. 确认事件
2. 事件触发函数
3. 函数里面要做一些交互
扫一扫
2568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
