1.轮播图
<body> <input type="button" id="btn1" value="左"/> <input type="button" id="btn2" value="右"/> <img src="img/1.png" width="391" height="479" id="img1"/> <script> var obtn1=document.getElementById("btn1"); var obtn2=document.getElementById("btn2"); var oimg1=document.getElementById("img1"); var arr1 = ["img/1.png","img/2.png","img/3.png","img/4.png"]; var i=0;//i直接为arr的序号 obtn1.onclick=function(){ if(i>0){ i--; }else{ i=3; } oimg1.src= arr1[i]; } obtn2.onclick=function(){ if(i<3){ i++; }else{ i=0; } oimg1.src= arr1[i]; } </script> </body>2.用布尔值做下拉收起
<body> <input type="button" id="btn" value="下拉收起"/> <div id="div1"></div> <script> var oBtn = document.getElementById("btn"); var oDiv= document.getElementById("div1"); var bOnOff = true; oBtn.onclick = function(){ if(bOnOff){ oDiv.style.display="none"; //oDiv.style.backgroundColor = "blue"; }else{ //oDiv.style.backgroundColor = "red"; oDiv.style.display="block"; } bOnOff = !bOnOff; } </script> </body>3.获取选项框和输入框的值
<body> <select id="sel1"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="西安">西安</option> <option value="杭州">杭州</option> </select> <input type="text" id="text1"/> <input type="button" id="btn" value="弹出"/> <script> var oSel = document.getElementById("sel1"); var oText = document.getElementById("text1"); var oBtn = document.getElementById("btn"); //alert(oSel.value); oBtn.onclick = function(){ alert(oText.value + "在" + oSel.value); } </script> </body>4.qq弹窗，将输入内容展示在窗口
<style type="text/css"> body{margin:0;} ul{margin:0; padding:0;} li{list-style:none;} input{padding:0;} #btn{width:90px; height:40px; background-color:#06F;cursor:pointer;} #window{width:400px; height:450px; background-color:#CCC; position:relative; margin:0 auto; display:none; padding:10px;} span{position:absolute; right:2px; top:2px; text-align:center; height:25px; width:25px; line-height:25px; color:red; background-color:#FC3; cursor:pointer;} #ul1{height:290px; background-color:#fff; overflow:auto;} #window div{height:150px; margin-top:10px; position:relative; background-color:#99F;} textarea{width:400px; height:100px; padding:0;} #btn1{position:absolute; right:10px; bottom:10px; height:30px; width:80px; text-align:center;} </style> </head> <body> <input type="button" value="出现对话框" id="btn"/> <div id="window"> <span>X</span> <ul id="ul1"></ul> <div> <textarea></textarea> <input type="button" id="btn1" value="发送"/> </div> </div> <script> var oBtn =document.getElementById("btn"); var oDiv = document.getElementById("window"); var oSpan = oDiv.getElementsByTagName("span")[0]; var oUl = document.getElementById("ul1"); var oText = oDiv.getElementsByTagName("textarea")[0]; var oBtn1 = document.getElementById("btn1"); oBtn.onclick = function(){ oDiv.style.display = "block"; } oSpan.onclick = function(){ oDiv.style.display = "none"; } oBtn1.onclick = function(){ var oTV = oText.value; if(oTV){ oUl.innerHTML += "<li>" + oTV + "</li>"; oText.value = ""; }else{ alert("输入内容不能为空"); } } </script> </body>5.10*10的小方块，当鼠标经过时显示出来
<style type="text/css"> body{ margin:0} ul{ margin:0; padding:0; background-color:#CCC; width:509px; height:509px; position:relative;} li{ list-style:none; width:50px; height:50px;opacity:0; background-image:url(img/pic.jpg); float:left; position:absolute;} </style> </head> <body> <ul id="ul1"> </ul> <script> var oUl=document.getElementById("ul1"); var str=""; for(var i=0;i<100;i++){ str += "<li></li>";//动态创建100个小方块，存到str中 } oUl.innerHTML = str; var aLi=oUl.getElementsByTagName("li"); for(var i=0;i<100;i++){ aLi[i].style.top=parseInt(i/10)*51+"px";//parseInt是取整的意思 aLi[i].style.left=(i%10)*51+"px"; aLi[i].style.backgroundPosition=-(i%10)*51+"px "+ -parseInt(i/10)*51+"px"; //鼠标移动到图上时改变透明度 aLi[i].onmouseover = function(){ this.style.opacity = "1"; } } </script> </body>6 点击按钮实现二维数组的切换
<body> <input type="button" id="btn" value="切换新闻"/> <ul id="ul1"> </ul> <script> var arr = [["新闻一","新闻二","新闻三","新闻四","新闻五"],["新闻六","新闻七","新闻八","新闻九","新闻十"],["新闻十一","新闻十二","新闻十三","新闻十四","新闻十五"]]; var oUl = document.getElementById("ul1"); var oBtn = document.getElementById("btn"); var str = ""; for(var i=0;i<5;i++){ str += "<li>"+arr[0][i]+"</li>"; } oUl.innerHTML = str; var aLi = oUl.getElementsByTagName("li"); var i = 0; oBtn.onclick = function(){ if(i==arr.length-1){ i=0; }else{ i++; } for(var j=0;j<aLi.length;j++){ aLi[j].innerHTML = arr[i][j]; } } </script> </body>7.50个li排成阶梯形状
<style type="text/css"> body{margin:0;} ul{margin:0; padding:0;} li{list-style:none; width:50px; height:50px; background-color:red; position:absolute;} </style> </head> <body> <ul id="ul1"> </ul> <script> var oUl = document.getElementById("ul1"); var str = ""; for(var i=0;i<50;i++){ str += "<li></li>";//生成50个li } oUl.innerHTML = str; var aLi = oUl.getElementsByTagName("li"); //开始遍历 for(var i=0;i<50;i++){ aLi[i].style.top = i*50+"px"; aLi[i].style.left = i*50+"px"; } </script> </body>8.50个li十个一行
<script> var oUl = document.getElementById("ul1"); var str = ""; for(var i=0;i<50;i++){ str += "<li></li>"; } oUl.innerHTML = str; var aLi = oUl.getElementsByTagName("li"); for(var i=0;i<50;i++){ aLi[i].style.top = parseInt(i/10)*55+"px"; aLi[i].style.left = (i%10)*55+"px"; } //alert(parseInt("20.2px")); </script>9.三个导航鼠标移入时出现，当移到下拉框时，也不消失
<body> <ul id="ul1"> <li> <a href="#">导航1</a> <div class="box"></div> </li> <li> <a href="#">导航2</a> <div class="box"></div> </li> <li> <a href="#">导航3</a> <div class="box"></div> </li> </ul> <script> var aLi = document.getElementsByTagName("li"); for(var i=0;i<aLi.length;i++){ aLi[i].onmouseover = function(){ this.getElementsByTagName("div")[0].style.display = "block"; } aLi[i].onmouseout = function(){ this.getElementsByTagName("div")[0].style.display = "none"; } }//this指的是ali[i] </script>10.11个li形成一个V
<style type="text/css"> body{margin:0;} ul{margin:0; padding:0;} li{list-style:none; width:50px; height:50px; background-color:red; position:absolute;} </style> </head> <body> <ul id="ul1"> </ul> <script> var oUl = document.getElementById("ul1"); var str = ""; for(var i=0;i<11;i++){ str += "<li></li>"; } oUl.innerHTML = str; var aLi = oUl.getElementsByTagName("li"); for(var i=0;i<11;i++){ aLi[i].style.left = i*50+"px"; if(i<6){ aLi[i].style.top = i*50+"px"; }else{ aLi[i].style.top = (10-i)*50+"px"; } } </script>