正文

带你玩转JavaWeb开发之三 -JS插件实战开发

IP云
IP云V管理员/5 阅读
09/06
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前提:需要掌握的知识点

 
 
 
 
 

填写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="width: 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; width: 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="#">&gt;&gt;</a><br />

<a href="#">&gt;&gt;&gt;</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()">&lt;&lt;</a><br />

<a href="#" onclick="selectAll()">&lt;&lt;&lt;</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>