首页 > 代码库 > js提升的6个小案例
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>
js提升的6个小案例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。