JavaScript基础插曲-练习

简介: JavaScript基础插曲-练习

Javascript基础学习



eg:利用正则表达式来去掉空格。


1:msg=' Hello ';

    <script type="text/javascript">
        var msg = ' Hello ';
        msg = msg.replace(/^\s+/, "").replace(/&\s+/, '');
        alert(msg);
    </script>



eg:利用js实现登录的时候显示密码的强度


这个主要使用正则表达式来进行判断和js操作样式来改变下面的颜色。需要注意的是switch的时候千万不要忘记写break;在合适的地方跳出来。


    <script type="text/javascript">
        window.onload = function () {
            //这里为文本框注册一个键盘键按下后弹起的事件
            document.getElementById('txtPassword').onkeyup = function () {
                var tds = document.getElementById('tb1').getElementsByTagName('td');
                //初始化颜色
                for (var i = 0; i <tds.length; i++) {
                    tds[i].style.backgroundColor = '';
                }
                //1:获取用户输入的内容
                var val = this.value;
                if (val.length > 0) {
                //2:根据用户输入的密码,来效验密码的强度。
                var pwdLvl = getPasswordLever(val);
                //3:改变下面显示的强度。
                switch (pwdLvl) {
                    case 0:
                    case 1:
                    case 2:
                        //弱
                        tds[0].style.backgroundColor = 'red';
                        break;
                    case 3:
                    case 4:
                        //中
                        tds[0].style.backgroundColor = 'orange';
                        tds[1].style.backgroundColor = 'orange';
                        break;
                    case 5:
                        //强
                        tds[0].style.backgroundColor = 'green';
                        tds[1].style.backgroundColor = 'green';
                        tds[2].style.backgroundColor = 'green';
                        break;
                    default:
                }
                }
            };
        };
        //这里是申明了一个匿名函数,通过这个匿名函数来判断密码的强度。
        function getPasswordLever(user_pwd) {
            //下面是通过正则表达式的match()方法来判断输入的密码中是否有满足的指定条件。
            var lvl = 0;
            //1:含有数字,强度+1
            if (user_pwd.match(/\d+/)) {
                lvl++;
            }
            //2:含有小写字母,强度+1
            if (user_pwd.match(/[a-z]+/)) {
                lvl++;
            }
            //3:含有大写字母,强度+1
            if (user_pwd.match(/[A-Z]+/)) {
                lvl++;
            }
            //4:含有特殊符号,强度+1
            if (user_pwd.match(/[^0-9a-zA-Z]+/)) {
                lvl++;
            }
            //5:密码的长度超过6位,强度+1
            if (user_pwd.length > 6) {
                lvl++;
            }
            return lvl;
        }
    </script>



679140-20160303094731580-608637757.png



关于笔记:自己要很认真的写,一些知识点自己学过去就会忘记,笔记可以为以后留着复习用。希望自己坚持下去。

目录
相关文章
|
8月前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
92 0
|
8月前
|
JavaScript 前端开发
记录JavaScript练习
记录JavaScript练习
30 0
|
8月前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
29 1
|
8月前
|
JavaScript 前端开发
JS循环语句以及一些小练习
JS循环语句以及一些小练习
43 1
|
8月前
|
前端开发 JavaScript 搜索推荐
[初学者必看]JavaScript 15题简单小例子练习,锻炼代码逻辑思维
【6月更文挑战第3天】这是一个JavaScript编程练习集,包含15个题目及答案:计算两数之和、判断偶数、找数组最大值、字符串反转、回文检测、斐波那契数列、数组去重、冒泡排序、阶乘计算、数组元素检查、数组求和、字符计数、数组最值和质数判断以及数组扁平化。每个题目都有相应的代码实现示例。
516 1
|
8月前
|
存储 前端开发 JavaScript
[初学者必看]JavaScript 简单实际案例练习,锻炼代码逻辑思维
【6月更文挑战第2天】这是一个前端小项目合集,包括图片轮播器、动态列表、模态框、表单验证等14个项目,旨在帮助初学者提升编码技能和实战经验。每个项目提供关键提示,如使用HTML、CSS和JavaScript实现不同功能,如事件监听、动画效果和数据处理。通过这些项目,学习者可以锻炼前端基础并增强实际操作能力。
179 2
|
9月前
|
JavaScript 前端开发 C语言
JavaScript编程语法练习
本篇文章是对于javaScript中if ,switch,while ,do-while,,for语法的作业练习.对于我来说也是对自己知识掌握的一种检验.是对js的基础语法进行的一次练习,通过有趣的示例进行练习,使得对于代码能够增加印象,对于知识的掌握更加透彻.
|
9月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
84 0
|
9月前
|
存储 JavaScript 前端开发
JS项目练习
JS项目练习
|
9月前
|
存储 JavaScript
JS中相等(==)和等全(===)的区别与练习
JS中相等(==)和等全(===)的区别与练习
51 1

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    43
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    27
  • 3
    Node.js 中实现多任务下载的并发控制策略
    33
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55