手机号3-4-4 & 滚动函数 & 滚盘抽奖

最新推荐文章于 2024-05-08 15:32:14 发布

oo灵性

最新推荐文章于 2024-05-08 15:32:14 发布

阅读量519

点赞数

分类专栏： JavaScript 文章标签：手机号344 滚动函数

本文链接：https://blog.csdn.net/u010427666/article/details/78540039

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

手机号3-4-4 **
– 需引入一个jq** or zepto
下列flow 就是344相关的东西， **$(’#inpTel’)**对应的就是输入input输入框DOM节点。

    var  flow = {
        initIndex:function(){
            flow.initMobile();
            $("#inpTel").on('blur',function (){
                flow.initMobile();
            });
            // 手机号码输入框
            $("#inpTel").on('keyup',function(){
                //隐藏历史记录
                var a =this;
                var num = flow.getNum(a.value), len = num.length;
                var se,vlen;
                var oEvent = window.event;
                // 手机号码加空格
                if(a.setSelectionRange) {
                    se = a.selectionEnd;
                    vlen = se === a.value.length;
                }
                if(12 > len) {
                    a.value = flow.formatMobile(num);
                    if(11 === len) {
                        a.blur();
                        return;
                    }
                } else {
                    a.value = flow.formatMobile(num.substr(0,11));
                    a.blur();
                }
                se && setTimeout(function(){
                    vlen && (se = a.value.length);
                    a.setSelectionRange(se,se)
                },0)
            });
        },
        // 号码初始化
        initMobile: function(){
            var $mobile = $("#inpTel");
            var mobile = $mobile.val();
            if (mobile.indexOf(" ") == -1) {
                if (mobile.length > 3) {
                    mobile = mobile.substring(0, 3) + " " + mobile.substring(3)
                }
                if (mobile.length > 8) {
                    mobile = mobile.substring(0, 8) + " " + mobile.substring(8)
                }
            }
            $mobile.val(mobile);
        },
        getNum :function(a,b) {
            var num = $.trim(a);
            num = num.replace(/[^\d]/g,"");
            return num;
        },
        formatMobile :function(a){
            var num = (a + "").split("")
                ,str = "";
            num.forEach(function (a,num){
                (3 === num || 7===num) && (str +=" ");
                str += a;
            });
            return str;
        },
    };
    
    $(function () {
        flow.initIndex();
    })

常见上下滚动，简便写法

// HTML
        <!--滚动新闻-->
        <section class="notice">
            <div class="text-scroller">
                <ul class="scroller-in">
                </ul>
            </div>
        </section>
        <!--滚动新闻-->

// CSS
.scroller-in{
    position: absolute;
    width:100%;
    top:0;
}
.notice li{
    width:100%;
    height:32px;
    line-height:32px;
}
// func
    //字幕滚动
    function textScroll(obj) {
        var obj = $(obj);
        var box = obj.find('.scroller-in');
        var sH = obj.find('li').height();
        function scroll() {
            box.animate({
                    "-webkit-transform": "translateY(" + (-sH) + "px)",
                    "transform": "translateY(" + (-sH) + "px)"
                }, 800,
                function () {
                    box.css({
                        '-webkit-transform': 'translateY(0)',
                        'transform': 'translateY(0)'
                    }).find("li").eq(0).appendTo(box);
                });
        };
        setInterval(scroll, 2300);
    };

实用函数

(function(){
	// 检测是否支付flex
	function supportsFlexBox(){
		var test = document.createElement('test');
		test.style.display = 'flex';
		return test.style.display === 'flex';
	}
	    // 如果浏览器不支持，flex ,用javascript 去fix (修复) 它
    if( !supportsFlexBox() ){
        // ?
        flexibility(document.documentElement);
    }

	function Util(){
		this.DEVICE_mobile = 1;
		this.DEVICE_tablet = 2;
		this.DEVICE_destop = 3;
	}

	Util.prototype.isElementInView = function(element,fullyInView){
		var pageTop = $(window).scrollTop();
		var pageBottom = pageTop + $(window).height();
		var elementTop = $(element).offset().top;
		var elementBottom = elementTop + $(element).height();
		if( fullyInView === true ){
			return ((pageTop < elementTop) && (pageBottom > elementBottom));
		}else{
			return ((elementTop <= pageBottom) && (elementBottom >= pageTop ));
		}
	}

    /*
    *  验证整数和浮点数
    *   @param {number} n
    *   @return {boolean}
    * */
	Util.prototype.validateNumber = function(n){
		return !isNaN( parseFloat(n) ) && isFinite(n);
	}
	// 邮箱验证
	Util.prototype.validateEmail = function(email){
		return (/^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$/).test(email);
	}
	
	Util.prototype.getSafeInt = function(value,defaultValue){
		return this.validateNumber(value) ? parseInt(value,10):defaultValue;
	}
    Util.prototype.getSafeFloat = function (value,defaultValue) {
        return this.validateNumber(value)? parseFloat(value,10):defaultValue;
    }

    /*
    *  Toggles browser full screen mode  浏览器全屏模式
    * */
    Util.prototype.toggleFullScreen = function () {
        var d = document;
        if( !d.fullscreenElement && !d.mozFullScreenElement && !d.webkitFullscreenElement ){
            if(d.documentElement.requestFullscreen){
                d.documentElement.requestFullscreen();
            } else if( d.documentElement.mozRequestFullScreen ){
                d.documentElement.mozRequestFullScreen();
            } else if( d.documentElement.webkitRequestFullscreen ){
                d.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            }
        } else {
            if(d.cancelFullScreen){
                d.cancelFullScreen();
            } else if(d.mozCancalFullScreen){
                d.mozCancalFullScreen();
            } else if(d.webkitCancelFullScreen){
                d.webkitCancelFullScreen();
            }
        }
    }


	window.Util = new Util();
})()

加速匀速减速抽奖转盘、方形转盘

仅展示 vue store.js 的部分代码。

    /***
     *  抽奖 动画
     * @param config
     *     var defaultConfig = {
            endLocal: 0 , // 开始停留的位置
            total:4, // 奖品的个数
            onComplete : function () {
                console.log('end');
            } ,
            initFunc:function () {} // 初始化函数
        };
     */
    moveFn ({ commit, state, dispatch }, config = defaultConfig) {
        var _private = {
                /***
                 *  取旋转的随机数
                 */
                random (min, max) {
                    return Math.floor(min + Math.random() * (max - min))
                },
                aniFunction (t, b, c, d) {
                    // 加速 、 减速
                    return c * t / d + b
                }
            },
            fastTime = 50, slowTime = 400,
            stepCounts = parseInt(config.endLocal) + config.total * _private.random(2, 3),
            index = 0, slowT = 0,
            speedUp, uniform, slowDown

        if (config.currLocal) {
            // 算上初始的次数
            stepCounts += (parseInt(config.total) - parseInt(config.currLocal)) - 1
        }
        uniform = config.total * 2
        speedUp = Math.floor((stepCounts - uniform) / 3)
        uniform += speedUp
        slowDown = stepCounts

        if (config.initFunc) {
            config.initFunc()
        }

        var moveFunc = function () {
            var moveTime = null
            index++
            if (index > stepCounts) {
                setTimeout(() => {
                    config.onComplete()
                }, 10)
                return
            }
            var t = index, b = slowTime, c = fastTime - slowTime, d = speedUp
            if (index <= speedUp) {
                moveTime = _private.aniFunction(t, b, c, d)
            }
            if (index > speedUp) {
                moveTime = fastTime
            }
            if (index > uniform) {
                t = slowT++
                b = fastTime
                c = slowTime - fastTime
                d = slowDown - uniform
                moveTime = _private.aniFunction(t, b, c, d)
            }
            // 出赛果
            if (config.currLocal) {
                config.rollFunc((index + parseInt(config.currLocal)) % 8)
            } else {
                config.rollFunc(index % 8)
            }
            setTimeout(moveFunc, moveTime)
        }
        setTimeout(moveFunc, slowTime)
    },

//  调用形式
    dispatch('moveFn', {
        endLocal: bingoData.prize.idx,
        total: params.giftLen,
        currLocal: params.currLocal,
        initFunc: function () {
            // 初始化 按钮什么的
            commit('setdhjBtn', false);
        },
        onComplete: function () {
            commit('setdhjBtn', true)
            // 弹窗奖品  把字段修改一下就行。
            dispatch('getUserInfo')
        },
        rollFunc: function (_index) {
	        // 每一步的执行函数
            commit('setPositionName', 'position0' + (_index))
        }
    })

转盘截图

这里写图片描述

利用manifest.json 来事件js文件加载

    var loadScript = function (list, callback) {
        console.log( list.length )
        var loaded = 0;
        var loadNext = function () {
            loadSingleScript(list[loaded], function () {
                loaded++;
                console.log( loaded >= list.length )
                if ( loaded >= list.length ) {
                    callback();
                }else {
                    console.log(111)
                    loadNext();
                }
            })
        };
        loadNext();
    };
    var loadSingleScript = function( src,callback ){
        var s = document.createElement('script');
        s.async = false;
        s.src = src;
        s.addEventListener('load',function () {
            s.parentNode.removeChild(s);
            s.removeEventListener('load', arguments.callee, false);
            callback();
        },false)
        console.log( s );
        document.body.appendChild(s);
    }
    var xhr = new XMLHttpRequest();
    xhr.open('GET','./manifest.json?v='+Math.random(),true);
    xhr.addEventListener('load',function () {
        var manifest = JSON.parse( xhr.response );
        var list = manifest.initial.concat(manifest.game);
        console.log(list);
        loadScript( list , function () {
            console.log('end');
        } )
    })
    xhr.send(null);

manifest.json 内容如下：

{
	"initial": [
		"../multilotto/js/timeago/jquery.timeago.js",
		"../multilotto/swiper.min.css",
		"../multilotto/js/main.min.js",
		"libs/modules/tween/tween.min.js"
	],
	"game": [
		"main.min.js"
	]
}

聊天内容识别跳转链接

String.prototype.httpParse = function () {
    let htmlDecode = (html) => {
        var temp = document.createElement('div')
        if (typeof html !== 'String') {
            html.toString()
        }
        (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html)
        var output = temp.innerHTML
        temp = null
        return output
    }
    var reg = /((http|ftp|https):\/\/)?[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/g
    return htmlDecode(this).replace(reg, (a) => {
        if (!a.indexOf('http')) {
            return `<a class="link" href="${a}" target="_blank">${a}</a>`
        } else {
            return `<a class="link" href="http://${a}" target="_blank">${a}</a>`
        }
    })
}
// test
var a = '百度: http://www.baidu.comdsfafas '
a.httpParse()

学习博客：
https://www.cnblogs.com/gggwf

oo灵性

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机号3-4-4 & 滚动函数 & 滚盘抽奖

手机号3-4-4 – 需引入一个jq or zepto 下列flow 就是344相关的东西， $(‘#inpTel’)对应的就是输入input输入框DOM节点。 var flow = { initIndex:function(){ flow.initMobile(); $(&amp;amp;quot;#inpTel&amp;amp;quot;).on('blu...
复制链接

扫一扫

专栏目录