html关于select的简单样例_html select 样式-CSDN博客

本文链接：https://blog.csdn.net/m0_63803244/article/details/131586745

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="index.css"> -->
  <style>
    .sty1{height:200px;width:200px;margin-left:100px;float: left;background-color:#aaa;margin-top:20px;color: aqua;}
  </style>
</head>
<body>
 <div class="sty1" id="div1"></div>
 <div class="sty1" id="div2"></div>
 <div class="sty1" id="div3"></div>
<select onchange="m1()" id="s1">
    <option value="">请选择样式</option>
    <option value="flag1">在1内部生成很多小方框</option>
    <option value="flag2">变化2的透明度</option>
    <option value="flag3">变化3的角度</option>
    <option value="flag4">让1一直旋转</option>
    <option value="flag5">让2变窄</option>
</select>

</body>
<script>
    function m1()
    {
        var x=document.getElementById("s1");
        if(x.value=="flag1"){
         var k1=document.getElementById("div1");
         var html='';
         for(var i=0;i<10;i++){
            html+='<div style="height:40px;width:40px;background-color:#2ac;float:left;margin-left:10px;margin-top:10px;"></div>';
         }
         k1.innerHTML=html;
        }else if(x.value=="flag2"){
        m3();
        }else if(x.value=="flag3"){m4();}
        else if(x.value=="flag4"){m5(0);}
        else if(x.value=="flag5"){m6();}
    }
    
    function m2()
    {
        var x=document.getElementById("div1");
        x.style.backgroundColor="#2ac"
    }
    function m3(){
        var x=document.getElementById("div2");
        x.style.opacity=0.6;
    }
    function m4()
    { var x=document.getElementById("div3");
     x.style.transform="rotate(30deg)";
    }
    function m5(a)
    {var x=document.getElementById("div1");
    x.style.transform="rotate("+(a+30)+"deg)";
    setTimeout("m5("+(a+1)+")",20);
   }
    function m6()
    {
        var x=document.getElementById("div2");
        x.style.width="20px"
    }
</script>