js暑假

本文链接： https://blog.csdn.net/qq_42177478/article/details/98491861

1.画一个正方形，双数点击为红色，单数点击为绿色；

<body>
  <div></div>
  <script type = "text/javascript">
    var div = document.getElementsByTagName('div')[0];
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.backgroundColor = "red";
    var count = 0;
    div.onclick = function () {
          count++;
          if(count % 2 == 1){
            this.style.backgroundColor = "green";
          }
          else{
            this.style.backgroundColor = "red";
          }
    }
  </script>
  </body>

2.选项卡编写

 <style type = "text/css">
      .content{
        display: none;
        width:100px;
        height:200px;
        border:1px solid red;
      }
      .active{
        background-color:yellow;
      }
    </style>
  </head>
  <body>
  <div class = "wrapper">
    <button class = "active">1</button>
    <button>2</button>
    <button>3</button>
    <div class = "content" style = "display: block">1</div>
    <div class = "content">2</div>
    <div class = "content">3</div>
  </div>
  <script type = "text/javascript">
    var btn = document.getElementsByTagName('button');
    var div = document.getElementsByClassName('content');
    for(var i = 0;i < btn.length;i ++){
      (function (n) {
        btn[n].onclick = function () {
          for (var j = 0; j < btn.length; j++) {
            btn[j].className = "";
            div[j].style.display = "none";
          }
          this.className = "active";
          div[n].style.display = "block";
        }
      }(i))
    }
  </script>
  </body>

在这里插入图片描述
3.会动的方块

 <body>
 <script type = "text/javascript">
//创建一个div
   var div = document.createElement('div');
   document.body.appendChild(div);
   div.style.height = "100px";
   div.style.width = "100px";
   div.style.backgroundColor = "red";
   div.style.position = "absolute";
   div.style.left = "0";
   div.style.top = "0";
   //定时器功能
   var speed = 1;
   var timer = setInterval(function () {
     speed += speed/20;
     div.style.left =parseInt(div.style.left) + speed + "px";
     div.style.top = parseInt(div.style.top)+ speed + "px";
     if(parseInt(div.style.top)>200&&parseInt(div.style.left)>200)
     {
       clearInterval(timer);
     }
   },10);
 </script>

4.鼠标控制方块移动

 <body>
  <button style = "width:100px;height:50px;background:linear-gradient(to left,#999,#000,#432,#fcc);
position:fixed;right:0;top:50%;text-align: center;line-height: 50px;color:white;font-size: 25px;
  font-family:Arial;">加速</button>
 <script type = "text/javascript">
   var btn = document.getElementsByTagName('button')[0];
//创建一个div
   var div = document.createElement('div');
   document.body.appendChild(div);
   div.style.height = "100px";
   div.style.width = "100px";
   div.style.backgroundColor = "red";
   div.style.position = "absolute";
   div.style.left = "0";
   div.style.top = "0";
   var speed = 5;
   btn.onclick = function () {
     speed++;
   }
   document.onkeydown = function (e) {
     switch(e.which) {
       case 38:
            div.style.top = parseInt(div.style.top)-speed+"px";
            break;
       case 40:
            div.style.top = parseInt(div.style.top)+speed+"px";
            break;
       case 37:
            div.style.left = parseInt(div.style.left)-speed+"px";
            break;
       case 39:
            div.style.left = parseInt(div.style.left)+speed+"px";
     }
   }
 </script>
  </body>

5.操作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  
    <title>查找表单控件</title>

    <script type = "text/javascript">
    function operatorform(){
        var myform = document.forms[0];
        //alert(myform.method);
        myform.submit();
    }
    </script>
</head>
<body>
    <form id = "myform" action=" " method = "GET" target = "_blank">
     <input name = "username" type = "text" value = "liuxinjing">
     <input name = "password" type = "text" value = "123">
     <select name = "city">
         <option value = "shanghai">上海</option>
         <option value = "nanjing" selected = "selected">南京</option>
     </select><br/>
     <input type = "button" value = "获取表单第一个控件" 
     onclick = "alert(document.getElementById('myform').elements[0].value);"/>
     <input type = "button" value = "获取表单第二个控件"
     onclick = "alert(document.getElementById('myform').elements['password'].value);"/>
     <input type = "button" value = "获取表单第三个控件"
     onclick = "alert(document.getElementById('myform').city.value);"/>
     <input type = "button" value = "操作表单" onclick = "operatorform()"/>
    </form>
    </body>
    </html>

猜你喜欢