JS——练手案例_js逆向练手网站-CSDN博客

本文链接：https://blog.csdn.net/weixin_46758732/article/details/119275303

1、打印n行n列五角星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印</title>
</head>
<body>
<p id="demo"></p>
<script>
 var rows = prompt('请输入行数') ;
 var cols = prompt('请输入列数');
 var str=" ";
 for(var i = 0;i < rows;i++) {
     for(var j = 0;j < cols;j++){
         str += "☆";
     }
     //换行
     str += '\n';
 }
 // Document.getElementById("demo").innerHTML = str;
    console.log(str);
</script>
</body>
</html>

在这里插入图片描述

2、打印乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印</title>
</head>
<body>
<p id="demo"></p>
<script>
 var rows = prompt('请输入行数') ;
 var str=" ";
 for(var i = 1;i <= rows;i++) {
     for(var j = 1;j <= i;j++){
         str += j + "*" + i + "=" + i*j + "\t";
     }
     //换行
     str += '\n';
 }
 // Document.getElementById("demo").innerHTML = str;
    console.log(str);
</script>
</body>
</html>

在这里插入图片描述
3、显示隐藏密码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏密码明文</title>
    <style>
        .box{
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input{
            width:370px ;
            height: 30px;
            outline:none ;
        }
        .box img{
            position: absolute;
            margin-right:480px;
            float: left;
            top:110px;
            right: 0px;
            width: 24px;
        }
    </style>
</head>
<body>
   <div class="box">
       <label for="">
           <img src="images/close.jpeg" alt="" id="eye">
       </label>
       <input type="password" name="" id="pwd">
   </div>
<script>
    //1、获取元素
    var eye = document.getElementById('eye');
    var pwd = document.getElementById('pwd');
    //2、注册事件、处理程序
    var flag = 0;
    eye.onclick = function(){
        //点击一次之后，flag 一定要变化
        if(flag == 0){
            pwd.type = 'text';
            eye.src = 'images/open.jpeg';
            flag = 1;//赋值操作
        }else {
            pwd.type = 'password';
            eye.src = 'images/close.jpeg'
            flag = 0;
        }
    }
</script>
</body>
</html>

在这里插入图片描述

4、操作元素修改样式属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改样式属性</title>
    <style>
        div{
            width:200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
   <div></div>
   <script>
       //1、获取元素
       var div = document.querySelector('div');
       //2、注册事件 处理程序
       div.onclick = function ( ) {
               //div.style 里面的属性采取驼峰命名法
               this.style.backgroundColor = 'blue';
           
       }

   </script>
</body>
</html>

在这里插入图片描述

5、

<!--
1、核心思路：利用样式的显示和隐藏，display：none隐藏元素display：block 显示元素
2、点击按钮：就让这个二维码盒子隐藏起来即可
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿淘宝关闭二维码</title>
    <style>
        .box{
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;

        }
        .box img{
            width: 60px;
            margin-top: 5px;
        }
        .close-btn{
           position: absolute;
            top:-1px;
            left:-16px;
            width:14px;
            height: 14px;
            border:1px solid #ccc;
            line-height: 14px;
            font-family: Arial,Helvetica,sans-serif;
            cursor:pointer;
        }
    </style>
</head>
<body>
  <div class="box">
      淘宝二维码
      <img src='images/e.png' alt="">
      <i class="close-btn">x</i>
      <script>
          //1、获取元素
          var btn = document.querySelector('.close-btn');
          var box = document.querySelector('.box');
          //2、注册事件 程序处理
          btn.onclick = function () {
              box.style.display = 'none';
          }
      </script>
  </div>
</body>
</html>