五 JavaScript案例

标签：onkeyup   gid   zfs   tst   wpf   gif   选中   增删改   cnn   

目录：

1. JS的图片轮播技术：
2. JS完成页面定时弹出广告
3. 简单的用户名校验：
4. 隔行换色
5. 省市联动效果
6. 商品的左右选择

一、JS的图片轮播技术：

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

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

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

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

JS轮播的具体实现：

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

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

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

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

步骤分析：

1.     定时弹出广告：     
2.     body添加onload事件
3.     onload事件绑定init函数,函数里设置setTimeOut(hiddenImg(),5000);
4.     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，改变每行颜色，
步骤分析：

1. 确定事件:文档加载完成事件onload
2. 事件触发函数：init()
3. 函数操作页面元素: 表格行（拿到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:结点（元素）的属性结点

   步骤：

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

   函数搞事情：

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

六：商品的左右选择

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

五 JavaScript案例

标签：onkeyup   gid   zfs   tst   wpf   gif   选中   增删改   cnn   

原文地址：https://www.cnblogs.com/ltfxy/p/10127821.html