基础js代码

最新推荐文章于 2023-06-21 08:00:08 发布

seven-yang

最新推荐文章于 2023-06-21 08:00:08 发布

阅读量235

点赞数

分类专栏： js基础文章标签： javascript

本文链接：https://blog.csdn.net/yangyixue123/article/details/69218664

版权

js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

seven-yang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础js代码

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("b
复制链接

扫一扫

专栏目录