js提升的6个小案例
1.js完成图片轮播效果
步骤分析:
- 创建html文件
- 在页面加载时添加onload事件
- 编写onload事件触发的函数
- 获取图片的控制权
- 修改图片的src属性
<script>
//绑定页面加载时的触发事件和函数
window.onload = function(){
//设置每隔5秒执行change函数
window.setInterval("change()",5000);
}
//编写函数
//设置轮换图片的变量i
var i = 1;
function change(){
i++;
if(i > 3) {
i =1;
}
//得到图片对象
var img = document.getElementById("img1");
img.src = "./img/"+i+".jpg";
}
</script>
2.使用js定时弹出广告定时隐藏
步骤分析
- 创建html文档
- 绑定页面加载的事件和执行的函数
- 编写触发的函数
<script>
//绑定页面加载的触发事件
window.onload = function(){
//设置触发函数的时间
window.setTimeout("show",1000);
}
//编写显示的函数
function show() {
//得到广告显示处的div对象
var adDiv = document.getElementById("adDiv");
//设置div显示
adDiv.style.display = "block";
//调用隐藏
window.setTimeout("hide()",1000);
}
//编写隐藏函数
function hide(){
//得到广告显示处的div对象
var adDiv = document.getElementById("adDiv");
//设置div为隐藏
adDiv.style.display = "none";
//调用显示的函数
window.setTimeout("show()",1000);
}
</script>
3.使用js完成注册页面的表单校验
步骤分析
- 创建html文档
- 在校验的文本框上添加事件
- 触发事件绑定的函数
<script>
//在表单后面绑定提交的check函数
//用户名验证
function check(){
//获取到username表单对象
var username = document.getElementById("username").value;
//判断用户名是否为空
if(username == ""){
//提示
alert("用户名不能为空");
//返回false不让表单提交
return false;
}
//获取到password表单对象
var password = document.getElementById("pasword").value;
//获取重复密码对象
var repassword = document.getElementById("repassword").value;
//判断
if(password != repassword) {
//提示
alert("前后密码不一致");
//返回false给submit事件
return false;
}
}
</script>
4.使用js完成隔行换色
步骤分析
- 创建html文档
- 确定onload事件
- 在触发的函数中获得操作的表格
- 获得表格的所有行数
- 遍历表格
- 判断偶数和奇数
<script>
//在body中添加onload事件并绑定changeColor函数
//第一行不想换色就把第一个tr嵌入<thead>标签,后面的<tr>嵌入<tbody>标签
//编写函数
function changeColor(){
//得到table对象
var tab = document.getElementById("tab");
//得到第一个tbodys标签下的tr的length
var len = tab.tBodies[0].rows.length;
//遍历
for (var i=0;i<len;i++) {
//判断奇数偶数
if(i % 2 == 0){
//为偶数tr设置背景颜色
tab.tBodies[0].rows[i].style.backgroundColor="green";
}else {
//为奇数tr设置背景颜色
tab.tBodies[0].rows[i].style.backgroundColor="red";
}
}
}
</script>
5.完成复选框的全选和全不选效果
步骤分析:
- 创建html文档
- 确定复选框的单击事件
- 触发一个函数
- 在函数中确定全选按钮有没有被选中,
- 如果选中,下面得都选中,
- 没有,下面的也都不选中
<script>
function changeColor() {
var tab1 = document.getElementById("tab1");
var len = tab1.tBodies[0].rows.length;
for(var i=0;i<len;i++) {
i % 2==0?tab1.tBodies[0].rows[i].style.backgroundColor="green" : tab1.tBodies[0].rows[i].style.backgroundColor="red";
}
reverseCheck();
}
function checkAll() {
//获取到复选框的根标签
var selectAll = document.getElementById("selectAll");
//得到复选框下面的
var ids = document.getElementsByName("ids");
for(var i=0;i<ids.length;i++) {
//让上下一致
ids[i].checked = selectAll.checked;
}
}
var count = 0;
//不选其中一个就全校全选
function reverseCheck() {
var ids = document.getElementsByName("ids");
var selectAll = document.getElementById("selectAll");
for(var i=0;i<ids.length;i++) {
ids[i].onclick = function() {
if(this.checked) {
count++;
}else {
count--;
}
selectAll.checked = count == ids.length;
}
}
}
//反选
function invert() {
var selectAll = document.getElementById("selectAll");
var ids = document.getElementsByName("ids");
for(var i =0;i<ids.length;i++){
ids[i].checked =! ids[i].checked;
if(this.checked) {
count++;
}else {
count--;
}
selectAll.checked = count == ids.length;
}
}
</script>
6.二级下拉菜单的联动
步骤分析:
- 新建html文档
- 确定onchange事件
- 获得到所选择的省份的信息
- 根据信息获取对应的数组中的信息
- 遍历数组中的信息
- 创建元素,创建文本,将元素添加到第二个列表中
<script>
//创建二维数组,并未里面的元素赋值
var arrs = new Array(2);
arrs[0] = new Array("渝中区","渝北区");
arrs[1] = new Array("成都","眉山");
//得到option中的value(选择菜单)
var val = document.getElementById("province").value;
//清空第二个列表中的内容
document.getElementById("city").options.length=0;
//遍历集合
for(var i=0;i<arrs.length;i++) {
if(i == val) {
//获取对应val的信息
for (var j=0;j<arrs[i];j++) {
//创建option标签
var opEl = document.createElement("option");
//创建内容标签
var text = document.createTextNode(arrs[i][j]);
//将内容添加到option标签
opel.appendChild(text);
//将option标签添加到二级下拉菜单的根标签
document.getElementById("city").appendChild(opEl);
}
}
}
</script>
