五 JavaScript案例

一、JS的图片轮播技术：

需求：若有一组图片，每隔3面钟就去切换一张。

技术分析：切换图片:每个3秒钟做一件事

setInterval(code,millisec[,"lang"]):按照指定的周期(毫秒记)俩调用函数或计算表达式.
code:要执行的代码串。 millisec:要执行的毫秒数
sertTimeOut():在指定的毫秒数后调用函数或表达式。

clearInterval(TimeID):停止定时器,停止后可以再次开启。 TimeID:SetInterval的变量
clearTimeOut(TimeID):停止定时器，停止后不能开启。 TimeID:SetTimeOut的变量

JS轮播的具体实现：

body添加onload事件，一进页面就触发
onload事件绑定init函数，init函数里添加setInterval(code,ms);
code里实现一个切换图片src功能的函数(依照图片名称取余+1实现3张图片轮播)

二、JS完成页面定时弹出广告

需求分析：一般网页，当我们打开的时候，会出现5秒钟广告，5秒之后消失
技术分析：

setInterval:每隔多少毫秒执行一次
setTimeOut:多少毫秒之后执行一次
clearInterval(TimeID):停止定时器,停止后可以再次开启。 TimeID:SetInterval的变量
clearTimeOut(TimeID):停止定时器，停止后不能开启。 TimeID:SetTimeOut的变量
显示和隐藏： img标签里设置： style=display:"block\none"

步骤分析：

定时弹出广告：
body添加onload事件
onload事件绑定init函数,函数里设置setTimeOut(hiddenImg(),5000);
hiddenImg()标签里将img的style属性里的display设置为none,则隐藏广告

三: 简单的用户名校验：

需求分析：注册页面，用户注册时给予提示。
技术分析：

引入外部JS文件：
<script src="../js/regutils.js">
用到的事件：
onfocus：获得交掉
onblur:失去焦点
onkeyup:按键抬起时触发事件
onsubmit:表单提交 onsubmit( return "func()")

步骤分析：

<form action="../css/轮播图片.html" method="get" onsubmit="return checkForm()">
用户名:<input id="username" type="text" onfocus="showTips('span_username','用户名长度不能少于6位')" onblur="checkUsername()" onkeyup="checkUsername()"/>
<span id="span_username"></span><br />

四：隔行换色

需求分析：有个table，改变每行颜色，
步骤分析：

确定事件:文档加载完成事件onload
事件触发函数：init()
函数操作页面元素: 表格行（拿到table,里面有rows[]、cells[],有bgColor属性）

全选和全不选
步骤分析：
function checkAll(){
/*
       获取当前第一个checkBOX单位状态
        获取所有分类项的checkBox
        修改所有分类项CheckBox状态
*/
var checkOne = document.getElementById("check1");
//获取当前第一个checkBOX单位状态
var checked = checkOne.checked;
//拿到input的Name为one数组
var NeedChecks = document.getElementsByName("one");
//alert(checks.length);
for (var i=0; i<NeedChecks.length ; i++) {
   //修改每一个checkBox的状态
   var check = NeedChecks[i];
   check.checked = checked;
           }
       }

五：省市联动效果

技术分析：
什么是Dom:Document Object Model : 管理我们的文档,增删改查的规则

一些常用的方法：

getElementByID(id)
appendChild(node): 插入新的子节点(元素)
removeChild(node): 删除子节点（元素）

常用的HTML DOM属性：

innerHTML - 结点（元素）的文本值
parentNode：结点（元素）的父亲结点
childNodes:结点（元素）的子节点
attributes:结点（元素）的属性结点

步骤：

准备数据(城市数组)
确定事件：onchange
确定函数：selectProvince()

函数搞事情：

得到当前操作元素
得到当前选中省份
从数组中拿到省份对应的城市信息，
动态创建城市元素节点，添加到城市select中

六：商品的左右选择

1.确定事件：点击事件onclick
2.触发函数：selectOne()
3.函数功能：
将左边select选中项移移动到了右边另一个select中

目录：