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>