后台开发基本JS技能练习

轮播图

<script>function init(){// 设置定时setInterval("changeImg()",5000);}// 定义一个全局变量var i = 1;function changeImg(){// 获得图片的元素：var img1 = document.getElementById("img1");if(i == 3){i =1;}else{i++;}// 修改图片的src的属性img1.src = "../img/"+i+".jpg";}</script>

定时弹出广告

<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>

隔行换色

<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>

全选或不选

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;}}}

Jquery实现广告

<script>var time;$(function(){// 设置定时 5秒后执行一个显示广告的函数time = setInterval("showAd()",5000);});// 显示广告的函数function showAd(){// 获得广告的div，显示// $("#divAd").show(1000);// $("#divAd").slideDown(3000);$("#divAd").fadeIn(3000);// 清空定时：clearInterval(time);// 重新设置定时:time = setInterval("hideAd()",5000);}// 隐藏广告的函数:function hideAd(){// 获得广告的div，隐藏// $("#divAd").hide(3000);// $("#divAd").slideUp(3000);$("#divAd").fadeOut(3000);// 清空定时：clearInterval(time);}</script>