js 的点击的案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #er>li{
            background-image: url('bhu123.jpg');
        }
        li{
            width: 100px;
            height: 120px;
            border: 1px solid black;
        }
        ul{
            float: left;
        }
        nav{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }
        nav>div{
            width: 100%;
            height: 300px;
            border: 1px solid black;
            position: absolute;
        }
        img{
            width: 100%;
            height: 100%;
        }
        
       .nji{
          opacity: 0;
       }
       .nji1{
        opacity: 1;
       }
       .xcv{
        opacity: 1;
       }
    </style>
</head>
<body>
    <!-- 切换图片   案例 ： 1 -->
    <button id="er">照片1</button>
    <button id="cv">照片2</button>
    <img id="is" src="" width="1000px",>

    <script>
        var img1=document.getElementById('is')
        var lll=document.getElementById('er');
        var ko=document.getElementById('cv')
        lll.onclick = function () {
               img1.src='R-C (1).jpg' //改元素自带的属性
               img1.title='图片1'
        }
        ko.onclick = function () {
              img1.src='R-C (2).jpg'
              img1.title='图片2'
        } 
    </script>




    <!-- 案例2  根据时间  分别  图片是 早上  中午  下午   晚上 -->
     <h1 id="fg"></h1>
    <script>
         var time= new  Date();
          var nji=document.getElementById('fg')
          if (time.getHours()>=10){
               nji.innerHTML='早上好'
          }else if(time.getHours()<=13){
            nji.innerHTML='中上好'
          }else if (time.getHours()<=17){
            nji.innerHTML='下午好'
          }else {
            nji.innerHTML='晚上好'
          }  
    </script>
  


    <!-- 案例 3  密码的隐藏和查看-->
    <!-- 点击变成 text文本框    点击变成 password文本框  -->
    <input type="password" id="lp">
    <button id="asd">查看密码</button>
    <button id="asd1">隐藏密码</button>

    <script>
        var pawws=document.getElementById('asd')
        var t1=document.getElementById('lp')
        pawws.onclick =function (){
              t1.type='text'
        }


        var pawws1=document.getElementById('asd1')
        var t1=document.getElementById('lp')
        pawws1.onclick =function (){
              t1.type='password'
        } -->
     </script>
    


    <!-- 二维码   删除  显示 -->
     <button id="zxc">删除</button>
    <button id="zxc1">显示</button>
    <div>
        <img src="ZDADD.png" alt="" id="vb">
    </div>
    <script>
        var zxc_qwe=document.getElementById('zxc')
        var imgs=document.getElementById('vb')
        zxc_qwe.onclick =function(){
              imgs.style.opacity='0'
            
        }

        var zxc_qwe1=document.getElementById('zxc1')
        var imgs=document.getElementById('vb')
        zxc_qwe1.onclick =function(){
              imgs.style.opacity='1'
        }
    </script>


    <!-- 小图标   精灵图的练习-->
    <ul id="er">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul> -->
    <script>
        var nji=document.getElementById('er').querySelectorAll('li');
        console.log(nji);
        for (var koko=0;koko<=nji.length;koko++){
            var mk=koko*134
            nji[koko].style.backgroundPosition='0  -'+mk+'px';
        }
    </script> 


    <!-- 隐藏文本框内容   获取到焦点 显示手机   焦点没获取 显示焦点  --> -->
    <input type="text" value="手机">
    <script>
         var text =document.querySelector('input')
         text.onfocus =function (){
            if (this.value=='手机'){
                this.value=''
                //如果有内容==手机的话 为空  
                // 获取到焦点的时候
             }
         }
         text.onblur=function(){
            // 失去焦点的时候 如果为空 就赋值为空
             if (this.value==''){
                this.value='手机'
             }
              
         }
    </script> 


</body>
</html>

　　

posted @ 2022-10-12 22:46  python，菜鸟  阅读(65)  评论(0)    收藏  举报