步步为营-55-js练习

1:加法计算器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        //01-窗体加载
        window.onload = function () {
            //03-单击按钮触发事件
            document.getElementById("btnAdd").onclick = function () {
                //02-获取数据
                var num1 = parseInt(document.getElementById("num1").value);
                var num2 = parseInt(document.getElementById("num2").value);
                document.getElementById("result").value = num1 + num2;
            }
        }
    </script>
</head>
<body>
<input type="text" id="num1"/>
+
<input type="text" id="num2" />
=
<input type="text" id="result" />

<input type="button" id="btnAdd" value="相加" />
</body>
</html>

加法计算器

2:点击触发

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        window.onload= function() {
            //获取所有的按钮
            var btn = document.getElementsByName("btnCry");
            for (var i = 0; i < btn.length; i++) {
              
                btn[i].onclick = function() {
                    this.value = '呜呜';
                }
               
            }
        }
    </script>
</head>
<body>
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
</body>
</html>

View Code

3: 小鸟飞

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        //01_设置图片编号
        var index = 1;
        window.onload = function() {
            //02-设置定时器,每个一段时间调用图片切换方法
            setInterval(ImgChange,100);
        }
       function ImgChange()
        {
            index ++;
            if (index>4) {
                index = 1;
            }
            //03-找到小鸟的图片
            var birdfly = document.getElementById("BridFly");
            //04-设置图片
            birdfly.src = '../Img/bird' + index + '.png';
        }
    </script>
</head>
<body>
    <img src="../Img/bird1.png"  id="BridFly"/>
</body>
</html>

View Code

4: 文字跑马灯

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        /*02设置为绝对定位*/
        #PMD {
            position: absolute;
             100px;
            background-color: blue;
        }
    </style>
    <script>
        //04 设置自增字段
        var left = 0;
        var dire = 1;
        window.onload = function () {
            //03设置定时器
            setInterval(Move,200);
        }
        //04设置move方法
        function Move() {
            //05获得div元素
            var pmdDiv = document.getElementById("PMD");
            //06设置其移动
            left = left + 100*dire;
            //07判断宽度
            if (left + 100 >= window.innerWidth) {
                dire = -1;
            }
            if (left <= 0) {
                dire = 1;
            }
            pmdDiv.style.left = left + 'px';
        }
    </script>
</head>
<body>
<!--01设置存放跑马灯文字的div-->
<div id="PMD">跑马灯文字</div>
</body>
</html>

View Code

5:动态操作元素

　　放置三个按钮,分别添加图片.文本框.超链接.放置一个按钮,删除所有元素

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        window.onload = function() {
            document.getElementById('btnImg').onclick = function() {
                var img = document.createElement('img');
                img.src = "../Img/bird1.png";
                document.getElementById('addDynamic').appendChild(img);
            };
            document.getElementById('btnText').onclick = function() {
                var text = document.createElement('input');
                text.type = "text";
                text.id='txtNew'
                text.value = '新增';
                document.getElementById('addDynamic').appendChild(text);
            };
            document.getElementById('btns').onclick = function() {
                var a = document.createElement('a');

                a.href = 'http://www.baidu.com';
                //注意这条语句很重要
                a.innerHTML = '百度';
                //注意txtNew有且只能有一个
                document.getElementById('addDynamic').insertBefore(a,txtNew);
            };
            document.getElementById('btnRemove').onclick = function () {
                var childs = document.getElementById('addDynamic').childNodes;
                for (var i = childs.length -1;i>=0; i--) {
                    document.getElementById('addDynamic').removeChild(childs[i]);
                }
               
            };
        }
    </script>
</head>
<body>
    <input type="button" id="btnImg" value="添加图片" />
    <input type="button" id="btnText" value="添加文本框" />
<input type="button" id="btns" value="超链接" />
<input type="button" id="btnRemove" value="移除" />

<div id="addDynamic"></div>
</body>
</html>

View Code

6:评分功能

　　设置五个等级,当鼠标点击时给出星级.鼠标没有点击,显示上次得分.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            var imgs = document.getElementsByTagName('img');
            var clickId=0;

            for (var i = 0; i < imgs.length; i++)
            {
                //02-01 鼠标放置事件
                imgs[i].onmouseover = function() {
                    var id = this.id;
                    for (var j = 0; j < i; j++) {
                        if (j < id) {
                            imgs[j].src = "../Img/star2.png";
                        } else {
                            imgs[j].src = "../Img/star1.png";
                        }
                    }
                };

                //02-02 鼠标移开事件
                imgs[i].onmouseout = function() {
                    for (var j = 0; j < clickId; j++) {
                        imgs[j].src = "../Img/star2.png";
                    }
                    for (var j = clickId; clickId<imgs.length; j++) {
                        imgs[j].src = "../Img/star1.png";
                    }
                };

                //02-03 鼠标点击事件
                imgs[i].onclick = function() {
                     clickId = parseInt(this.id);
                   
                };
            }
        }
    </script>
</head>
<body>
<!--01放置五个评分的图片-->
    <img id="1" name="imgScore" src="../Img/star1.png" />
    <img id="2" name='imgScore' src="../Img/star1.png" />
    <img id="3" name='imgScore' src="../Img/star1.png" />
    <img id="4" name='imgScore' src="../Img/star1.png" />
    <img id="5" name='imgScore' src="../Img/star1.png" />
</body>
</html>

View Code

7: 野人快跑

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #imgsavage {
            position: absolute;
             100px;
        }
    </style>
    <script>
        var left = 0;
        var dir = 1;
        window.onload = function () {
            setInterval(imgChange, 200);
            var imgIndex = 1;
            function imgChange() {
                var imgsav = document.getElementById('imgsavage');
                imgsav.src = "../Img/walk" + imgIndex + ".png";
                imgsav.style.left = left + 'px';
                imgIndex = imgIndex + 1;
                left = left + 10 * dir;
                if (imgIndex>7) {
                    imgIndex = 1;
                }
                if (left+50 > window.innerWidth) {
                    dir = -1;
                }
                if (left<=0) {
                    dir = 1;
                }
            }
        }
    </script>
</head>
<body>
<!--01首先定义一个div,用于放置野人图片-->
    <!--<div id="savageImg"><img src="../Img/walk1.png" /></div>-->
    <img id="imgsavage" src="../Img/walk1.png" />
</body>
</html>

野人快跑

8:按钮5秒后可用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        var lastTime = 5;
        window.onload = function() {
            setInterval(changText, 1000);
        };

        function changText() {
            lastTime --;
            var btn = document.getElementById("btnLast");
                btn.value = '按钮' + lastTime + '秒后可用';
            if (lastTime <= 0) {
                btn.disabled = false;
                btn.value = '按钮 可用';
            }
            btn.onclick = function() {

                alert("可用了");

            }
        }
    </script>
</head>
<body>
    <input id="btnLast" type="button" disabled="disabled" value="按钮5秒后可用"/>
</body>
</html>

View Code

9:超链接变红

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        window.onload = function() {
            //01-动态创建超链接
            for (var i = 0; i < 5; i++) {
                var herf = document.createElement('a');
                herf.href = "#";
                herf.innerHTML = "           "+i+"            ";
                herf.id = i;
                document.getElementById('herfs').appendChild(herf);
            }
            var herfs = document.getElementsByTagName('a');
            for (var i = 0; i < herfs.length; i++) {
                herfs[i].onclick = function() {
                    this.style.color = "red";
                }
            }

        }
    </script>
</head>
<body>
<div id="herfs"></div>
</body>
</html>

View Code

10:透视图

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .divStyle {
            border: 1px solid;
            position: absolute;
        }
    </style>
    
    <script>
        window.onload = function() {
            var divWidth = 0;
            for (var i = 0; i < 50; i++) {
                var div = document.createElement('div');
                divWidth = 500 - (20 * i);
               
                div.className = 'divStyle';
                div.style.width = divWidth + 'px';
                div.style.height = divWidth + 'px';
                div.style.left = 10 * i + 'px';
                div.style.top = 10 * i + 'px';

                document.getElementById('divSet').appendChild(div);
            }
        }
    </script>
</head>
<body>
<div id="divSet" style=" 1000px; height: 1000px; border: 1px solid; "></div>
</body>
</html>

法一

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
      
        onload = function() {
            var div = document.getElementById("div");
            for (var i = 0; i < 25; i++) {
                var tem = document.createElement("div");
                tem.style.border = '1px solid red';
                tem.style.margin = 10 + 'px';
                div.appendChild(tem);
                div = tem;
            }
        }
    </script>
</head>
<body>
<div id="div" style=" 500px; height: 500px;"></div>
</body>
</html>

法二

11 根据json对象创建表格

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .table {
            border: 1px solid;
        }
    </style>
    <script>
        var list = [
            { id: 1, country: '中国', capital: '北京' },
            { id: 2, country: '美国', capital: '华盛顿' },
            { id: 3, country: '日本', capital: '东京' },
            { id: 4, country: '韩国', capital: '首尔' }
        ];
        onload = function() {
            var body = document.getElementsByTagName('body')[0];
            //创建表
            var table = document.createElement('table');
            table.className = 'table';
            body.appendChild(table);
            
            //设置标题列
            var thead = document.createElement('thead');
            var temp = list[0];
            for (var key in temp) {
                var th = document.createElement('th');
                th.className = 'table';
                th.innerHTML = key;
                thead.appendChild(th);
            };
            //把行添加到表上
            table.appendChild(thead);
            //创建列,并填充数据
            for (var i = 0; i < list.length; i++) {
                //遍历对象
                var item = list[i];
                //设置行
                var tr = document.createElement('tr');
                if (i%2 == 0) {
                    tr.style.backgroundColor = "red";
                };
               

                for (var key in temp) {
                    //设置列td1
                    var td1 = document.createElement('td');
                    td1.innerHTML = item[key];
                    td1.className = 'table';
                    //把列添加到行上
                    tr.appendChild(td1);

                };

                //把行添加到表上
                table.appendChild(tr);
            }
        }
    </script>
</head>
<body>

</body>
</html>

View Code

12 在11的基础上.鼠标滑过行,高亮显示,鼠标离开,恢复原状

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .table {
            border: 1px solid;
        }
    </style>
    <script>
        var list = [
            { id: 1, country: '中国', capital: '北京' },
            { id: 2, country: '美国', capital: '华盛顿' },
            { id: 3, country: '日本', capital: '东京' },
            { id: 4, country: '韩国', capital: '首尔' }
        ];
        //01-加载事件
        onload = function() {
            var body = document.getElementsByTagName('body')[0];
            //创建表
            var table = document.createElement('table');
            table.className = 'table';
            body.appendChild(table);
            
            //设置标题列
            var thead = document.createElement('thead');
            var temp = list[0];
            for (var key in temp) {
                var th = document.createElement('th');
                th.className = 'table';
                th.innerHTML = key;
                thead.appendChild(th);
            };
            //把行添加到表上
            table.appendChild(thead);
            //创建列,并填充数据
            for (var i = 0; i < list.length; i++) {
                //遍历对象
                var item = list[i];
                //设置行
                var tr = document.createElement('tr');
                if (i%2 == 0) {
                    tr.style.backgroundColor = "red";
                };
               

                for (var key in temp) {
                    //设置列td1
                    var td1 = document.createElement('td');
                    td1.innerHTML = item[key];
                    td1.className = 'table';
                    //把列添加到行上
                    tr.appendChild(td1);

                };

                //把行添加到表上
                table.appendChild(tr);
            }
            //02-鼠标移上---高亮显示
            var trs = document.getElementsByTagName('tr');
            for (var i = 0; i < trs.length; i++) {
                trs[i].onmouseover = function() {
                    this.style.backgroundColor = "yellow";
                }
            }
            //03 鼠标移开---恢复到原来
            var trs_Stute = document.getElementsByTagName('tr');
            for (var i = 0; i < trs_Stute.length; i++) {
                if (i % 2 == 0) {
                    trs_Stute[i].onmouseout = function() {
                        this.style.backgroundColor = "red";
                    }
                }
                else {
                    trs_Stute[i].onmouseout = function () {
                        this.style.backgroundColor = "white";
                    }
                }
            }

          

        }


    </script>
</head>
<body>

</body>
</html>

View Code

13 控制div的显示与隐藏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        
        </style>
    <script>
        window.onload = function() {
            var btn = document.getElementById("btnDiv");
            var div = document.getElementById('div');
            btn.onclick = function () {
                
                if (div.style.display == "none") {
                    div.style.display = "block";
                } else {
                    div.style.display = "none";

                }
            }
        }
    </script>
</head>
<body>
<div id="div" style="display:none"> 通过按钮控制div的显示于隐藏</div>
<input id="btnDiv" type="button" value="显示div/隐藏div"/>
</body>
</html>

View Code

14 图片跟着鼠标走

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #imgIdle {
            position: absolute;
             63px;
            height: 75px;
        }
    </style>
    <script>
        //01 获取鼠标的位置
        //01-01 鼠标移动 mouseover
        //01-02 通过事件 event e 获取x  y 坐标
        onload = function () {
            window.onmousemove = function (e) {
                //02 获取对象
                var img1 = document.getElementById("imgIdle");
                //设置xy
                img1.style.left = e.clientX - parseInt(img1.width) / 2 + 'px';
                img1.style.top = e.clientY - parseInt(img1.height) / 2 + 'px';
            }
        }

        //02 指定图片的位置
    </script>
</head>
<body>
    <img id="imgIdle" src="../Img/idle.png" />
</body>
</html>

View Code

15 右下角显示元素id信息

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #divID {
            position: absolute;
             80px;
            height: 80px;
            border: 1px;
            background: yellow;
            display: none;
        }
    </style>
    <script>
        onload = function() {
           
            var childs = document.getElementsByName('items');

            for (var i = 0; i < childs.length; i++) {
                childs[i].onmouseover= function() {
                    //调用方法--显示div
                    showDiv(this);
                }
            }

            function showDiv(obj) {
                //获取div的坐标
                var x = obj.offsetLeft + obj.offsetWidth;
                var y = obj.offsetTop + obj.offsetHeight;
                //获取div的显示
                var div = document.getElementById('divID');
                div.style.left = x + 'px';
                div.style.top = y + 'px';
                div.style.display = "block";
                div.innerHTML = 'id = '+ obj.id;
            }
        }
    </script>
</head>
<body>
   <input name="items" id="button1" type="button" value="按钮1" />  
    <input name="items" id="text1" type="text" value="文本框" />  
    <input name="items" id="button2"  style="height: 50px" type="button" value="按钮4" /> 

    <div id="divID" ></div>

  
   
   
    
      

</body>
</html>

View Code

16 看图识国家

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #showInfo {
            position: absolute;
             200px;
            height: 200px;
            background: green;
            display: none;
        }
        .img {
             200px;
            height: 200px;
        }
    </style>
    <script>
        var list = {
            'zg': ['中国', '北京', '牡丹', '世界第二大经济体'],
            'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一起劳动，却想到仇视'],
            'rb': ['日本', '东京', '樱花', '世界文明的两样东西：忍者和动漫'],
            'hg': ['韩国', '首尔', '无穷', '民族意识超强']
        };

        window.onload = function() {
            var imgs = document.getElementsByTagName('img');
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].onmouseover = function (e) {
                    //01 获取国家id
                    var imgid = this.id;//ng
                    //02 根据id获取list中的国家信息
                    var msg = list[imgid];
                    //03构造描述字符串
                    var msgStr = '国家：' + msg[0] + '<br>首都：' + msg[1] + '<br>国花：' + msg[2] + '<br>描述：' + msg[3];
                    //获取div
                    var div = document.getElementById('showInfo');
                    //设置div
                    div.style.left = e.clientX + 'px';
                    div.style.top = e.clientY + 'px';
                    div.innerHTML = msgStr;
                    div.style.display = 'block';
                }
            }
        }
    </script>
</head>
<body>
<div>
    <img class="img" name="img" id="hg" src="../Img/hg.jpg" />
    <img class="img" name="img" id="mg" src="../Img/mg.jpg" />
    <img class="img" name="img" id="rb" src="../Img/rb.jpg" />
    <img class="img" name="img" id="zg" src="../Img/zg.jpg" />
</div>
<div id="showInfo">
    
</div>
</body>
</html>

View Code

17 正则表达式

两种写法

var regObj = new RegExp("\d{5}");

var regObj = /d/;

17.1 匹配

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function() {
            document.getElementById('btnTest').onclick = function () {
                //01 构建正则表达式
                var repExp = /^d{6}$/;
                //02 获取用户输入的值
                var txtMsg = document.getElementById('txtMsg').value;
                //03 进行匹配
                if (repExp.test(txtMsg)) {
                    alert('OK');
                } else {
                    alert('no');
                }

            }
        }
    </script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test"/>
</body>
</html>

匹配邮政编码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function() {
            document.getElementById('btnTest').onclick = function () {
                //01 构建正则表达式
                var repExp = /^w+@[a-z0-9]+..+$/;
                //02 获取用户输入的值
                var txtMsg = document.getElementById('txtMsg').value;
                //03 进行匹配
                if (repExp.test(txtMsg)) {
                    alert('OK');
                } else {
                    alert('no');
                }

            }
        }
    </script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test"/>
</body>
</html>

邮箱匹配

17.2 获取

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function() {
            //匹配
            document.getElementById('btnTest').onclick = function () {
                //01 构建正则表达式
                var repExp = /^w+@[a-z0-9]+..+$/;
                //02 获取用户输入的值
                var txtMsg = document.getElementById('txtMsg').value;
                //03 进行匹配
                if (repExp.test(txtMsg)) {
                    alert('OK');
                } else {
                    alert('no');
                }

            }
            //提取
            document.getElementById('btnExec').onclick = function() {
                var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119';
                var reg = /d+/g;//匹配所有
                // var reg = /d+/;//只匹配第一个
                while (true) {
                    var result = reg.exec(str);
                    if (result==null) {
                        break;
                    }
                    alert(result);
                }
            }
        }
    </script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test" />
<input type="button" id="btnExec" value="提取Exec"/>
</body>
</html>

提取

17.3 提取组

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function() {
            //匹配
            document.getElementById('btnTest').onclick = function () {
                //01 构建正则表达式
                var repExp = /^w+@[a-z0-9]+..+$/;
                //02 获取用户输入的值
                var txtMsg = document.getElementById('txtMsg').value;
                //03 进行匹配
                if (repExp.test(txtMsg)) {
                    alert('OK');
                } else {
                    alert('no');
                }

            }
            //提取
            document.getElementById('btnExec').onclick = function() {
                var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119';
                var reg = /d+/g;//匹配所有
                // var reg = /d+/;//只匹配第一个
                while (true) {
                    var result = reg.exec(str);
                    if (result==null) {
                        break;
                    }
                    alert(result);
                }
            }
            //提取组--匹配第二个数字
            document.getElementById('btnGropExec').onclick = function () {
                var str = document.getElementById('txtMsg').value;
                var reg = /d(d)d*/g;
                while (true) {
                    var result = reg.exec(str);
                    if (result == null) {
                        break;
                    }
                    alert(result);
                }
            }
        }
    </script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test" />
<input type="button" id="btnExec" value="提取Exec" />
<input type="button" id="btnGropExec" value="提取组Exec"/>
</body>
</html>

View Code

17.4 替换

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function() {
            //匹配
            document.getElementById('btnTest').onclick = function () {
                //01 构建正则表达式
                var repExp = /^w+@[a-z0-9]+..+$/;
                //02 获取用户输入的值
                var txtMsg = document.getElementById('txtMsg').value;
                //03 进行匹配
                if (repExp.test(txtMsg)) {
                    alert('OK');
                } else {
                    alert('no');
                }

            }
            //提取
            document.getElementById('btnExec').onclick = function() {
                var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119';
                var reg = /d+/g;//匹配所有
                // var reg = /d+/;//只匹配第一个
                while (true) {
                    var result = reg.exec(str);
                    if (result==null) {
                        break;
                    }
                    alert(result);
                }
            }
            //提取组--匹配第二个数字
            document.getElementById('btnGropExec').onclick = function () {
                var str = document.getElementById('txtMsg').value;
                var reg = /d(d)d*/g;
                while (true) {
                    var result = reg.exec(str);
                    if (result == null) {
                        break;
                    }
                    alert(result);
                }
            }
            //替换
            document.getElementById('btnReplace').onclick = function () {
                var str = document.getElementById('txtMsg').value;
                var reg = /s+/g;
                var result = str.replace(reg, '');
                alert(result);
            }
        }
    </script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test" />
<input type="button" id="btnExec" value="提取Exec" />
<input type="button" id="btnGropExec" value="提取组Exec"/>
<input type="button" id="btnReplace" value="替换" />

</body>
</html>

View Code

18 密码强度验证

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        onload = function() {
            //失去焦点验证
            document.getElementById("txtPwd").onblur = function () {
                var msg = this.value;
                //获取提示框
                var msgResult = document.getElementById("resultMsg");
                if (msg.length < 6) {
                    msgResult.innerHTML = '弱爆了';
                } else {
                    var pw = 0;
                    if (/[a-zA-Z]+/.test(msg)) {
                       pw++;
                    }
                    if (  /[0-9]+/.test(msg)  ) {
                        pw++;
                    }
                    if (  /[!@#$%^&*()]+/.test(msg)) {
                        pw++;
                    }
                }
                switch (pw) {
                    case 1:
                        msgResult.innerHTML = '弱';
                        break;
                    case 2:
                        msgResult.innerHTML = '中';
                        break;
                    case 3:
                        msgResult.innerHTML = '强';
                        break;
              
                }
            }
        }
    </script>
</head>
<body>
<input type="text" id="txtPwd"/>
<span id="resultMsg"></span>
</body>
</html>

View Code