<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/rem.js"></script>
<script src="js/jquery-1.11.3.js"></script>
<style>
*{padding:0;margin:0;}
/*1、确定取消*/
.delDiv{width:11.52rem;height:4.48rem;text-align:center;color:#000;background:#F7F7F7;-moz-border-radius:0.555rem;-webkit-border-radius:0.555rem;border-radius:0.555rem;font-size:0.725rem;position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:10000;}
.delDiv .delDiv_tip{width:100%;height:2.56rem;line-height:2.56rem;border-bottom:1px solid #e2e2e2;}
.delDiv .delDiv_info{width:100%;height:1.877rem;line-height:1.877rem;}
.delDiv .delDiv_info .delDiv_info_left{width:50%;height:1.877rem;text-align:center;float:left;border-right:1px solid #e2e2e2;box-sizing:border-box;}
.delDiv .delDiv_info .delDiv_info_right{width:50%;height:1.877rem;text-align:center;float:right;}
.delDiv .delDiv_info .btn-green{border:0;font-size:0.725rem;color:#3A79FF;background:none;outline:none;}
/*.mask{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1000;background:#000;opacity:0.4;filter:alpha(opacity=40)}*/
.expurgate{width:4.48rem;height:2.517rem;line-height:2.517rem;text-align:center;color:#fff;background:#000;opacity:0.8;filter:alpha(opacity=80);-moz-border-radius:0.427rem;-webkit-border-radius:0.427rem;border-radius:0.427rem;font-size:0.683rem;position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
/*2、确定*/
/*弹出框*/
.popup{width:11.52rem;height:4.48rem;text-align:center;color:#383838;background:#F7F7F7;-moz-border-radius: 0.555rem;-webkit-border-radius: 0.555rem;border-radius: 0.555rem;font-size:0.725rem;position: absolute;top:10rem;left:2.24rem;z-index:2000;}
.popup .pop_pass{display:table;width:11.52rem;height:2.56rem;border-bottom:1px solid #ccc;box-sizing:border-box;padding:0 1rem;}
.popup .pop_pass .pass{vertical-align:middle;display:table-cell;text-align:center;width:11.52rem;height:2.56rem;}
.popup .ok{height:1.92rem;line-height:1.92rem;color:#3A79FF;}
/*遮罩层*/
.mask{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1000;background:#000;opacity:0.4;filter:alpha(opacity=40);}
/*3、提示框*/
.hint{display:table;width:7rem;height:2rem;padding:0.6rem;color:#fff;background:#000;opacity:0.8;filter:alpha(opacity=80);-moz-border-radius:0.427rem;-webkit-border-radius:0.427rem;border-radius:0.427rem;font-size:0.683rem;position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index: 10000;}
.hint_txt{vertical-align:middle;display:table-cell;text-align:center;width:7rem;height:2rem;}
/*4、圆角*/
/* div{-moz-border-radius:0.256rem;-webkit-border-radius:0.256rem;border-radius:0.256rem;} */
/*5、透明度*/
/* div{opacity:0.3;filter:alpha(opacity=30);} */
/*6、placeholder颜色改变,字体大小改变*/
/* input:-moz-placeholder,textarea:-moz-placeholder{color:#B5B5B6;font-size:0.64rem;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#B5B5B6;font-size:0.64rem;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#B5B5B6;font-size:0.64rem;} */
/*7、滚动去除卡顿及滚动条*/
/* .wrap{overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
.wrap::-webkit-scrollbar{display:none;} */
/*8、水平垂直居中*/
/* div{position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;} */
/*9、背景渐变效果*/
/* div{
background:-webkit-linear-gradient(#ffbb18, #ff353f);
background:-moz-linear-gradient(#ffbb18, #ff353f);
background:-o-linear-gradient(#ffbb18, #ff353f);
background:-webkit-gradient(linear, from(#ffbb18), to(#ff353f));
background:#ffbb18;
background:linear-gradient(#ffbb18, #ff353f);
}
*/
/*10、引入字体*/
/*@font-face {
font-family:'shuweishufa';
src: url('fonts/shuweishufa.ttf');
}
div{font-family:"shuweishufa";}*/
/*11、弹性盒布局*/
/*12、swiper轮播图*/
/*13、input框记住账号后背景为白色*/
/*input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px white inset;}*/
/*14、selsect框设置下拉按钮*/
/*.sel{width:9rem;height:1.579rem;border:0;outline:none;font-size:0.597rem;background: #fff url(../img/xiala.png) no-repeat right center;background-size:9% 50%;padding-right:0.8rem;}*/
/*15、去除默认样式*/
/*input[type="button"], input[type="submit"],input[type="reset"],input[type="text"],input[type="tel"],select,textarea{-webkit-appearance:none;}*/
/*16、背景全屏显示*/
/**{margin: 0;padding: 0;}
html, body {width:100%;height: 100%;overflow: hidden;}
.cont {height: 100%;height: 100%;background-image:url("slider-2.jpg");background-size:cover;overflow:auto;}*/
/*17、禁止选中复制*/
/*.nocopy {-moz-user-select:none;-webkit-user-select:none}*/
/*18、文本溢出隐藏*/
/*div{white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}*/
/*19、多行隐藏*/
/*div{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}*/
</style>
</head>
<body>
<div>1234567890</div>
<!--1、确定取消-->
<!--<div class="delDiv" style="display:block;">
<div class="delDiv_tip">确认删除该图片吗?</div>
<div class="delDiv_info">
<span id="" class="delDiv_info_left">
<input id="btnCancel" type="button" value="取 消" class="btn-green" />
</span>
<span id="" class="delDiv_info_right">
<input id="btnDelTrue" type="button" value="确 认" class="btn-green" />
</span>
</div>
</div>
<div class="expurgate" style="display: none;">删除成功</div>
<div class="mask" style="display:block;"></div>-->
<!--2、确定,不管一行还是两行都是垂直居中-->
<!--<div class="popup" style="display:block;">
<div class="pop_pass"><p class="pass">虚拟购买人数不能大于当前虚拟在线人数1000</p></div>
<p class="ok">确定</p>
</div>
<div class="mask" style="display:block;"></div>-->
<!--3、提示框 ,不管一行还是两行都是垂直居中-->
<div class="hint" style="display: none;"><p class="hint_txt">抢购尚未开始,请注意抢购时间</p></div>
<!--13、PC端-->
<!--<input class="inp" type="text" onkeyup="clearNoNum(this)">-->
<!--<script>
function clearNoNum(obj){
obj.value = obj.value.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符
obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
obj.value = obj.value.replace(/^\./g,""); //必须保证第一个为数字而不是.
obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); //保证.只出现一次,而不能出现两次以上
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额
obj.value= parseFloat(obj.value);
}
}
</script>-->
<!--14、移动端-->
<!--<input type="text" class="inp" />
<script>
$(".inp").bind("input","onpropertychange",function(){
$(this).val($(this).val().replace(/[^\d.]/g,""));
$(this).val($(this).val().replace(/\.{2,}/g,"."));
$(this).val($(this).val().replace(/^\./g,""));
$(this).val($(this).val().replace(".","$#$").replace(/\./g,"").replace("$#$","."));
$(this).val($(this).val().replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'));
if($(this).val().indexOf(".")< 0 && $(this).val() !=""){
$(this).val(parseFloat($(this).val()));
}
})
</script> -->
<!--15、复制按钮,复制input内容-->
<!--<input type="text" readonly id="text" value="1234566" />
<button onclick="myCopy()">点击复制文本框内的内容</button><br>
<script>
function myCopy(){
var ele = document.getElementById("text");
ele.select();
document.execCommand("Copy");
alert("复制成功");
}
</script> -->
</body>
<script>
//1、确定取消
$("#btnDelTrue").click(function(){
$(".delDiv").hide();
$(".mask").hide();
/*删除图片*/
$(".expurgate").show(0).delay(1000).hide(0);
})
$("#btnCancel").click(function(){
$(".delDiv").hide();
$(".mask").hide();
})
//2、确定
$(".ok").click(function(){
$(".popup").hide();
$(".mask").hide();
})
//3、提示框
$(".hint").show(0).delay(1000).hide(0);
//16、刷新当前页面
//window.location.reload();
//17、判断是否在微信&&安卓上,是底部隐藏,否显示
// function is_weixn(id){
// var u = navigator.userAgent;
// var ua = navigator.userAgent.toLowerCase();
// if((ua.match(/MicroMessenger/i)=="micromessenger")&&(u.indexOf('Android')>-1)) {//判断微信终端&&android终端
// var oHeight = $(document).height(); //浏览器当前的高度
// $(window).resize(function(){
// if($(document).height() < oHeight){
// $(id).hide();
// }else{
// $(id).show();
// }
// })
// }
// }
// is_weixn(".btn");
//18、滚动条
// function scroll(){
// var myscroll;
// function loaded(){
// setTimeout(function(){
// myscroll=new IScroll(".wrap",{
// click:true,
// })
// },100);
// }
// window.addEventListener("load",loaded,false);
// }
// scroll();
//19、判断pc还是移动端,公安备号显示与隐藏
// function goPAGE() {
// if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
// $(".police").hide(); //移动端
// }
// else {
// $(".police").show();//pc端
// }
// }
// goPAGE();
//20、倒计时加零
// function add_zero(n){
// return n < 10 ? '0'+ n : n;
// }
//21、on绑定click事件在苹果手机失效的问题
//方法:{cursor:pointer}苹果有这么个设置,鼠标放上去,能够出现“手”型的图标才被认作可以使用点击事件
//22、通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端
// var u = navigator.userAgent;
// var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
// var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// alert('是否是Android:'+isAndroid);
// alert('是否是iOS:'+isiOS);
//23、判断iPhone|iPad|iPod|iOS|Android客户端
// if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
//alert(navigator.userAgent);
// window.location.href ="iPhone.html";
// } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
//alert(navigator.userAgent);
// window.location.href ="Android.html";
// } else { //pc
// window.location.href ="pc.html";
// };
//24、点击键盘backspace键清空验证码
//动态
$(document).on("keydown",".information_txt",function(event){
event=event||window.event;
if (event.keyCode == 8) {
$(this).val("")
}
})
//不动态
// $('.information_txt').keydown(function (event) {
// event=event||window.event;
// if (event.keyCode == 8) {
// $(this).val("")
// }
// });
//25、复选框遍历选中的个数
// var n=0;
// for(var i=0; i< $(".gou").length;i++){
// if($(".gou")[i].checked){
// n++;
// }
// }
//26、复选框遍历选中的个数的值
// for(var j=0; j< $(".gou").length;j++){
// if($(".gou")[j].checked){
// var id=$(".gou")[j].value;
// }
// }
//27、复选框遍历选中的个数的值拼成字符串
// for(var j=0; j< $(".gou").length;j++){
// if($(".gou")[j].checked){
// var id=$(".gou")[j].value;
// var s=s+id+",";
// }
// }
// var ID=s.substr(0, s.length - 1);//最后一个逗号删除
//28、json数据拿取
// info:{1:{name:"生产管理",sm_id:["生产二维码","添加商品"]}}
// var obj=data.info;
// for (i in obj){
// console.log(obj);
// console.log(obj[i]);
// console.log(obj[i].name);
// console.log(obj[i].sm_id);
// var s2='<div style="margin: 10px 0;color: #1aad1a"><label class="checkbox-inline"><input type="checkbox" disabled checked />'+obj[i].name+'</label></div>'
// var arr=obj[i].sm_id;
// var s3='';
// for(var k=0;k<arr.length;k++){
// var s3=s3+ '<label class="checkbox-inline"><input type="checkbox" disabled checked />'+arr[k]+'</label>'
// }
// $(".main_ul").append("<li class='main_li'>"+s2+"<div style='margin-left:40px'>"+s3+"</div><li>");
// }
//29、复选框
// $('.all').click(function () {
// var id = $(this).attr('title');
// $('input[abc='+id+']').prop('checked',this.checked);
// });
// $('.gou').click(function () {
// var num = $(this).attr('abc');
// var n=0;
// for(var i=0; i<$('input[abc='+num+']').length;i++){
// if($('input[abc='+num+']')[i].checked){
// n++;
// }
// }
// if(n>0){
// $('input[title='+num+']').prop("checked", true);
// }else{
// $('input[title='+num+']').prop("checked", false);
// }
// });
//30、每次绑定前先取消上次的绑定防止重复
// $('#sub').unbind('click').click(function () {
// ...
// });
//31、map
// $("p").append( $("input").map(function(){
// return $(this).val();
// }).get().join(", ") );
</script>
</html>
自己写的一些复用样式
最新推荐文章于 2024-07-18 14:43:52 发布