js学习过程中所做实例图_js 用力图-CSDN博客

本文链接：https://blog.csdn.net/qq_52025564/article/details/124076404

<!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>
    <script>
        // var num1 = prompt('请输入第一个值');
        // var num2 = prompt('请输入第二个值');
        // alert(Number(num1)+Number(num2));
        // var myname = prompt('您的姓名是:');
        // var age = prompt('您的年龄是:');
        // var sex = prompt('您的性别是:');
        // alert('您的姓名是:'+ myname + '\n' +'您的年龄是:'+ age+ '\n'+'您的性别是:' + sex);
        // alert('您的年龄是:'+ age);
        // alert('您的性别是:' + sex);
        var myname = prompt('亲输入您的姓名:');
        if (myname=='刘德华'){
            alert('您中奖了');
        } else{
            alert('很遗憾');
        }
    </script>
</head>
<body>
    
</body>
</html>

输入prompt输出alert或console.log()或console.dir(0

<!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>
</head>
<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function(){
            input.value='被点击了';
            // btn.disabled = true;
            this.disabled = true;
        }
    </script>
</body>
</html>

网页显示原始内容为图片1，点击按钮后按钮失效，不得点击，同时文字发生改变

<!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>仿京东显示隐藏密码明文案例</title>
    <style>
        .box{
            position: relative;
            width: 400px;
            border-bottom:1px solid #ccc;
            margin:100px auto;
        }
        .box input{
            width: 370px;
            border:0;
            height: 30px;
            outline: none;
        }
        .box img {
            position: absolute;
            top:6px;
            right:9px; 
            width: 24px;
        }
        input[type="password"]::-ms-reveal{
            display:none;
        }
       
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="img/taobao.jpg" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0;
        eye.onclick = function(){
            if (flag==0){
                pwd.type="text";
                eye.src='img/taobao1.png';
                flag=1;
            } else {
                pwd.type="password";
                eye.src='img/taobao.jpg';
                flag=0;
            }
            
        }
    </script>
</body>
</html>

输入数字后，密码无法看见，点击图片可以使图片变化，并且使密码得以看见和隐藏

<!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>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            this.style.backgroundColor = 'purple';
            this.style.width = '400px';
        }
    </script>
</body>
</html>

鼠标点击后图片颜色以及大小会发生变化

<!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>
        .box{
            position: relative;

            width: 120px;
            height: 90px;
            color:#ff5000;
            align-items: center;
            line-height: 20px;
            margin:4px auto 0;
            border:1px solid #eee;
            background-color: #FFF;

        }
        .box span{
            display: block;
            width: 120px;
            height: 20px;
            color:#ff5000;
            text-align: center;
            line-height: 20px;
            
        }
        .box img{
            display: block;
            margin:2px auto 0;
        }
        .close-btn {
            position: absolute;
            top:-1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border:1px solid #ccc;
            text-align:center;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor:pointer;

        }
    </style>
</head>
<body>
    <div class="box">
        <span>淘宝二维码</span>
        <img src="img/taobao.jpg" alt="">
        <i class="close-btn">x</i>
    </div>
    <script>
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        btn.onclick = function() {
            box.style.display='none';
        }
    </script>
</body>
</html>

点击x图片会变没，即div盒子会消失