JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级旋转轮播图正则表达式验证表单注册账号

Posted 明明明明明明明明

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级旋转轮播图正则表达式验证表单注册账号相关的知识，希望对你有一定的参考价值。

  1. 缓动函数中opcity  写百分值的值
  2. JS一般不用小数运算，会照成精度丢失
  3. 元素的默*认透明度是
  4. 层级一次性赋值，不缓动
  5. 利用for…in为同一个父元素的子元素绑定属性

 缓动框架兼容封装／回掉函数／兼容透明度／层级

 function animate(ele,json,fn){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;


                //遍历属性和值，分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader;
                    //判断如果属性为opacity的时候特殊获取值
                    if(k === "opacity"){
                        leader = getStyle(ele,k)*100 || 1;
                    }else{
                        leader = parseInt(getStyle(ele,k)) || 0;
                    }

                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    //特殊情况特殊赋值
                    if(k === "opacity"){
                        ele.style[k] = leader/100;
                        //兼容IE678
                        ele.style.filter = "alpha(opacity="+leader+")";
                    //如果是层级，一次行赋值成功，不需要缓动赋值
                        //为什么？需求！
                    }else if(k === "zIndex"){
                        ele.style.zIndex = json[k];
                    }else{
                        ele.style[k] = leader + "px";
                    }
                    //4.清除定时器
                    //判断: 目标值和当前值的差大于步长，就不能跳出循环
                    //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                    if(json[k] !== leader){
                        bool = false;
                    }
                }

                console.log(1);
                //只有所有的属性都到了指定位置，bool值才不会变成false；
                if(bool){
                    clearInterval(ele.timer);
                    //所有程序执行完毕了，现在可以执行回调函数了
                    //只有传递了回调函数，才能执行
                    if(fn){
                        fn();
                    }
                }
            },25);
        }




        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }

 

旋转轮播图 

http://mingm.top/demo/04-旋转轮播图/demo.html

https://github.com/q878067583/mingm/tree/gh-pages/demo/04-旋转轮播图

在数组json中，删除第一个元素，添加到最末尾。（正转）

在数组json中，删除最后一个元素，添加到第一位。（反转）

正则表达式：

 

本质：用来记录文本规则的代码，

可以迅速地用极简单的方式达到字符串的复杂控制。

Regular Expression

　　定义方法

　　　　var reg = new RegExp (/abs/) ;

　　　　var reg = /abc/ ;

　　

  Boolean = 表达式.test("要验证的内容")；检测是否符合正则表达式“reg”的要求，并返回true／false ；

正则表达式的组成是：(总结)

有一些普通字符和元字符组成，普通字符就是字母和数字，元字符具有特殊意义的字符

匹配腾讯QQ号：[1-9][0-9]{4,}

评注：腾讯QQ号从10000开始 

比如  \d

预定义类: 表示数字   [0-9]

 

正则内部类：

　　　　预定义类

　　　　　　.   [^\n\r] 除了换行和回车之外的任意字符

　　　　　　\d　　[0-9] 数字字符 　\s　[\t\n\x0B\f\r] 空白字符.    \w [a-zA-Z_0-9] 单词字符

　　　　　　\D     [^0-9]非数字字符 \S [^\t\n\x0B\f\r] 非空白字符 \W [^a-zA-Z_0-9] 非单词字符

简单类（正则：//中什么特殊符号都不写，和[]的加入）

　　/string/.test(“string”);            必须是完整的，只多不能少

　　/andy/.test(“andy”) // true

一句话，只要完整包含了andy 就可以了（有他就行）

   /[string]/.test(“string”);   只要包含里面的任何一个就可以

 负向类

　　／[^abc]/.test（ds）：不能含有abc任意一个字符

  1. 不够和正好返回false，多了返回true，
        1. /[^abc]/.test（“aiiiii”）返回true
        2. /[^abc]/.test（“a”）返回fals

范围类

有时匹配的东西过多，而且类型又相同，全部输入太麻烦，我们可以在中间加了个横线

console.log(/[a-z]/.test(‘1111‘));

console.log(/[A-Z]/.test(‘aa‘));

 组合类

用中括号匹配不同类型的单个字符。

console.log(/[a-m1-5]/.test("b"))//true

 正则边界：

　　

　　^ 会匹配行或者字符串的起始位置

　　注：^在[]中才表示非！这里表示开始

　　$ 会匹配行或字符串的结尾位置

　　^$在一起 表示必须是这个（精确匹配）

 

// 边界可以精确说明要什么
console.log(/lily/.test("lilyname")); // true
console.log(/^lily$/.test("lily"));  // true
console.log(/^lily$/.test("ly"));   // false

console.log(/^andy$/.test("andy"));  // true

 这个的最终意思就是 说， 必须是 andy 这四个字母

量词：

　　

（多个字母，重复最后一个）

 *   (贪婪)   重复零次或更多   (>=0)

 +   (懒惰)   重复一次或更多次  (>=1)

 ?    (占有)   重复零次或一次   （0||1）  要么有 要么没有

 {}  重复多少次的意思   可以有多少个  

您的银行卡密码只能是 6位      {6}

{n} n次 （x=n）  

{n,} 重复n次或更多  (x>=n)

{n,m} 重复出现的次数比n多但比m少 (n<=x<=m)

*    {0,}

+     {1,}

?     {0,1}

 

x|y    一个 |   x  或者 y（没有&，用的是，代替的）   

（）提高权限，有限计算

 

replace（） 去除空格，

 var str = "     你好，我      很好！      ";
        console.log(str);
//        console.log(str.trim());
        console.log(trim(str));
function trim(str){
    var aaa = str.replace(/(^\s+)|(\s+$)/g,"");
    return aaa;
}

表单验证css模版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    body {
        background: #ccc;
    }

    label {
        width: 40px;
        display: inline-block;
    }

    .container {
        margin: 100px auto;
        width: 400px;
        padding: 50px;
        line-height: 40px;
        border: 1px solid #999;
        background: #efefef;
    }

    span {
        margin-left: 30px;
        font-size: 12px;
        padding:2px 20px 0;
        color: #ccc;
    }

    .wrong {
        color: red;
        background: url(images/error.png) no-repeat;
        
    }

    .right {
        color: green;
        background: url(images/right.png) no-repeat;
    }

    .pwd {
        width: 220px;
        height: 20px;
        background: url("images/strong.jpg") no-repeat;
    }
    .str1{
        background-position: 0 -20px;
    }
    .str2{
        background-position: 0 -40px;
    }
    .str3{
        background-position: 0 -60px;
    }
    .str4{
        background-position: 0 -80px;
    }
</style>

<script>
    window.onload = function () {
        //需求：按照需求，对表单数据进行校验！
        //步骤：
        //1.老三步
        //2.判断是否符合正则标准
        //3.给样式。（封装方法给）


//        var inp1 = document.getElementById("inp1");
//        var inp2 = document.getElementById("inp2");
//        var inp3 = document.getElementById("inp3");
//        var inp4 = document.getElementById("inp4");
//        var inp5 = document.getElementById("inp5");
//        var inp6 = document.getElementById("inp6");
        var password = document.getElementById("password");

//        inp1.onblur = function () {
//            var span = this.nextElementSibling || this.nextSibling;
//            if(/^[1-9][0-9]{4,}$/.test(this.value)){
//                span.innerHTML = "恭喜您,输入正确！";
//                span.className = "right";
//            }else{
//                span.innerHTML = "格式错误！";
//                span.className = "wrong";
//            }
//        }

        //qq号
        addEvent("inp1", function () {
            if(/^[1-9][0-9]{4,}$/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });

        //手机号
        addEvent("inp2", function () {
            if(/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });

        //邮箱
        addEvent("inp3", function () {
            if(/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });


        //座机
        addEvent("inp4", function () {
            if(/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });


        //用户名
        addEvent("inp5", function () {
            if(/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });


        //密码
        addEvent("inp6", function () {
            if(/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
                password.className = "pwd str1";
                //只有密码通过了，才能执行密码强度测试
                //从大往小判断。
                if(/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)){
                    password.className = "pwd str4";
                }else if(/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)){
                    password.className = "pwd str3";
                }else if(/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)){
                    password.className = "pwd str2";
                }


            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });




        //因为每次都要这样调用，所以很繁琐，我们通过封装实现代码
        function addEvent(str,fn){
            document.getElementById(str).onblur = fn;
        }

        function setClassName(aaa,txt){
            var span = aaa.nextElementSibling || this.nextSibling;
            span.className = txt;
        }
        function setInnerHTML(aaa,txt){
//            console.log(this);
            var span = aaa.nextElementSibling || this.nextSibling;
            span.innerHTML = txt;
        }
    }
</script>

<body>
    <div class="container">
        <label for="inp1">QQ</label><input type="text" id="inp1"><span>输入正确的QQ号码</span><br>
        <label for="inp2">手机</label><input type="text" id="inp2"><span>输入13位手机号码</span><br>
        <label for="inp3">邮箱</label><input type="text" id="inp3"><span>输入正确邮箱</span><br>
        <label for="inp4">座机</label><input type="text" id="inp4"><span>输入您的座机</span><br>
        <label for="inp5">账号</label><input type="text" id="inp5"><span>亲输入您的账号</span><br>
        <label for="inp6">密码</label><input type="text" id="inp6"><span>请输入您的密码</span><br>
        <div id="password" class="pwd"></div>
    </div>
</body>
</html>

 




以上是关于JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级旋转轮播图正则表达式验证表单注册账号的主要内容，如果未能解决你的问题，请参考以下文章

JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数

JavaScript——WEBAPIS_深入动画函数的封装，常见网页特效

tween 缓动动画

利用tween.js算法生成缓动效果

封装缓动动画函数

div盒子的缓动函数封装