Task today
JS complete page regular use pop-up ads
Use of the completed form validation JS
JS complete the form using interlaced color change
Use JS to complete the check box Select effect
Use JS to complete the provinces linkage effect
JS control around drop-down list
Teaching navigation
- BOM grasp an object in JS
- JS grasp of common events
- Master the common DOM operations in JS
- Learn built-in objects in JS
The last time the contents of the review:
CSS: Cascading Style Sheets
Main functions: to beautify the page, landscaping and HTML separation, improve code reusability
Selector:
Selector elements: element name {}
Class selector: the beginning.
ID selector: #ID selector
Descendant selectors: 1 Selector Selector 2
Selector sub-elements: Selector 1> selector 2
The selector group: a selector, the selector 2, the selector {3}
Attribute selector: Selector [attribute name = "value of the property ']
Pseudo class selector:
float:
float 属性: left right
Clear float:
clear 属性: both left right
Box model: 20px 30px 40px direction clockwise 10px left padding the bottom right
Padding: the control box from
Borders: Borders box
Margin: controlling the distance between the box and the box
Absolute positioning: position: absolute; top: left
JS Development: is a scripting language interpreted by the browser to execute, do not need to be compiled
JS variable declaration: var variable name;
JS function declaration: the function name of the function (parameter name) {}
JS development steps:
1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作, 弹框, 修改页面内容,动态去添加一些东西
0. Carousel Figure Autoplay
demand:
There are a set of images every three seconds, and went to a switch, ultimately has been constantly switch
technical analysis:
Switching picture:
Each three seconds to do one thing:
Step analysis:
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeImg()
4. changeImg()
1. 获得要切换图片的那个元素
1. Complete the page timed pop-up ads
1.1 Requirements Analysis
General page, when we first opened, it will be after 5 seconds and display an advertisement, let us look at five seconds, and then his advertisement will automatically disappear!
1.2 Technical Analysis
-
Timer
- setInterval: how many milliseconds to perform a function every
- setTimeout: perform a function after how many milliseconds
- clearInterval
- clearTimeout
- Display advertising img.style.display = "block"
- Hidden advertising img.style.display = "none"
1.3 Analysis of step
- Determine events: the page loads onload event
- Event to trigger functions: init ()
-
Inside the init function to do one thing:
- Start a timer: setTimeout ()
-
A display ad
- Then go on to open a timed five seconds, turn off advertising
1.4 code implementation
<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 Extended
- JS manner of introduction
2. Complete the form to complete the verification
2.1 Requirements Analysis
Yesterday we made a simple form validation, whenever the user enters when something goes wrong, we pop up a dialog box that prompts the user to modify. This user experience is not very good. We need today is for him to carry out a modification, when the user enters information in question, we will re-enter the back of the box to give him a friendly hint.
2.2 Technical Analysis
[HTML attributes in innerHTML]
[Common event in JS]
onfocus event: get the focus event
onblur: lose focus
onkeyup: button up event
2.3 Analysis of step
2.4 code implementation
<!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>Morning Review:
Timer:
setInterval ( "test ()", 3000) performs a function every how many milliseconds
setTimeout ( "test ()", 3000) to perform a function after how many milliseconds
After timerID above the timer calls
clearInterval()
clearTimeout()
Switching picture
img.src = "image path"
Event: Event onload event has finished loading the document
Display advertising: img.style.display = "block"
Hidden advertising: img.style.display = "none"
The introduction of an external js file
<script src="js文件的路径" type="text/javascript"/>Commonly used form validation event:
Event gets the focus: onfocus
Onblur event loses focus
Button-up event: onkeyup
JS development steps
1. 确定事件
2. 事件要触发函数: 定义函数
3. 函数通常都要去做一些交互: 点击, 修改图片, 动态修改innerHTML属性... innerTEXT
3. Form interlaced color change
3.1 Requirements Analysis
Categories of information that we too, if each row to display the same color, then will people see vertigo, in order to improve the user experience and reduce user wrong, they are necessary to form interlaced color change
3.2 Technical Analysis
Change the color of the line
3.3 Analysis of step
-
OK Event: Document loaded onload
-
Event to trigger functions: init ()
- Function: operating elements of the page
to each row in the table operation
changes the background color dynamic lines
- Function: operating elements of the page
-
3.4 code implementation
<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>4. Select the check box is not selected, and the whole
4.1 Requirements Analysis
Categories interface, when we click on the box the whole time, we want to select all of the goods when we cancel, we do not want to select all the goods
4.2 Technical Analysis
Event: onclick click event
4.3 Analysis of step
Select All and Select None step analysis:
1. Determine Event: onclick single event
2. Event trigger function: checkAll ()
3. function to do something:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态Code
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;
}
}The linkage effects provinces
5.1 Requirements Analysis
5.2 Technical Analysis
What is DOM: Document Object Model: managing our document CRUD rules
[In] HTML DOM manipulation
一些常用的 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 Analysis of step
5.4 code implementation
6. Use the left and right selection drop-down control JS
6.1 Requirements Analysis:
In our category management, we want to be able to modify our classified information, when we modify a little time, you can edit a jump to the page, which can change the name of this classification, classification description and classification of goods
Analysis Step 6.2:
6.3 code implementation
<!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>Today Content brief review:
Timer:
setInterval
setTimeout
clearInterval
clearTimeout
Hide a Picture
img.style.display = "block"
img.style.display = "none"
A form commonly used in the event:
onfocus: get focus events
onblur: lost focus event
onkeyup: Key events raised
onclick: Click Event
ondblclick: Double-click event
Table interlaced color change, and move the mouse to remove discoloration:
onmouseenter: move the mouse
onmouseout: mouse out
onload: document loaded event
onsubmit: submitted
onchange: drop-down list of content changes
checkbox.checked selected
DOM Document Actions:
Add Nodes: appendChild
Create a node: document.createElement
Create a text node: document.createTextNode ()
JS development steps:
1. 确认事件
2. 事件触发函数
3. 函数里面要做一些交互