1.使用JS完成表单校验
- 分析思路
1.确定使用事件onsubmit事件
2.书写函数
3.对输入项进行非空判断
- 为表单绑定一个事件
<form action="#" method="get" onsubmit="return checkForm()">
- 需要校验的输入项目定义id
<input type="text" name="user" id="user" />
//document.getElementById("user");
//获取输入表单对象,对象调用属性value属性 就可以获取输入的值。
- JS代码
(1)使用弹框方式进行提示:
<script type="text/javascript">
function checkForm(){
/*校验用户名*/
//alert("aa");
//获取用户输入的数据
var uValue = document.getElementById("user").value;
//alert(uValue);
if(uValue==""){
//给出错误提示信息
alert("用户名不能为空！");
return flase;
}
/*校验邮箱*/
var Evalue = document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(Evalue)){
//给出错误提示信息
alert("邮箱格式不正确！");
return false;
}
}
</script>
(2)在输入框后面进行错误提示
思路分析:
/*
1.确定使用聚焦事件onfocus和离焦事件onblur和onsubmit
2.向页面指定位置写入内容：innerHTML
*/
第一步：确定事件(给出提示信息使用聚焦事件，给出校验结果信息使用离焦事件)并为其绑定函数
第二步：聚焦事件绑定的函数中(获取span给出提示信息)
第三步：离焦事件绑定的函数中(获取用户输入的内容进行判断)
第四步：如果失败，在span位置给出错误提示信息，如果成功，让span内容为空。
Html部分代码
<input type="text" name="user" id="user" onfocus="showTips('user','用户名必须以字母开头！')" onblur="check('user','用户名不能为空！')"/>
<span id="userspan"></span>
Javascript部分代码：
<sctript>
function showTips(id,info){
//获取span元素，给出提示信息
document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
}
function check(id,info){
//获取用户输入的数据
var uValue = document.getElementById(id).value;
//进行判断
if(uValue==""){
//在span位置给出错误提示信息
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
2.使用JS完成首页轮播图效果案例
思路分析:
1.确定事件onload(页面加载就会执行)
2.书写一个定时器:setInterval(“changeImg()”,3000);
3.编写函数,这个函数专门是用来改变图标的src属性达到定时切换图片的效果.
Html部分代码
确定事件：onload 加在body里面！
<body onload="init()">
给指定的图片位置定义一个id
<img src="../img/1.jpg" width="1300px" id="img1"/>
JS代码
<script>
function init(){
//定时器会返回一个值，这个值可以用来取消定时器的。
setInterval("changeImg()",3000);
}
var i=1;
function changeImg(){
i++;
var imgEl = document.getElementById("img1");
imgEl.src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
3.JS完成页面定时弹出广告
- 思路分析:
1.使用定时器
2.css样式属性display:none 隐藏;display:block 显示
3.获取元素对象document.getElementById
- Html部分代码：
<img src="../img/1.jpg" width="1300px" style="display: none;" id="img1"/>
确定事件(<body onload="init()">)
- Javascript部分代码：
<script type="text/javascript">
var time;
function init(){
//设置显示图片的定时操作
time = setInterval("showAd()",3000);
}
//显示图片的函数
function showAd(){
//获取广告图片的
var imgEl = document.getElementById("img1");
//设置图片的属性(display)让其显示
imgEl.style.display="block";
//清除显示图片的定时操作
clearInterval(time);
//设置隐藏广告图片的定时操作
time = setInterval("hiddenAd()",3000);
}
//书写隐藏广告图片的函数
function hiddenAd(){
//获取广告图片并设置隐藏的属性
document.getElementById("img1").style.display="none";
//清除隐藏图片的定时操作
clearInterval(time);
}
</script>
4.JS中事件
5.使用JS完成表格的一个隔行换色
- 技术分析
新标签的学习
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
确定事件(页面加载事件onload)
获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。
Tbody里面的行数(rows.length)
JS的遍历(for循环)
获取奇数行和偶数行(对遍历中角标对2取余)
设置背景颜色(.style.backgroundColor)
- js代码
<script>
window.onload = function(){
//1.获取表格
var tblEle = document.getElementById("tbl");
//2.获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//alert(len);
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
</script>
for in 可以对js数组进行遍历,可以理解成java中国的增强for
但是: for(index in arr){…} index表示的是数组的索引
6.事件总结
- onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
- onclick/ondblclick:鼠标单击和双击事件
- onkeydown/onkeypress：搜索引擎使用较多
- onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
- onmouseover/onmouseout/onmousemove：购物网站商品详情页。
- onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
- onchange:当用户改变内容的时候使用这个事件(二级联动)
7.使用JS完成全选和选不选操作
- 技术分析
确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面
获取编号前面的复选框的状态(是否选中)
获取复选框：var checkAllEle = document.getElementById(“id”)
获取复选框的状态：checkAllEle.checked=true表示选中，false为未选中。
获取下面所有的复选框：
document.getElementsByName(“name”);
- HTML代码：
复选框前面的：
<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
下面所有的复选框：
<td><input type="checkbox" name="checkOne"/></td>
- JS部分代码：
<script>
function checkAll(){
//1.获取编号前面的复选框
var checkAllEle = document.getElementById("checkAll");
//2.对编号前面复选框的状态进行判断
if(checkAllEle.checked==true){
//3.获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//4.对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//5.拿到每一个复选框，并将其状态置为选中
checkOnes[i].checked=true;
}
}else{
//6.获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//7.对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//8.拿到每一个复选框，并将其状态置为未选中
checkOnes[i].checked=false;
}
}
}
</script>
8.使用JS完成省市二级联动
技术分析
事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建？)
获取用户选择的省份(使用方法传参的方式：this.value)
遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)
创建文本节点和元素节点并进行添加操作
createTextNode()
createElement()
appendChild()
步骤分析
第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。
Html代码：
<select onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
JS代码：
<script>
//1.创建一个二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function changeCity(val){
//7.获取第二个下拉列表
var cityEle = document.getElementById("city");
//9.清空第二个下拉列表的option内容
cityEle.options.length=0;
//2.遍历二维数组中的省份
for(var i=0;i<cities.length;i++){
//注意，比较的是角标
if(val==i){
//3.遍历用户选择的省份下的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4.创建城市的文本节点
var textNode = document.createTextNode(cities[i][j]);
//5.创建option元素节点
var opEle = document.createElement("option");
//6.将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
//8.将option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/100785.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
