CSS - div禁用,不可点击
2019-01-21 •
评论
.style {
pointer-events: none;
}CSS - 中间含数字的圆圈
2018-12-19 •
评论
12
<span style="width:17px;height:17px;top:17px;line-height:17px;border-radius:15px;font-size:12px;background:#FF0000;color:#FFFFFF;">12</span>JS - mui.showLoading
2018-09-10 •
评论
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 - 获取验证码及倒计时样式
2018-08-16 •
1 条评论
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);
}