java scrapt
Posted haowenliang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java scrapt 相关的知识，希望对你有一定的参考价值。
实现轮播图
获取元素 document.getElementById("id名称")
事件（onlond） onlond = "changeImg()" 在<script>中function changeImg(){ document.getElementById("img").src = "图片地址"}
定时操作：setInterval(code,millisec[,"lang"]) code 必需。要调用的函数或要执行的代码串；millisec必需，周期性执行或调用code之间的时间间隔以毫秒计算。 setInterval("changeImg()",3000)
总代码：
<body onload="init()">
function init(){//书写轮图片显示的定时操作setInterval("changeImg()",3000);}
//书写函数var i=0function changeImg(){i++;//获取图片位置并设置src属性值document.getElementById("img1").src="../img/"+i+".jpg";if(i==3){i=0;}}
弹出广告图
获取图片位置document.getElementById("id名称")
隐藏图片：display：none
定时操作：setInterval("显示图片的函数",3000);
步骤分析：
一：在页面指定位置隐藏一个广告图片（使用display属性的none值）<img>标签中设置<img src="#" width="100%" style="display: none" id="img2"/>
二：确定事件（onload）并为其绑定一个函数 function init(){time=setInterval("showad()",3000);}
三：书写这个函数（设置一个现实图片的定时操作）function showad(){var adEle = document.getElementById("img2");adEle.style.display="block";clearInterval(time);time = setInterval("hiddenAd()",3000);}
四：书写定时器中的函数（获取广告图片的位置并设置属性stule的display值block）adEle.style.display="block";
五：清除显示图片的定时操作clearInterval(time);
六：书写隐藏图片的定时操作;time = setInterval("hiddenAd()",3000);
七：书写定时器中的函数（获取广告图片的位置并设置属性style的display值none）function hiddenAd(){document.getElementById("img2").style.display="none";clearInterval(time);}
八：清除隐藏图片的定时操作clearInterval(time);
BOM对象
window对象：
widnow对象表示在浏览器中打开的窗口
常用方法：在前面的案例中有应用。
alert（）：显示带有一段消息和一个确认按钮的警告框
clearInterval():取消由setInterval()设置的timeout 该方法只能清除由 setInterval 设置的定时操作 clearInterval(time);
clearTimeout():取消由setTimeout()方法设置的timeout 该方法只能清除由 setTimeout 设置的定时操作
confirm（）：显示带有一段消息及确认按钮和取消按钮的对话框 confirm("您确认删除吗？");
prompt()显示可提示用户输入的对话框
setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式 它有一个返回值，主要是提供给 clearInterval 使用。 time = setInterval("hiddenAd()",3000);
setTimeout():在指定的毫秒后调用函数或计算表达式 有一个返回值，主要是提供给 clearTimeout 使用。
location对象
对象包含有关当前URL的信息
常用对象属性：
href:设置或返回完整的URL 在<script>标签中 Window.location.href="http://itcast.cn";
history对象方法
back（）：加载history列表中的前一个URL<input type="button" value="返回上一个页面" onclick="javascript:history.back()"/>
forward（）：加载history列表中的下一个url
go():加载history列表中的某个具体页面 参数-1返回上一个历史页面；-2返回上上一个历史页面记录，1进入下一个历史页面记录，0让按钮点击失效 onlick="javascript:volid(0)"
navigator对象
navigator对象包含浏览起的信息。（该对象开发中不怎么用）
screen对象
screen对象包含有关客户端显示屏幕的信息（开发中不常用）
实现表格隔行换颜色效果
新内容：
在<table>标签框中：<thead> <tr> <th></th></tr></thead> <tbody><tr> <td></td></tr></tbody> <thead>标签定义的是表格的头部<tbody>标签定义的是表格的身体部分，在这两个标签使用的时候，注意其中的<tr><th><td>的使用情况
确定事件：（页面加载事件onload）
获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。
Tbody里面的行数(rows.length)
设置背景颜色(.style.backgroundColor)
步骤分析
第一步：确定事件(onload)并为其绑定一个函数window.onload = function(){var tblEle = document.getElementById("tbl"); var len=tblEle.tBodies[0].rows.length;//alert(len);for(var i=0;i<len;i++){if(i%2==0){tblEle.tBodies[0].rows[i].style.backgroundColor="pink";}else{tblEle.tBodies[0].rows[i].style.backgroundColor="gold";}}} id地址书写在<table>标签中
第二步：书写函数(获取表格)var tblEle = document.getElementById("tbl");
第三步：获取tbody里面的行数var len=tblEle.tBodies[0].rows.length; 在js中没有集合，只有数组
第四步：对tbody里面的行进行遍历
第五步：获取奇数行和偶数行(角标对2取余)
第六步：分别对奇数行和偶数行设置背景颜色tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
表格高亮显示：
事件：onmouseover鼠标移动到某元素上 和onmouseout鼠标从某元素移开
步骤：
第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数<tr onmouseover="changeColor(‘tr1‘,‘over‘)" id="tr1" onmouseout="changeColor(‘tr1‘,‘out‘)">
第二步：获取鼠标移上去的那行，对其设置背景颜色function changeColor(id,flag){if(flag=="over"){document.getElementById(id).style.backgroundColor="red";}else if(flag=="out"){document.getElementById(id).style.backgroundColor="white";}}
全选和全不选
事件：(鼠标单击事件onclick)
步骤：
第一步：确定事件(onclick)并为其绑定一个函数th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
第二步：书写函数(获取编号前面的复选框，获取其状态)function checkAll(){var checkAllEle = document.getElementById("checkAll");
if(checkAllEle.checked==true){var checkones = document.getElementsByName("checkone");for(var i=0;i<checkones.length;i++){checkones[i].checked=true;}}else{var checkones = document.getElementsByName("checkone");for(var i=1;i<checkones.length;i++){checkones[i].checked=false;}}
第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)if(checkAllEle.checked==true){var checkones = document.getElementsByName("checkone");for(var i=0;i<checkones.length;i++){checkones[i].checked=true;}
第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)var checkones = document.getElementsByName("checkone");for(var i=1;i<checkones.length;i++){checkones[i].checked=false;}
二级联动
事件(onchange)
使用方法：
将某元素添加 appendChild()
以下两个方法很重要，但是在手册中查不到！
创建文本节点：document.createTextNode()
创建元素节点：document.createElement()
步骤：
第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。
代码：
<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>
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>
以上是关于java scrapt 的主要内容，如果未能解决你的问题，请参考以下文章