一、使用JS定时弹出广告
需求分析：
在浏览网站的时候，通常会5秒左右在顶部显示一个广告。过了5秒钟将这个广告隐藏。在网站的首页上显示这个广告。
技术分析：
【JS的定时操作】
setInterval();
setTimeout();
clearInterval();
clearTimeout();
【CSS控制显示和隐藏的属性】
display:
block :显示的
none :隐藏的
步骤分析：
步骤一：确定事件：onload.
步骤二：在函数中设置定时的操作.5秒显示这个div.
步骤三：清除原来的定时，重新设置一个定时操作.5秒以后隐藏掉.
步骤四：设置5秒后隐藏的定时，可以清除.
代码实现：
<script>
var time;
function init(){
// 设置定时操作：
time = setInterval("showAd()",5000);
}
function showAd(){
// 获得div元素
var divAd = document.getElementById("divAd");
divAd.style.display = "block";
// 清除之前的定时操作：
clearInterval(time);
// 重新设置一个定时：5秒钟隐藏：
time = setInterval("hideAd()",5000);
}
function hideAd(){
// 获得div元素
var divAd = document.getElementById("divAd");
divAd.style.display="none";
clearInterval(time);
}
</script>
二、使用JS控制表格的隔行换色
需求：
在网站的后台的表格页面中让表格显示出隔行换色的效果。
技术分析：
【使用JS控制表格】
var tab1 = Document.getElementById(“tab1”);
var rows = tab1.rows.length;
for(){
if(i % 2 == 0){
}
}
步骤分析：
步骤一：确定事件：onload事件
步骤二：获得表格元素
步骤三：获得表格的所有行的长度
步骤四：遍历表格的所有行
步骤五：使用下标对2取余
步骤六：设置奇数行和偶数行的颜色。
代码实现：
<script>
window.onload = function(){
// 获得表格元素：
var tab1 = document.getElementById("tab1");
// 获得表格的所有的行数：
var len = tab1.rows.length;
// 遍历所有的长度
for(var i=0;i<len;i++){
// 判断是奇数行还是偶数行：
if(i % 2 == 0){
tab1.rows[i].style.backgroundColor = "#33FF22";
}else{
tab1.rows[i].style.backgroundColor = "#883311";
}
}
}
</script>
三、使用JS控制复选框的全选和全不选的效果
需求的分析：
在后台管理页面中，往往会有批量删除数据的效果，就需要有复选框全选和全部选的效果。
全选全不选效果.png
步骤分析：
步骤一：确定事件：单击事件
步骤二：获得下面的所有的复选框
步骤三：如果上面的复选框被选中，将下面的所有的复选框选中状态变为checked=true.
步骤四：如果上面的复选框没被选中，将下面的所有的复选框选中状态变为checked=false.
代码实现：
function selectAll(){
// alert("aaa");
// 获得上面的复选框：
var sAll = document.getElementById("selectAll");
if(sAll.checked == true){
// 上面的复选框被选中
// 将下面的所有的复选框都被选中。
var selectOnes = document.getElementsByName("selectOne");
// 遍历数组中的每个元素，让每个元素都被选中：
for(var i = 0;i<selectOnes.length;i++){
selectOnes[i].checked = true;
}
}else{
// 上面的复选框不选中
// 将下面的所有的复选框都被不选中。
var selectOnes = document.getElementsByName("selectOne");
// 遍历数组中的每个元素，让每个元素都被不选中：
for(var i = 0;i<selectOnes.length;i++){
selectOnes[i].checked = false;
}
}
}
四、控制二级联动
需求：
在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份，将这个省份下的城市列出.
步骤分析：
步骤一：确定事件：onchange.
步骤二：获得改变的省份值 .
步骤三：比较省份的值 与 数组中定义的值是否相等，如果相等获得这个省份对应的所有的市的数组.
步骤四：创建option元素，将数组中的值添加到option元素中。
步骤五：将option添加到第二个下拉列表中.
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function addEl(){
// 创建元素：
var liEl = document.createElement("li");// <li></li>
// 创建文本节点:
var textEl = document.createTextNode("广州");// 广州
// 将文本放入到li元素:
liEl.appendChild(textEl);// <li>广州</li>
// 获得ul元素:
var ulEl = document.getElementById("ul1");
// 将li放入到ul
ulEl.appendChild(liEl);
}
</script>
</head>
<body>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
<input type="button" value="点击" onclick="addEl()"/>
<script>
// 定义二维数组:
var cities = new Array(4);
cities[0] = new Array("长春市","吉林市","松原市","延边市");
cities[1] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[2] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[3] = new Array("南京市","苏州市","扬州市","无锡市");
function selectCity(val){
// alert(val);
var citySel = document.getElementById("city");
// 清除原有的option:
citySel.options.length = 0;
// 遍历数组：
for(var i=0;i<cities.length;i++){
if(val == i){
// 遍历数组：
for(var j = 0 ;j<cities[i].length;j++){
// alert(cities[i][j]);
// 创建option元素：
var opEl = document.createElement("option");
// 创建文本元素：
var textNo = document.createTextNode(cities[i][j]);
// 将文本添加到option中．
opEl.appendChild(textNo);
// 将option添加到第二个下拉列表中
citySel.appendChild(opEl);
}
}
}
}
</script>
</body>
</html>
网友评论