填写HTML代码
Element元素中有一个innerHTML属性,这个属性可以填写一段html代码
innerHTML = "<font color='red'>这是一段测试的文本内容</font>"
这样做可以修改body中所需要修改的内容
定时器:
setInterval();每隔多少毫秒去执行一个操作
setTimeout();每隔多少毫秒后去执行一个操作
clearInterval();取消由 setInterval()设置的 timeout
clearTimeout();取消由 setTimeout() 方法设置的 timeout
事件:
onload();页面加载事件
onclick():按钮事件
onfocus() : 获取到焦点
onblur(): 失去焦点
onkeyup(): 当用户输入完成之后,按键弹起触发的事件.
打印方式:
console.log("显示方法被调用了..."):在浏览器-->检查-->console中显示
alert("显示方法被调用了..."):浏览器-->弹出页面提示
绝对定位:
position : absolute (必须先指定,才能使用left top);
left: 距离左边的距离
top: 距离顶部
案例一,定时弹出广告**
css属性: display
显示: block
隐藏: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--每隔2秒弹出广告-->
<script type="text/javascript">
/* 1. 确定事件 onload(页面加载完成)
2. 事件通常都会触发一个函数
1. 首先都获取广告所在的img
2. 启动定时器,2秒之后显示广告
3. 修改它的属性值 style.display="block"*/
var i;
function dis(){
var v = document.getElementById("picture");
/*alert("消失");*/
//将图片样式设置为消失
v.style.display="none";
setTimeout("show()",2000);
}
function show(){
var v = document.getElementById("picture");
/*alert("显示");*/
//将图片样式设置为显示
v.style.display="block";
console.log("方法被调用了")
//清除定时器setInterval()效果
clearInterval(i);
//2秒后执行dis()
setTimeout("dis()",2000);
}
function init(){
//每2隔秒调用show方法
i = setInterval("show()",2000);
}
</script>
</head>
<body onload="init()">
<div>
<img id="picture" style="display: none;" src="img/1.jpg" width="100%"/>
</div>
</body>
</html>
案例二,注册页面优化
需求:当用户输入的时候,我们需要对用户输入的内容进行表单的验证,这样可以减轻对服务器的压力
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站注册页面优化</title>
<link rel="stylesheet" href="../css/main.css" />
<script type="text/javascript" src="../js/check.js" ></script>
<script>
/*
1. 确认事件 onsubmit 并且注意onsubmit="return checkForm()"
2. 实现checkForm这个方法
1. 对用户名做非空判断,
2. 对用户名进行输入长度判断
3. 输入的密码长度不能少于8位
4. 两次输入的密码必须一样
5. 邮箱格式需要正确sdfasdf@qq.com.cn
3. 当用户输入有问题的时候, 需要在后面给出友好提示
1. 修改span的内容 使用innerHTML
*/
function showTips(){
var span = document.getElementById("spanId");
span.innerHTML = "<font color='red'>用户名不能为空,长度须大于6</font>"
}
function checkUsername(){
//1. 对用户名做非空判断,
//先得获取用户输入
var username = document.getElementById("username");
//alert(username.value);
var uValue = username.value;
//类型的转换
// var i = 123;
// alert(i.toString());
// var j = "hello world";
// var m = j.substring(0,6);
// alert(m);
//对用户名进行输入长度判断
if(uValue == "" || uValue.length < 6){
//在后面的span中填入给用户温馨提示
/*
1.首先获取span
2. 修改span的innerHTML属性
*/
var span = document.getElementById("spanId");
span.innerHTML = "<font color='red'>用户名不合法</font>"
return false;
}else{
var span = document.getElementById("spanId");
span.innerHTML = "<font color='red'>恭喜您,合法</font>"
}
}
function checkForm(){
//1. 对用户名做非空判断,
//先得获取用户输入
var username = document.getElementById("username");
//alert(username.value);
var uValue = username.value;
//类型的转换
// var i = 123;
// alert(i.toString());
// var j = "hello world";
// var m = j.substring(0,6);
// alert(m);
//对用户名进行输入长度判断
if(uValue == "" || uValue.length < 6){
//在后面的span中填入给用户温馨提示
/*
1.首先获取span
2. 修改span的innerHTML属性
*/
var span = document.getElementById("spanId");
span.innerHTML = "<font color='red'>用户名不合法</font>"
return false;
}
/*
输入的密码长度不能少于8位
先获取到密码框输入的内容
判断它的长度是否小于8
4. 两次输入的密码必须一样
获取重复密码框的内容
* */
var pValue = document.getElementById("password").value;
var rePValue = document.getElementById("repassword").value;
if(pValue.length < 8){
var span = document.getElementById("password_spanId");
span.innerHTML = "<font color='red'>密码长度不够8位</font>"
return false;
}else{
var span = document.getElementById("password_spanId");
span.innerHTML="";
}
if(pValue != rePValue){
var span = document.getElementById("repassword_spanId");
span.innerHTML = "<font color='red'>两次输入密码不一致</font>"
return false;
}else{
var span = document.getElementById("repassword_spanId");
span.innerHTML = ""
}
//邮箱校验 正则表达式
var email = document.getElementById("email").value;
//正则表达式
/*var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if(! reg.test(email)){
alert("邮箱表达式有问题")
return false;
}*/
if(!checkEmail(email)){
return false;
}
return true;
}
</script>
</head>
<body>
<div style=" 100%;">
<div>
<div class="logo">
<img src="../img/logo2.png" />
</div>
<div class="logo">
<img src="../image/header.jpg" />
</div>
<div class="logo" style="padding-top: 20px;height: 40px;" >
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div style="clear: both;"></div>
<!--第二行:导航栏-->
<div style=" height: 50px;">
<ul>
<li style="display: inline; color:white">首页</li>
<li style="display: inline; color:white">手机数码</li>
<li style="display: inline; color:white">电脑办公</li>
<li style="display: inline; color:white">香烟酒水</li>
</ul>
</div>
<!--注册模块-->
<div style="height: 600px;border: 1px solid red;background: url(../image/regist_bg.jpg);">
<div style="position:absolute;top:210px;left:360px;border: 5px solid gray; 50%;height: 60%;">
<form action="js输出.html" onsubmit="return checkForm()">
<table border="1px" width="80%" height="90%" align="center">
<!--创建一个九行两列-->
<tr>
<td colspan="2">
<h3>会员注册</h3>
</td>
</tr>
<tr>
<td align="right">用户名:</td>
<td>
<input type="text" id="username" onfocus="showTips()" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="spanId"></span>
</td>
</tr>
<tr>
<td align="right">密码:</td>
<td>
<input type="password" id="password"/><span id="password_spanId"></span>
</td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td>
<input type="password" id="repassword" /><span id="repassword_spanId"></span>
</td>
</tr>
<tr>
<td align="right">
邮箱:
</td>
<td>
<input type="text" id="email"/><span id="email_spanId"></span>
</td>
</tr>
<tr>
<td align="right">
姓名:
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td align="right">
性别:
</td>
<td >
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td align="right">
出生日期:
</td>
<td>
<input type="date" />
</td>
</tr>
<tr>
<td align="right">
验证码:
</td>
<td>
<input type="text" />
<img src="" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</div>
</div>
<div>
<img src="../image/footer.jpg" width="100%" />
</div>
<!--8-->
<div style="text-align: center;">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a> <br />
Copyright © 2005-2016 xx商城 版权所有
</div>
</div>
</body>
</html>
案例三:表单的隔行换色&全选与全不选
需求:我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色
技术分析
【HTML中checked属性】
var ck1 = document.getElementById("ck1");
alert(ck1.checked); 当被选中它就是true, 否则就是false
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
//返回对拥有指定 id 的第一个对象的引用。
var table1 = document.getElementById("table1");
//tBodies[0] 返回包含表格中所有 tbody 的一个数组。
//rows[] 返回包含表格中所有行的一个数组。
var rows = table1.tBodies[0].rows;
//alert(rows);
for(var i=0;i < rows.length;i++){
var row = rows[i];
if(i%2 == 0){
row.style.backgroundColor = "red";
}else{
row.style.backgroundColor = "yellow";
}
}
}
function checkAll(){
var ck1 = document.getElementById("ck1");
//alert(ck1);
//alert(ck1.checked);//勾选上为true,取消为false
//返回带有指定名称的对象集合。
var ck2 = document.getElementsByName("ck2");
//alert(ck2.length);
//遍历该名称对象的集合,获取每一个对象
for(var i = 0; i <ck2.length; i++){
//判断对象是否勾选,将表头的属性赋值过来
ck2[i].checked = ck1.checked;
}
}
</script>
</head>
<body>
<table id="table1" border="1px" width="700px" height="200px" align="center">
<thead>
<tr>
<td>
<input type="checkbox" id="ck1" onclick="checkAll()"/>
</td>
<th>
分类ID
</th>
<th>
分类名称
</th>
<th>
分类商品
</th>
<th>
分类描述
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
1
</td>
<td>
手机数码
</td>
<td>
三星NOTE7,IPhone7
</td>
<td>
这里面放的都是最新手机
</td>
<td>
<a href="#">修改</a>|
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
2
</td>
<td>
黄鹤楼,双喜,长白山,白沙
</td>
<td>
分类商品
</td>
<td>
这里面都是香烟
</td>
<td>
<a href="#">修改</a>|
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
3
</td>
<td>
电脑办公
</td>
<td>
MBP,联想
</td>
<td>
电脑
</td>
<td>
<a href="#">修改</a>|
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
4
</td>
<td>
冰箱洗衣机
</td>
<td>
海尔,格力,三菱,美的
</td>
<td>
冰箱洗衣机
</td>
<td>
<a href="#">修改</a>|
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
案例四:控制下拉列表的左右选择
需求:商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有的商品
技术分析
1. 确定事件 onclick();
2. 实现全选checkbox 所要触发的函数
3. 获去最上面全选的checked属性
4. 修改列表中商品项的选中状态
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品左右选择页面</title>
<script type="text/javascript">
//商品的单个选择
function selectOne(){
var left = document.getElementById("selectLeft");
var right = document.getElementById("selectRight");
var op = right.options;
for(var i = 0; i < op.length; i++) {
//通过selected判断某个对象是否被选中
if(op[i].selected) {
left.appendChild(op[i]);
}
}
}
//全选
function selectAll(){
//获取左边商品的select
var left = document.getElementById("selectLeft")
//获取右边商品的select
var right = document.getElementById("selectRight");
//获取右边商品的所有option
var op = right.options;
//遍历options集合/数组
for(var i = 0; i < op.length; i++){
left.appendChild(op[i--]);
}
}
</script>
</head>
<body>
<!--创建一个四行两列的表格-->
<table border="1px" width="300px">
<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="selectLeft">
<option>肾6</option>
<option>肾7</option>
<option>肾8</option>
<option>肾6</option>
<option>锤子</option>
</select><br />
<a href="#">>></a><br />
<a href="#">>>></a>
</div>
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="selectRight" ondblclick="selectOne()">
<option>三星note7</option>
<option>小米Mix</option>
<option>华为meta9</option>
<option>波导手机</option>
<option>oppoR9</option>
</select><br />
<a href="#" onclick="selectOne()"><<</a><br />
<a href="#" onclick="selectAll()"><<<</a>
</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
案例五,省市联动
需求:在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品
技术分析
1. 确定事件: onclick
2. 需要实现事件所触发的函数,selectOne
3. 找到已有商品这个Select
4. 从左边的select中,寻找哪一个选项,被选中了.
5. 找到未有商品所对应的select
6. 将左侧选中的商品,动态的添加到右侧未有的商品中
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建包含城市名称的二维数组
var cites = new Array(3);
cites[0] = new Array("武汉", "黄冈", "黄石", "九江");
cites[1] = new Array("广州", "深圳", "佛山", "惠州");
cites[2] = new Array("长沙", "怀化", "衡阳");
//onchange事件对应的函数
function changePrince() {
//获取指定 id 的第一个对象的引用。
var prince = document.getElementById("changePrince");
//获取省份的角标
var index = prince.value;
//alert(index);
//根据角标找到该省的城市组
var cite = cites[index];
//找到放置城市的select
var prince1 = document.getElementById("selectPrince");
//alert(prince);
//清空select中的option
prince1.options.length=0;
//遍历城市组,获取里面的城市
for(var i=0;i<cite.length;i++){
//创建option节点
var op = document.createElement("option");
//创建城市名称文本
var tn = document.createTextNode(cite[i]);
//将城市名添加进option中
op.appendChild(tn);
//将option添加进select中
prince1.appendChild(op);
}
}
</script>
</head>
<body>
<!--省份-->
<select id="changePrince" onchange="changePrince()">
<option value="0">湖北</option>
<option value="1">广东</option>
<option value="2">湖南</option>
</select>
<!--城市-->
<select id="selectPrince">
</select>
</body>
</html>