JavaScript的简介
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
在此后简称JS
JS注册表单的检验
Document:整个html文件就称为一个document文档;
Element: 所有的标签都是Element元素;
Attribute: 标签里面的属性；
Text：百度
Node: 上面所讲的所有名词都属于节点node;
<a href="http://xxx.com">百度</a>
- 需求:
1). 用户在注册的时候会输入一些信息， 但是用户输入的内容有可能不合法， 会导致服务器端压力过大;
2). 当用户填写信息之后， 对填写的信息进行校验（前端校验， 只能防君子不能防小人）
后台校验: 也是需要校验的； - 需要掌握的技能:
1). 如何在加载页面时执行指定函数?
2). 如何获取指定元素对象?
3). 如何弹出一个警告框?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
#当窗口在加载时执行的函数
window.onload = function () {
#获取用户输入的用户名的标签对象;
var uEle = document.getElementById('username')
#获取这个对象里面的值；
var uValue= uEle.value;
# 弹出一个警示框
alert(uValue)
}
</script>
</head>
<body>
#get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
# post: 填写的信息不会在url里面显示
<form action="#" method="get">
用户名：<input type="text" name="username" placeholder="用户名" id="username"><br>
密码：<input type="password" name="passwd" placeholder="密码"><br>
<input type="submit" value="注册">
</form>
</body>
</html>
检验用户名及密码
实现步骤:
1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
2. 对这个事件绑定一个函数(执行的操作写在函数里面);
3. 函数的核心功能: 校验用户名是否为空?
1). 获取输入用户名标签提交的内容；
2). if判断用户名是否为空?
3). 如果数据合法， 继续执行， 提交表单；
4). 如果数据不合法， 不让表单提交? (显示弹出框报错) —
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
#定义一个函数
function checkFrom() {
#获取输入用户名标签提交的内容；
var user = document.getElementById('username').value;
#if判断用户名是否为空?
#如果数据合法， 继续执行， 提交表单；
#如果数据不合法， 不让表单提交? (显示弹出框报错)
if (user === ''){
# 两个等号做比较时， 会将字符串转换为整形进行比较;
alert("用户名不能为空!");
return false
}
# 获取密码长度
var passwdlen = document.getElementById('passwd').value.length;
if (passwdlen < 6){
alert("密码不合法：长度小于6!");
return false;
}
}
</script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkFrom()">
用户名：<input type="text" name="username" placeholder="用户名" id="username"><br>
密码：<input type="password" name="passwd" placeholder="密码" id="passwd"><br>
<input type="submit" value="注册">
</form>
</body>
</html>
轮播图的实现
实现图片的切换
思路:
1. 确定事件类型为onclick事件；
2. 并跟对应的函数changeImg绑定在一起；
3. 实现函数功能；
1). 当点击下一页按钮之后， 修改img标签里面的src属性内容;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#sowing_map{
width: 590px;
height: 500px;
#块级元素居中:margin: 0 auto;
#行内元素居中:text-align: center;
margin: 0 auto;
text-align: center;
}
</style>
<script>
# 定义一个变量， 控制图片的循环顺序;
var i = 1;
function changeImg() {
# 当点击下一页时， i+1, 这个时候， 图片变成img2;
i += 1;
#修改img标签里面的src属性内容;
document.getElementById('img').src = 'img/img'+i+'.jpg';
# 如果图片轮播结束， 从头开始轮播；
if (i === 6){
i = 0;
}
}
</script>
</head>
<body>
<div id="sowing_map">
<img src="img/img1.jpg" id="img">
<input type="button" value="下一页" onclick="changeImg()">
</div>
</body>
</html>
轮播图
思路:
1. 确定事件类型为onclick事件；
2. 并跟对应的函数changeImg绑定在一起；
3. 实现函数功能；
1)每隔1秒修改img标签里面的src属性内容;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#sowing_map{
width: 590px;
height: 500px;
margin: 0 auto;
text-align: center;
}
</style>
<script>
window.onload = function () {
# 每隔1s自动执行某一个函数
setInterval('changeImg()',1000);
};
var i = 1;
function changeImg() {
i += 1;
document.getElementById('img').src = 'img/img'+i+'.jpg';
if (i === 6){
i = 0;
}
}
</script>
</head>
<body>
<div id="sowing_map">
<img src="img/img1.jpg" id="img">
</div>
</body>
</html>
外部引入JS和CSS的方式实现轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
Js的引入方式:
- 内部引入: 直接在head标签里面的<script>写的内容;
- 外部引入:<script src="js/main.js" ></script
-->
<link href="css/main.css" rel="stylesheet">
<script src="js/main.js" ></script>
</head>
<body>
<div id="sowing_map">
<img src="img/img1.jpg" id="img">
<!--<input type="button" value="下一页" onclick="changeImg()">-->
</div>
</body>
</html>
定时弹出广告
目标:
实现网页定时弹出广告， 并定时取消弹出的广告;
步骤:
1. 在页面设置一个隐藏的图片; style=“display: none”
2. 确定事件类型为onload， 为其绑定一个函数;
3. 设置定时执行显示图片的函数showAd();
4. 编写定时任务里面的函数showAd()----
- 获取标签的样式display=‘block’;
- 清除显示广告的定时任务;
- 编写隐藏广告图片的定时任务;
- 实现定时任务里面的函数hiddenAd();
- 获取标签的样式display=‘none’;
- 清除隐藏广告的定时任务;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#sowing_map{
width: 590px;
height: 500px;
margin: 0 auto;
text-align: center;
}
#ad{
width: 1190px;
height: 80px;
margin: 0 auto;
text-align: center;
}
</style>
<script>
window.onload = function () {
setInterval('changeImg()',1000);
# 在js的函数里面。 变量名没有var时， 是一个全局变量;
adtime = setInterval('showAd()',1000);
};
var i =1;
function changeImg() {
i +=1;
document.getElementById('img').src = 'img/img' + i + '.jpg';
if (i === 6){
i = 0;
}
}
# 编写显示隐藏图片的函数
function showAd() {
# 获取到广告图片对应的标签对象
var adEle = document.getElementById('ad_img');
#修改广告图片元素里面的style属性里面的display
adEle.style.display = 'block';
# 清除显示图片的定时操作；
clearInterval(adtime);
# 设置隐藏广告图片的定时任务；
hiddentime = setInterval('hiddenAd()',3000);
}
function hiddenAd() {
# 获取到广告图片对应的标签对象
var adEle = document.getElementById('ad_img');
#修改广告图片元素里面的style属性里面的display
adEle.style.display = 'none';
#清除隐藏图片的定时任务;
clearInterval(hiddenAd)
}
</script>
</head>
<body>
<div id="sowing_map">
<img src="img/img1.jpg" id="img">
</div>
<div id="ad">
<img src="img/img7_ad.jpg" id="ad_img" style="display: none">
</div>
</body>
</html>
表格的全选和全不选
需求:
实现批量选中和批量不选中
步骤分析:
1). 确定事件类型:鼠标单击单选按钮时(onclick事件)， 绑定一个函数；
2). 编写函数checkAll()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkAll() {
//1. 获取全选框对象
var chekAllEle = document.getElementById('checkAll');
// //判断该单选框是否被选中，
// alert(checkAllEle.checked);
// 2. 对编号前面的复选框的状态进行判断;
// - 如果状态为选中， 则设置所有的单选框为选中状态;
// - 如果状态为没有选中， 则设置所有的单选框为没有选中状态;
if (chekAllEle.checked){
//- 如果状态为选中， 则设置所有的单选框为选中状态;
var checkOnes = document.getElementsByName('checkOne');
// 依次遍历所有的单选框， 设置状态为选中;
for (var i=0;i<checkOnes.length;i++){
checkOnes[i].checked=true;
}
}else {
var checkOnes = document.getElementsByName('checkOne');
for (var j=0;j<checkOnes.length;j++){
checkOnes[j].checked = false;
}
}
}
</script>
</head>
<body>
<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
<th style="text-align: center;" colspan="5">
<input type="button" value="添加">
<input type="button" value="删除">
</th>
<tr>
<th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" ></td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>5</td>
<td>5</td>
<td>1</td>
<td>5</td>
</tr>
</table>
</body>
</html>
动态添加城市
-
需求:
点击一个按钮， 动态实现添加城市; -
实现步骤:
- 确定事件类型onclick
- 对于事件绑定一个函数addLiElement()
- 获取到用户在input输入框中填写的信息;
city = document.getElementById(“city”).value
city = document.getElementsByName(“city”)[0].value
2). 创建一个城市的文本节点；document.createTextNode(‘xxxx’)
3). 创建一个li的元素节点; document.createElement(‘xxxx’)
4). 将文本节点添加到li元素节点里面去;
5). 将整体添加到ul标签里面去;
使用appendChild()来添加子节点;
- 获取到用户在input输入框中填写的信息;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addCity() {
#1) 获取到用户在input输入框中填写的信息;
var city = document.getElementById('city').value;
# 2). 创建一个城市的文本节点；
var textNode = document.createTextNode(city);
# 3). 创建一个li的元素节点;
var liEleNode = document.createElement('li');
# 4). 将文本节点添加到li元素节点里面去;
liEleNode.appendChild(textNode);
# 5). 将整体添加到ul标签里面去;
var ulEleNode = document.getElementById('ul_city');
ulEleNode.appendChild(liEleNode);
}
</script>
</head>
<body>
<input type="text" placeholder="请输入城市" id="city">
<input type="submit" value="添加城市" onclick="addCity()">
<ul id = 'ul_city'>
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
</body>
</html>
二级联动的实现
- 需求分析
省市的二级联动 - 步骤实现
- 1). 确定事件类型onchange, 并为其绑定一个函数;
- 2). 修改下拉列表内容;
- 2-1). 获取用户选择的省份;
- 2-2). 创建一个二维数组， 用来存储省份和城市的对应关系;
- 2-3). 遍历二维数组中的省份；
- 2-4). 遍历时省份编号和用户选择的省份编号进行比较，
- 2-5). 如果相同， 遍历该省份下的所有城市;
- 将每一个城市以城市名添加到select里面去; - 2-6). 如果不相同， 继续循环遍历省份;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 0 auto;
text-align: center;
margin-top: 10%;
}
</style>
<script>
function changeCity() {
// 1. 获取用户选择的省份;
var choiceProvince = document.getElementById('province').value;
// 2. 创建一个二维数组， 用来存储省份和城市的对应关系;
// 如何创建二维数组？
var cites = new Array(3);
cites[0] = new Array("西安","宝鸡","咸阳");
cites[1] = new Array("成都","乐山","绵阳");
cites[2] = new Array("济南","青岛","烟台");
// 找出关于城市的下拉列表(根据id=“city”)
var selectEleNode = document.getElementById('city');
// 清空第二个下拉列表里面的所有option标签;
selectEleNode.options.length = 0;
// 3. 遍历时省份编号和用户选择的省份编号进行比较
for (var i = 0;i<cites.length;i++){
//此处比较的是省份编号
if (choiceProvince == i){
// 4. 如果相同， 遍历该省份下的所有城市 ；
for(var j=0;j<cites[i].length;j++){
//5. 创建城市的文本节点;
var texNode = document.createTextNode(cites[i][j]);
//6. 创建option的元素节点
var optionEleNode = document.createElement("option");
//7. 将城市的文本节点追加到option元素节点里面去;
optionEleNode.appendChild(texNode);
//9. 将option节点内容追加到select节点里面去;
selectEleNode.appendChild(optionEleNode)
}
}
}
}
</script>
</head>
<body>
<form>
<div>
<span>籍贯:</span>
<select id="province" onchange="changeCity()">
<option>--省份--</option>
<option value="0">陕西省</option>
<option value="1">四川省</option>
<option value="2">山东省</option>
</select>
<select id="city">
<option>--市区--</option>
</select>
</div>
</form>
</body>
</html>
注册界面的优化
1). 确定事件类型(onfocus-聚焦事件)， 并为其绑定一个函数;
2). 确定事件类型(onblur-离焦事件)， 并为其绑定一个函数;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
.login{
width: 300px;
height: 400px;
border: 1px solid rgba(255, 0, 0, 0.27);
margin: 0 auto;
margin-top: 90px;
background-color: snow;
border-radius: 5px;
}
.login_head{
width: 100%;
height: 60px;
border: 1px solid snow;
text-align: center;
padding-bottom: 10px;
}
.login_body{
width: 100%;
height: 310px;
}
.login_form{
width: 100%;
height: 100%;
text-align: center;
}
.login_table{
width: 100%;
height: 40%;
/*border: 1px solid green;*/
text-align: center;
margin-top: 50px;
}
#submit_part{
width: 90%;
height: 40px;
margin-top: 50px;
background-color: #f10180;
color: white;
border-radius: 5px;
}
</style>
<script>
function showUserTip() {
document.getElementById('userTip').innerHTML = '<b style="color: lightgray;font-size: x-small;">用户名不能为空</b>';
}
function showPwdTip() {
document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;font-size: x-small;">密码必须大于6位</b>';
}
function checkUser() {
var name = document.getElementById('username').value;
if (name === ''){
document.getElementById('userTip').innerHTML = '<b style="color: #f10180;font-size: x-small;">用户名不能为空</b>'
return false;
}else{
document.getElementById('userTip').innerHTML = '<b style="color: green;font-size: x-small;"> ok </b>'
return true;
}
}
function checkPwd() {
var pwdLen = document.getElementById('passwd').value.length;
if (pwdLen < 6){
document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180;font-size: x-small;">密码必须大于等于6位</b>'
return false;
}else{
document.getElementById('pwdTip').innerHTML = '<b style="color: green;font-size: x-small;"> ok </b>'
return true;
}
}
</script>
</head>
<body>
<div class="login">
<div class="login_head">
<h2 style="color: #f10180;">注册界面</h2>
</div>
<hr style="margin: 0;color: rgba(128, 128, 128, 0.44)">
<div class="login_body">
<form action="#" method="get" class="login_form">
<table class="login_table" cellspacing="0">
<tr>
<td style="color: #f10180">用户名：</td>
<td><input style="width: 80%" type="text" id="username" name="username" placeholder="请输入用户名"
onfocus="showUserTip()" onblur="checkUser()"></td>
</tr>
<tr style="height: 5px">
<td colspan="2"><span id="userTip"></span></td>
</tr>
<tr>
<td style="color: #f10180">密码：</td>
<td><input type="password" id="passwd" name="passwd" placeholder="请输入密码"
onfocus="showPwdTip()" onblur="checkPwd()"></td>
</tr>
<tr style="height: 5px">
<td colspan="2"><span id="pwdTip"></span></td>
</tr>
</table>
<input id="submit_part" type="submit" value="立即注册">
</form>
</div>
</div>
</body>
</html>
扫一扫
1432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
