测试有效的js作业之Math

最新推荐文章于 2024-08-08 23:04:40 发布

k2460761639

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量110

点赞数

分类专栏： js作业文章标签： javascript

本文链接：https://blog.csdn.net/k2460761639/article/details/107578924

版权

js作业专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.密码强度

 <style>
        span {
            display: block;
            width: 100px;
            height: 100px;
        }
    </style>

<body>
    <form action="">
        <input type="text" id="text">
        <span id="ti"></span>
    </form>
    <script>
        /*   思路：1.在body里写一个文本框及存放显示属性的span标签
          2.建立文本框失去焦点时的触发
  
          3.给文本框的值起个名
          4.设定没有输数字，大小写字母市委false,后面会用到
          5.将不断变化的数字到字母的循环i建立for循环，
          长度小于文本框的长度，
          6.先取到文本框的ascii值,因为范围i是不断变化的，所以
          ascill值当然是变量（i）
          7.在此循环里判断：
          as在48~57之间为数字，65~90大写字母，97~122小写字母
          8.在做一个if判断
          同时拥有三个条件的，span里显示强
          同时拥有二个条件的，span里显示中
          同时拥有一个条件的，span里显示弱 */

        // 2.建立文本框失去焦点时的触发
        text.onchange = function () {
            let a1 = text.value
            let flag1 = false
            let flag2 = false
            let flag3 = false

            for (let i = 0; i < a1.length; i++) {
                let charcode = a1.charCodeAt(i)
                if (charcode >= 48 && charcode <= 57) {
                    flag1 = true
                }
                else if (charcode >= 65 && charcode <= 90) {
                    flag2 = true
                }
                if (charcode >= 97 && charcode <= 122) {
                    flag3 = true
                }
            }
            if (flag3 && flag2 && flag1) {
                ti.innerText = "强";
                document.getElementById('ti').style.backgroundColor = "red"
                // ti.style.backgroundColor = "red"
            }
            else if (flag1 && flag2 || flag1 && flag3 || flag2 && flag3) {
                ti.innerText = "中";
                document.getElementById('ti').style.backgroundColor = "blue"
            }
            else {
                ti.innerText = "弱";
                document.getElementById('ti').style.backgroundColor = "#666"
            }
        }
    </script>

2.数字字母混合验证

 <script>
  //随机验证码
  var str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var code = "";
        for (var i = 0; i < 4; i++) {
            var randIndex = Math.floor(Math.random() * str.length);
            var randCode = str[randIndex];
            code += randCode;
        }
        document.write(code);

        //String.fromCharCode();



        var code = "";
        while (code.length < 4) {
            //[48,90];
            var randNum = Math.floor(Math.random() * 43 + 48);
            if (randNum >= 48 && randNum <= 57 || randNum >= 65 && randNum <= 90) {
                code += String.fromCharCode(randNum);
            }
        }

        document.write(code);
    </script>

3.随机颜色

 <style>
        div {
            width: 100px;
            height: 100px;
        }
    </style>

<body>
    <div id="box"></div>
    <script>
        // 思路：1.在文档中建个块用来显示颜色。
// 2.颜色的十六进制为#开头，0-9的数字或a-f的六位数结尾
        //取随机颜色 并添加到样式上
        function getRandColor() {
            var str = "0123456789ABCDEF";
            // 从该字符串中取任意一个数
           
          /*  let num2= Math.random() * str.length//个数为16 
           console.log(num2)*/
        //    定义开头
          var randColor = "#";
      
            for (var i = 0; i < 6; i++) {
  //   在六位结尾数中循环，向下取整0-5.9999~=5，共0-5六位数
                var randIndex = Math.floor(Math.random() * str.length);
                // 最终颜色为后来的开头=原来的开头+字符串的随机产生
                randColor += str[randIndex];
            }

            return randColor;
        }

        // box.style.backgroundColor = getRandColor();
        //rgb(0,0,0)
 /* 把box的样式颜色显示在文档中
rgb格式颜色为rgb（1,2,3）
本来"rgb(1,2,3)"是一个字符串，但分解后
"rgb(" 1-1 "rgb("成了一个字符串，随机数值与字符串不是一个整体，需要用+拼接并转为字符串，同理，后面的，也需要用+分开并转换 */
        box.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) +
            "," + Math.floor(Math.random() * 256) + ")"; 
    </script>
</body>

k2460761639

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
测试有效的js作业之Math

1.密码强度 <style> span { display: block; width: 100px; height: 100px; } </style><body> <form action=""> <input type="text" id="text"> <span id="ti"
复制链接

扫一扫