标签 CSS 下的文章

JS - mui.showLoading

JS

//扩展mui.showLoading
(function($, window) {
    //显示加载框
    $.showLoading = function(message,type) {
        if ($.os.plus && type !== 'div') {
            $.plusReady(function() {
                plus.nativeUI.showWaiting(message);
            });
        } else {
            var html = '';
            html += '<i class="mui-spinner mui-spinner-white"></i>';
            html += '<p class="text">' + (message || "数据加载中") + '</p>';
            //遮罩层
            var mask=document.getElementsByClassName("mui-show-loading-mask");
            if(mask.length==0){
                mask = document.createElement('div');
                mask.classList.add("mui-show-loading-mask");
                document.body.appendChild(mask);
                mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
            }else{
                mask[0].classList.remove("mui-show-loading-mask-hidden");
            }
            //加载框
            var toast=document.getElementsByClassName("mui-show-loading");
            if(toast.length==0){
                toast = document.createElement('div');
                toast.classList.add("mui-show-loading");
                toast.classList.add('loading-visible');
                document.body.appendChild(toast);
                toast.innerHTML = html;
                toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
            }else{
                toast[0].innerHTML = html;
                toast[0].classList.add("loading-visible");
            }
        }
    };
    //隐藏加载框
    $.hideLoading = function(callback) {
        if ($.os.plus) {
            $.plusReady(function() {
                plus.nativeUI.closeWaiting();
            });
        }
        var mask=document.getElementsByClassName("mui-show-loading-mask");
        var toast=document.getElementsByClassName("mui-show-loading");
        if(mask.length>0){
            mask[0].classList.add("mui-show-loading-mask-hidden");
        }
        if(toast.length>0){
            toast[0].classList.remove("loading-visible");
            callback && callback();
        }
    }
})(mui, window);

阅读全文

JS - 获取验证码及倒计时样式

HTML

<button type="button" onclick="getCode();" id='getCode'>获取验证码</button>

JS

function getCode(){
    var InterValObj; //timer变量,控制时间
    var count = 3; //间隔函数,1秒执行
    var curCount;//当前剩余秒数
    var getCode = $("#getCode");
    curCount = count;
    //设置button效果,开始计时
    getCode.attr("disabled", "true");
    getCode.css('background', '#cccccc').css('border', '1px solid #cccccc');
    getCode.html(curCount + "秒后获取");
    InterValObj = window.setInterval(function () {
        if (curCount == 1) {
            window.clearInterval(InterValObj);//停止计时器
            getCode.removeAttr("disabled");//启用按钮
            getCode.removeAttr("style");
            getCode.html("获取验证码");
        } else {
            curCount--;
            getCode.html(curCount + "秒后获取");
        }
    }, 1000);
}

阅读全文

前端框架 - MUI

接下来要去搞微信端页面
打算用这个MUI框架搞搞
github
如果大佬们有更好的前端框架,热烈欢迎推荐

CSS, JS - version

<link 
    rel="stylesheet" 
    href="../resources/css/style.css?version=<?php echo filemtime('../resources/js/login.php.js');?>">
<script 
    type="text/javascript" 
    src="../resources/js/login.php.js?version=<?php echo filemtime('../resources/js/login.php.js)';?>">
</script>

阅读全文

CSS - 背景

body:before {
    content: " ";
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(http://omuy6viz3.bkt.clouddn.com/2017/05/390210278.png) center 0 no-repeat;
    background-size: cover;
    opacity: .3;
}