常用正则
// 用户名验证
/^[a-zA-Z][a-zA-Z0-9]{5,19}$/
//密码验证
/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,20}$
// 手机号码
/^1[3-8]\d{9}$/
//短信验证码验证
/^[a-zA-Z0-9]{6}$/
//邮箱 验证
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
/\^|\.|\*|\?|\!|\/|\\|\$|\#|\&|\||,|\[|\]|\{|\}|\(|\)|\-|\+|\=|\`|\'|\"/g 特殊字符过滤
/[^\dA-Za-z\u4e00-\u9fa5]/ 非 昵称
/^1[3-8]+\d{9}$/ 手机号码
/^[0-9]{6}$/ 邮编
/^[\u4e00-\u9fa5]{2,4}$/ 姓名
/[^\dA-Za-z\u4e00-\u9fa5]/ 非 详细地址
/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/ 身份证号
/^(\d{16}|\d{19})$/ 银行卡号
/^[a-zA-Z][a-zA-Z0-9_]{2,9}$/ 用户名
/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,20}$/ 密码
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ 邮箱
常用的数字正则（严格匹配）
/^[1-9]\d*$/ 匹配正整数
/^-[1-9]\d*$/ 匹配负整数
/^-?[1-9]\d*$/ 匹配整数
/^[1-9]\d*|0$/ 匹配非负整数（正整数 + 0）
/^-[1-9]\d*|0$/ 匹配非正整数（负整数 + 0）
/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/ 匹配正浮点数
/^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$/ 匹配负浮点数
/^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/ 匹配浮点数
/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$/ 匹配非负浮点数（正浮点数 + 0）
/^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$/ 匹配非正浮点数（负浮点数 + 0）
常用字符串正则
/^[A-Za-z]+$/ 匹配由26个英文字母组成的字符串 或 /^[a-z]+$/i
/^[A-Z]+$/ 匹配由26个英文字母的大写组成的字符串
/^[a-z]+$/ 匹配由26个英文字母的小写组成的字符串
/^[A-Za-z0-9]+$/ 匹配由数字和26个英文字母组成的字符串 注意\w包含下划线_
/^\w+$/ 匹配由数字、26个英文字母或者下划线组成的字符串
匹配HTML标记的正则表达式
/^<([a-z]+)\s*\/?> (?:<\/\1>)?$/i
去首尾空白字符
/^\s*|\s*$/g
匹配Email地址的正则表达式
/^([\w-_]+(?:\.[\w-_]+)*)@((?:[a-z0-9]+(?:-[a-zA-Z0-9]+)*)+\.[a-z]{2,6})$/i
匹配帐号是否合法
/\w{4,16}/
匹配国内电话号码
网上流传的版本很好用：
/\d{3}-\d{8}|\d{4}-\d{7}/
匹配腾讯QQ号
/[1-9][0-9]{4,}/
匹配中国邮政编码
/[1-9]\d{5}(?!\d)/
匹配身份证
function validateIdCard(obj){
var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
var iSum = 0;
//var info = "";
var strIDno = obj;
var idCardLength = strIDno.length;
if(!/^\d{17}(\d|x)$/i.test(strIDno)&&!/^\d{15}$/i.test(strIDno))
return 1; //非法身份证号
if(aCity[parseInt(strIDno.substr(0,2))]==null)
return 2;// 非法地区
// 15位身份证转换为18位
if (idCardLength==15)
{
sBirthday = "19" + strIDno.substr(6,2) + "-" + Number(strIDno.substr(8,2)) + "-" + Number(strIDno.substr(10,2));
var d = new Date(sBirthday.replace(/-/g,"/"))
var dd = d.getFullYear().toString() + "-" + (d.getMonth()+1) + "-" + d.getDate();
if(sBirthday != dd)
return 3; //非法生日
strIDno=strIDno.substring(0,6)+"19"+strIDno.substring(6,15);
strIDno=strIDno+GetVerifyBit(strIDno);
}
// 判断是否大于2078年，小于1900年
var year =strIDno.substring(6,10);
if (year<1900 || year>2078 )
return 3;//非法生日
//18位身份证处理
//在后面的运算中x相当于数字10,所以转换成a
strIDno = strIDno.replace(/x$/i,"a");
sBirthday=strIDno.substr(6,4)+"-"+Number(strIDno.substr(10,2))+"-"+Number(strIDno.substr(12,2));
var d = new Date(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))
return 3; //非法生日
// 身份证编码规范验证
for(var i = 17;i>=0;i --)
iSum += (Math.pow(2,i) % 11) * parseInt(strIDno.charAt(17 - i),11);
if(iSum%11!=1)
return 1;// 非法身份证号
// 判断是否屏蔽身份证
var words = new Array();
words = new Array("11111119111111111","12121219121212121");
for(var k=0;k<words.length;k++){
if (strIDno.indexOf(words[k])!=-1){
return 1;
}
}
return 0;
}
参考资料：
http://baike.baidu.com/view/118340.htm#1
匹配IP地址
/^(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])$/
H5 css
// SUI 代码
@baseWidth: 375px;
@baseFont: 20px;
html {
font-size: @baseFont; //默认当做320px宽度的屏幕来处理
}
// 手机端 字体设置 兼容 win mac
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}
@bps: 400px, 414px, 480px;
.loop(@i: 1) when (@i <= length(@bps)) { //注意less数组是从1开始的
@bp: extract(@bps, @i);
@font: @bp/@baseWidth*@baseFont;
@media only screen and (min-width: @bp){
html {
font-size: @font !important;
}
}
.loop((@i + 1));
};
.loop;
* {
box-sizing: border-box;
// 禁止 iPhone 链接点击灰色背景
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
// 禁止 iPhone 链接点击显示系统菜单
-webkit-touch-callout: none;
}
html {
font-family: sans-serif;
// 禁止手机端自动调整文字大小
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.content{
// 开启硬件加速
-webkit-overflow-scrolling: touch;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
html,body{
background: @bodyBg;
min-width: @bodyW;
overflow: auto;
word-break: @wordBreak;
}
*{
box-sizing: @boxSizing;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
ol,
dl,
dt,
dd,
li,
body,
form,
input,
textarea,
select,
button,
img,
area,
cite,
strong,
em,
table,
td,
th,
div{
outline: none;
padding: 0;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: @HFontSize;
}
small{
font-size: @SmallFontSize;
}
img,
table,
td,
th {
border-collapse: collapse;
border: none;
}
ul,
ol {
list-style-type: none;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
}
input,button{
-webkit-appearance: none;
}
input[type='checkbox'],
input[type='radio'],
input[type='button'],
button{
cursor: pointer;
}
a {
font-size: inherit;
color: inherit;
text-decoration: none;
}
img[src=""]{
display: none;
}
body, button, input, select, textarea{
font-size: @fontSize;
// 通过 js 兼容 win mac
// font-family: @WindowsFontFamily;
// "Futura","PingHei","PingFang SC","Helvetica Neue","Helvetica",Arial,"Tahoma",Microsoft YaHei;
line-height: @lineHeight;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
head,script{
height: 0;
display: none;
}
html.overflowHidden{
height: 100%;
body{
height: 100%;
overflow: hidden;
}
}
@dialogMask: rgba(0,0,0,0.35);
// layer 弹框背景色
.layui-layer-shade{
background: @dialogMask !important;
}
//强制多行显示
word-break: break-all;
// 未知宽高 上下 左右居中
.CenCenter(){
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
// leftPage 左侧 列表
.leftPageUl(){
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-flow: column;
flex-flow: column;
-webkit-box-orient: vertical;
display: -webkit-box;
display: -webkit-flex;
display: flex;
li:last-child{
height: auto;
width: 100%;
-webkit-box-pack: justify;
-webkit-box-flex:1;
flex: 1;
}
}
// 设置 input 背景色
.inputBg(@a){
background-color: @a;
-webkit-tap-highlight-color: @a;
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px @a inset !important;
}
}
// 设置 input 提示文字颜色
.placeholder(@a){
&::-webkit-input-placeholder {
color: @a;
}
&:-webkit-input-placeholder {
color: @a;
}
&:-moz-placeholder {
color: @a;
}
&::-moz-placeholder {
color: @a;
}
&:-ms-input-placeholder {
color: @a;
}
}
// 设置文字小于12px 解决方案
.fontSize(@b){
font-size: .6rem;
transform: scale(@b/12);
-ms-transform: scale(@b/12);
-moz-transform: scale(@b/12);
-webkit-transform: scale(@b/12);
-o-transform: scale(@b/12);
}
// 设置 下边框
.borderAfterBot(@a){
& {
content:' ';
position: absolute;
left: 0;
top: auto;
bottom: 0;
right: auto;
height: 1px;
width: 100%;
background-color: @a;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0
}
@media only screen and (-webkit-min-device-pixel-ratio:2) {
& {
-webkit-transform: scaleY(.5);
transform: scaleY(.5)
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3) {
& {
-webkit-transform: scaleY(.33);
transform: scaleY(.33)
}
}
}
// 设置 上边框
.borderBeforeTop(@a){
& {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: @a;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0
}
@media only screen and (-webkit-min-device-pixel-ratio:2) {
& {
-webkit-transform: scaleY(.5);
transform: scaleY(.5)
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3) {
& {
-webkit-transform: scaleY(.33);
transform: scaleY(.33)
}
}
}
// 设置 左边框
.borderBeforeLeft(@a){
& {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: auto;
width: 1px;
height: 100%;
background-color: @a;
display: block;
z-index: 15;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%
}
@media only screen and (-webkit-min-device-pixel-ratio:2) {
& {
-webkit-transform: scaleX(.5);
transform: scaleX(.5)
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3) {
& {
-webkit-transform: scaleX(.33);
transform: scaleX(.33)
}
}
}
// 设置 右边框
.borderAfterRight(@a){
& {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: auto;
width: 1px;
height: 100%;
background-color: @a;
display: block;
z-index: 15;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%
}
@media only screen and (-webkit-min-device-pixel-ratio:2) {
& {
-webkit-transform: scaleX(.5);
transform: scaleX(.5)
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3) {
& {
-webkit-transform: scaleX(.33);
transform: scaleX(.33)
}
}
}
// 单行文字超出隐藏 显示...
.oneLineEllipsis{
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
// 两行文字超出隐藏 显示...
.twolineEllipsis{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
// 字体两端对齐公共样式
.textJustify{
display: inline-block;
float: left;
height:100%;
-webkit-text-align-last:justify;
text-align-last:justify;
text-justify:distribute-all-lines;
text-align:justify;
}
.textJustify:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}
// items 左右居中上下底部显示
.displayFlex_cenBot(){
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
// items 左右居中上下居中显示
.displayFlex(){
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
// items 单行 两端对齐
.displayFlex_between(){
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
// 阴影
.box-shadow(){
-webkit-box-shadow:.1rem .1rem .2rem rgba(0, 0, 0, .35);
-moz-box-shadow:.1rem .1rem .2rem rgba(0, 0, 0, .35);
box-shadow:.1rem .1rem .2rem rgba(0, 0, 0, .35);
}
// items 左右居中上下底部显示
.displayFlex_cenBot{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
// items 左右居中上下居中显示
.displayFlex{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
// item 之间留有间距
.displayFlexBetween{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
// item 前后留有间距
.displayFlexAround{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
// item 上下排列 平均分布
.displayFlexStretch{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
align-items: stretch;
flex-direction: column;
justify-content: space-between;
flex-wrap: nowrap;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
box-orient:vertical;
box-direction:normal;
}
// 站位容器 伸缩盒子
.itemDisplayFlex{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
// 公共动画样式
// 定义 从上进入 动画
@-webkit-keyframes pageFromTopToCenter {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
opacity: .9
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@keyframes pageFromTopToCenter {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
opacity: .9
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
// 定义 从上离开 动画
@-webkit-keyframes pageFromCenterToTop {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
to {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
opacity: .9
}
}
@keyframes pageFromCenterToTop {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
to {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
opacity: .9
}
}
// 定义 从下进入 动画
@-webkit-keyframes pageFromBotToCenter {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
opacity: .9
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@keyframes pageFromBotToCenter {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
opacity: .9
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
// 定义 从下离开 动画
@-webkit-keyframes pageFromCenterToBot {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
to {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
opacity: .9
}
}
@keyframes pageFromCenterToBot {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
to {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
opacity: .9
}
}
// 定义 从中间进入 动画
@-webkit-keyframes pageFromCenToCenter {
from {
left: 50%;
top: 50%;
width: 10%;
height: 10%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
opacity: 0
}
to {
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@keyframes pageFromCenToCenter {
from {
left: 50%;
top: 50%;
width: 10%;
height: 10%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
opacity: 0
}
to {
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
// 定义 从中间离开 动画
@-webkit-keyframes pageFromCenterToCen {
from {
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
to {
left: 50%;
top: 50%;
width: 10%;
height: 10%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
opacity: 0
}
}
@keyframes pageFromCenterToCen {
from {
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
to {
left: 50%;
top: 50%;
width: 10%;
height: 10%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
opacity: 0
}
}
// RightToCenter 动画 从右进入
.popup.modal-in.RightToCenter{
-webkit-animation: pageFromRightToCenter .4s forwards;
animation: pageFromRightToCenter .4s forwards;
}
// LeftToCenter 动画 从左进入
.popup.modal-in.LeftToCenter{
-webkit-animation: pageFromLeftToCenter .4s forwards;
animation: pageFromLeftToCenter .4s forwards
}
// LeftToCenter 动画 从上进入
.TopToCenter,
.popup.modal-in.TopToCenter{
-webkit-animation: pageFromTopToCenter .4s forwards;
animation: pageFromTopToCenter .4s forwards
}
// LeftToCenter 动画 从下进入
.page.BotToCenter,
.content.BotToCenter,
.popup.modal-in.BotToCenter{
-webkit-animation: pageFromBotToCenter .4s forwards;
animation: pageFromBotToCenter .4s forwards
}
// LeftToCenter 动画 从中间进入
.popup.modal-in.CenToCenter{
-webkit-animation: pageFromCenToCenter .4s forwards;
animation: pageFromCenToCenter .4s forwards
}
// CenterToRight 动画 从右离开
.popup.modal-out.RightToCenter,
.popup.modal-out.CenterToRight{
-webkit-animation: pageFromCenterToRight .4s forwards;
animation: pageFromCenterToRight .4s forwards;
}
// CenterToLeft 动画 从左离开
.popup.modal-out.LeftToCenter,
.popup.modal-out.CenterToLeft{
-webkit-animation: pageFromCenterToLeft .4s forwards;
animation: pageFromCenterToLeft .4s forwards
}
// CenterToRight 动画 从下离开
.content.CenterToBot,
.popup.modal-out.BotToCenter,
.popup.modal-out.CenterToBot{
-webkit-animation: pageFromCenterToBot .4s forwards;
animation: pageFromCenterToBot .4s forwards;
}
// CenterToLeft 动画 从上离开
.page.CenterToTop,
.content.CenterToTop,
.popup.modal-out.TopToCenter,
.popup.modal-out.CenterToTop{
-webkit-animation: pageFromCenterToTop .4s forwards;
animation: pageFromCenterToTop .4s forwards
}
// CenterToLeft 动画 从中间离开
.popup.modal-out.CenToCenter,
.popup.modal-out.CenterToCen{
-webkit-animation: pageFromCenterToCen .4s forwards;
animation: pageFromCenterToCen .4s forwards
}
PC css
// web 自定义字体应用
@iconFontTest: "iconFontTest";
@font-face {
font-family: 'iconFontTest';
src: url('../font/iconfont.svg') format('svg');
}
.iconFontTest{
font-family: @iconFontTest;
}
//网站主题 黑白色快速设置
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {
display: none;
}
.borderBox{
/*使用百分比宽度 像素边距时 防止超出边界 IE怪异模式*/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html{
font-size: 62.5%;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
html body{
width: 100%;
height: 100%;
/*字体抗锯齿*/
}
a,button,input{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
/*重置inphone input[type="submit"] ui*/
-webkit-appearance: none;
}
/*type="file" safail兼容*/
input[type="file"].opacity0{
position: absolute;
z-index: -10;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
body, button, input, select, textarea{
font:1.4rem/150% "微软雅黑","Microsoft YaHei",Arial,Verdana,"\5b8b\4f53";
font-family: Hiragino Sans GB,"Microsoft YaHei",STHeiti,Arial,sans-serif;
font: 12px/1.5 'PingHei','PingFang SC','Helvetica Neue','Helvetica',"微软雅黑","Microsoft YaHei","Tahoma",Arial,"宋体";
font-family: sans-serif;
/*font-family: sans-serif;*/
/*font-family:-apple-system;*/
/*font-family:Hiragino Sans GB;*/
/*font-family:WenQuanYi Micro Hei;*/
/*font-family:sans-serif;*/
/*font-family:Avenir Next;*/
/*font-family:Avenir;*/
/*font-family:Lucida Grande;*/
/*font-family:Calibri;*/
/*font-family:Trebuchet MS;*/
/*font-family:Helvetica;*/
/*font-family:Arial;*/
/*font-family:PingFang SC;*/
/*font-family:STHeiti;*/
/*font-family:Microsoft Jhenghei;*/
/*font-family:Nanum Gothic;*/
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dt,
dd,
li,
html,
body,
form,
input,
button,
img,
area,
cite,
strong,
big,
small,
em,
table,
td,
th {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 14px;
font-weight: 400;
}
img,
table,
td,
th {
border-collapse: collapse;
border: 0;
}
img[src=""]{
display: none;
}
input,button,select,textarea{outline:none}
ul,
ol {
list-style-type: none;
}
a {
color: #333;
text-decoration: none;
}
a[href]{
z-index: 1;
/*处理ie 下图片 与 A 层级问题*/
background:url(about:blank);
}
a:link{}
a:visited{}
a:hover{}
a:active{outline: none;}
i{font-style: normal;}
/*斜体字*/
.XieTi{ font-style:italic; }
/*倾斜文字*/
.XieTi{ font-style:oblique; }
.floatL {
float:left;
}
.floatR {
float:right;
}
.clearfix{
overflow:hidden;_zoom:1;
}
.bootclearfix {
*zoom: 1;
}
.bootclearfix:before,
.bootclearfix:after {
display: table;
line-height: 0;
content: "";
}
.bootclearfix:after {
clear: both;
}
.textRight{
text-align: right;
}
.textCenter{
text-align: center;
}
.textLeft{
text-align: left;
}
.colorRed{
color: #ff4c4c;
}
.colorGray{
color: #646464;
}
.ComBoxShadow{
-webkit-box-shadow:2px 2px 1px rgba(204, 198, 198,0.3);
-moz-box-shadow:2px 2px 1px rgba(204, 198, 198,0.3);
box-shadow:2px 2px 1px rgba(204, 198, 198,0.3);
}
table td{
/*防止文字过长破坏table结构*/
word-break: break-all;
}
//强制多行显示
word-break: break-all;
//手机端 文字两端对齐 ( 文字间必须加空格 ) word-break: break-all;
.TextJustify{
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
text-align-last:justify;/* ie9*/
text-justify:distribute-all-lines;/*ie6-8*/
text-align:justify;
}
.TextJustify:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
//手机端 文字截断
.phoneEllipsis{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.oneLineEllipsis{
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
//图片放大缩小
div img{
display: block;
position: relative;
z-index: 1;
width: 95%;
top: 50%;
left: 50%;
top: 0\9;
left: 0\9;
top: 50%\9\0;
left: 50%\9\0;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: width .3s;
-ms-transition: width .3s;
-o-transition: width .3s;
-webkit-transition: width .3s;
transition: width .3s
}
div:hover img{
width: 105%;
}
//图片放大 阴影
div{
transition-property: transform;
transition-duration: .1s;
transition-timing-function: linear;
overflow: visible
}
div:hover{
-webkit-box-shadow: 0 0 8px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 0 8px 3px rgba(0, 0, 0, .2);
box-shadow: 0 0 8px 3px rgba(0, 0, 0, .2);
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
transform: scale(1.03)
}
//图标翻转动画
a .icon_down {
-webkit-transition: -webkit-transform 0.1s ease-out;
-moz-transition: -moz-transform 0.1s ease-out;
-ms-transition: -ms-transform 0.1s ease-out;
-o-transition: -o-transform 0.1s ease-out;
}
a:hover .icon_down {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
}
//禁止选中文本
.NoSelectText{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
//select 高度兼容
.select{
height: 30px;
line-height: 24px; // ( 30px - 6px )
font-size: 14px;
}
//input 光标居中兼容
.inputText{
height: 30px;
line-height: 16px;
padding: 5px 3px;
font-size: 14px;
}
// 媒体查询
@media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}
@media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}
@media screen and ( min-width: 359px){/*360px显示屏样式 索尼Z1*/}
@media screen and ( min-width: 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
@media screen and ( min-width: 399px){/*399px显示屏样式 三星galaxyNote*/}
@media screen and ( min-width: 414px){/*414px显示屏样式 苹果6plus*/}
@media screen and ( min-width: 423px){/*424px显示屏样式 LG 4X */}
@media screen and ( min-width: 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/}
@media screen and ( min-width: 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}
@media screen and ( min-width: 639px){/*640px显示屏样式*/}
@media screen and ( min-width: 640px){/*640px以上显示屏样式*/}
// background-size 用 background 简写
background: #f00 url(http://www.w3school.com.cn/i/bg_flower.gif) no-repeat 10px 10px/106px 160px;
javascript
// keyup 时间数据 按下 900 毫秒 异步请求
setTimeout(function () {
var _t = new Date().getTime();
var _keyT = _t - keyT;
if(keyT && (_keyT > 850)){
_post();
}
},900);
// 页面设置 多个 window.onload 解决方案 <body onload="fn_onload();">
(function () {
'use strict';
window._windowOnload = [];
window.fn_onload = function () {
var _windowOnload = window._windowOnload;
for (var i = 0; i < _windowOnload.length; i++) {
if(typeof _windowOnload[i] == 'function'){
setTimeout(_windowOnload[i](),0);
}
}
};
Object.defineProperty(window,"onload",{
get: function () {
console.log('get');
},
set: function (val) {
if(typeof val == 'function'){
_windowOnload.push(val);
}
},
configurable : true
});
window.onload = function () {
console.log('01');
};
window.onload = function () {
console.log('02');
};
}());
// 简单时间倒计时
function fn_timerCountDown(Obj){
function showTime(Obj) {
var T = Obj.T;
var dom = Obj.dom;
var Ht = Obj.Ht;
var day=0,
hour=0,
minute=0,
second=0;
day = Math.floor(T / (60 * 60 * 24)) + '';
hour = Math.floor(T / (60 * 60)) - (day * 24) + '';
minute = Math.floor(T / 60) - (day * 24 * 60) - (hour * 60) + '';
second = Math.floor(T) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60) + '';
if (hour <= 9) {hour = '0' + hour;}
if (minute <= 9) {minute = '0' + minute;}
if (second <= 9) {second = '0' + second;}
day = '<i>'+day+'</i>';
hour = '<i>'+hour[0]+'</i><i>'+hour[1]+'</i>';
minute = '<i>'+minute[0]+'</i><i>'+minute[1]+'</i>';
second = '<i>'+second[0]+'</i><i>'+second[1]+'</i>';
Ht = Ht.replace(/{dd}/,day);
Ht = Ht.replace(/{hh}/,hour);
Ht = Ht.replace(/{mm}/,minute);
Ht = Ht.replace(/{ss}/,second);
document.getElementById(dom).innerHTML = Ht;
}
var T = Obj.T;
var dom = Obj.dom;
var time=window.setInterval(function(){
console.log(T);
var day=0,
hour=0,
minute=0,
second=0;
if(T > 0){
T--;
Obj.T = T;
showTime(Obj);
}else{
clearInterval(time);
return false;
}
}, 1000);
}
fn_timerCountDown({
T: 666666,
dom: 'seckillADHt',
Ht: '<span class="hh">{hh}</span><span class="mm">{mm}</span><span class="ss">{ss}</span>'
});
// 设置对象 不可枚举 不可编辑 不可配置 属性
function setEnumF(O,K,V) {
Object.defineProperty(O,K,{
value: V
});
}
// js 类型判断
var type = function (o){
var s = Object.prototype.toString.call(o);
return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};
type(''); // string
type(true); // boolean
type({}); // "object"
type([]); // "array"
type(5); // "number"
type(null); // "null"
type(); // "undefined"
type(/abcd/); // "regex"
type(new Date()); // "date"
// 原生js ajax
window._xhr = {
_ajax: function (){
var arg = arguments[0];
var createxmlHttpRequest = function () {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
var convertData = function (data){
if( typeof data === 'object' ){
var convertResult = "" ;
for(var c in data){
convertResult+= c + "=" + data[c] + "&";
}
convertResult=convertResult.substring(0,convertResult.length-1)
return convertResult;
}else{
return data;
}
}
var _ = {
// GET POST
type:arg.type || "GET",
// url
url:arg.url || "",
// 异步( 默认 ) 同步
async:arg.async || "true",
// 提交数据
data:arg.data || null,
// 返回数据
dataType:arg.dataType || "text",
// 提交文件头
contentType:arg.contentType || "application/x-www-form-urlencoded",
// 提交前
beforeSend:arg.beforeSend || function () {},
// 成功
success:arg.success || function () {},
// 错误
error:arg.error || function () {}
}
_.beforeSend();
var xhr = createxmlHttpRequest();
xhr.responseType=_.dataType;
xhr.open(_.type,_.url,_.async);
xhr.setRequestHeader("Content-Type",_.contentType);
xhr.send(convertData(_.data));
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if(xhr.status == 200){
_.success(xhr.response)
}else{
_.error()
}
}
}
},
_get: function () {
var arg = arguments[0];
this._ajax({
type: "GET",
url: arg.url,
dataType: "json",
async: arg.async || "true",
beforeSend: arg.beforeSend || null,
success: arg.success || null,
error:arg.error || null
});
},
_post: function () {
var arg = arguments[0];
this._ajax({
type: "POST",
url: arg.url,
dataType: "json",
async: arg.async || "true",
data: arg.data || null,
beforeSend: arg.beforeSend || null,
success: arg.success || null,
error:arg.error || null
});
}
};
_xhr._get({
url:'http://h5.quanchepin.com/index.php?act=get_jrtj',
success:function(msg){
console.log(msg);
},
error:function(){
console.log("error");
}
});
// cookie 操作
function setCookie(name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
console.log('cookie: ' + document.cookie);
// vik_im 自动回复 js
(function (window,$) {
// 判断 页面是否获取焦点
var isblur = true;
window.onblur = function() {
isblur = true;
// console.log('onblur' + isblur);
};
window.onfocus = function() {
isblur = false;
// console.log('onfocus' + isblur);
};
window.ImExt = {
init: function () {
try{
if(ImExt.sendTextObj){
ImExt.sendText(ImExt.sendTextObj);
}
// 展开陌生人列表
// var S = document.getElementById('strangers');
// var T = document.getElementById(window.ImExt.to_user);
// triggerClick(S);
// triggerClick(T);
}catch(e){
}
},
im_Notification: function (msg,selectUser) {
// 未读消息
var IMunread = window.IMunread = {};
IMunread[msg.from] = msg;
// 页面获取焦点 from == select
var isselect = msg.from == selectUser;
// console.log(isblur + '==' + isselect);
if(!isblur && isselect){
return false;
}
clearInterval(window.NotificationTime);
window.NotificationTime = setInterval(function () {
console.log(window.IMunread);
var length = 0;
for(var i in window.IMunread){
length = 1;
ImExt.im_Notification(IMunread[i],null);
}
if(!length){
clearInterval(window.NotificationTime);
}
},10000);
var con = typeof msg.data == 'string' ? msg.data : '收到未读消息!';
if (window.Notification) {
Notification.requestPermission(function (perm) {
if (perm == "granted") {
var notify = new Notification(con, {
from: msg.from,
dir: 'auto',
tag: 'msgTag',
renotify: true,
sticky: true,
timestamp: 3600000,
icon: window.baseUrl + '/includes/libraries/images/logo_03.png',
body: '请立即查看.'
});
notify.onshow = function () {
// setTimeout(function(){
// notify.close();
// }, 3600000);
return false;
};
notify.onclick = function() {
// 未读消息清除
delete IMunread[msg.from];
notify.close();
};
}
});
}
},
updateOnlineMsg: function(toName) {
$.post('index.php?app=common&act=upd_im_online', {to_name: toName}, function(data, textStatus, xhr) {
console.log(data);
});
},
triggerClick: function(el) {
if (el.click) {
el.click();
} else {
try {
var evt = document.createEvent('Event');
evt.initEvent('click', true, true);
el.dispatchEvent(evt);
} catch (e) {
console.dir(e);
};
}
},
valueDeCode: function (V) {
// s = str.replace(/&/g, "&");
// s = s.replace(/\n/g, "
");
// V = V.replace(/</g,"<");
// V = V.replace(/>/g,">");
// V = V.replace(/"/g,'"');
return V;
},
addStyle: function () {
var nod = document.createElement('style'),
str = '.webim-chat{overflow:visible}.webim-chat .replyMsgBox *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.webim-chat .replyMsgBox{position:absolute;left:0;bottom:-51px;width:100%;height:50px;background-color:#fff;box-shadow:rgba(0,0,0,.298039) 0 0 6px 0}.webim-chat .replyMsgBox a{text-decoration:none}.webim-chat .replyMsgBox .selectBox{position:relative;margin-left:10px;margin-top:10px;float:left;width:80px;height:30px;border:1px solid #d6d6d6;line-height:30px;background-color:#fff}.webim-chat .replyMsgBox .selectBox p{padding:0 5px}.webim-chat .replyMsgBox .selectBox ul{position:absolute;left:-1px;top:28px;width:80px;line-height:30px;border:1px solid #d6d6d6;line-height:30px;background-color:#fff;display:none}.webim-chat .replyMsgBox .selectBox ul li{border-top:1px solid #d6d6d6}.webim-chat .replyMsgBox .selectBox ul li a{padding:0 5px;display:block;width:100%;height:100%}.webim-chat .replyMsgBox .selectBox ul li a:hover{background-color:#f5f5f5}.webim-chat .replyMsgBox .selectBox ul li:first-child{border-top:0}.webim-chat .replyMsgBox .selectBox:hover ul{display:block}.webim-avatar-icon{-webkit-filter:inherit}';
nod.type='text/css';
if(nod.styleSheet){
nod.styleSheet.cssText = str;
} else {
nod.innerHTML = str;
}
document.querySelector('head').appendChild(nod);
// var ht = '<div class="replyMsgBox"></div>'
var ht = '<div class="selectBox" data-type="0"><p><span>不自动回复</span></p><ul><li><a href="javascript:;" data-type="1">自动回复</a></li><li><a href="javascript:;" data-type="0">不自动回复</a></li></ul></div>'
document.querySelector('.replyMsgBox').innerHTML= ht;
$('body').on('click','.selectBox a',function () {
var selectBox = $('.replyMsgBox').find('.selectBox');
var _this = $(this);
var t = _this.text();
selectBox.find('span').text(t);
var typt = _this.attr('data-type');
_this.parents('.selectBox').attr('data-type',typt);
});
},
// 未读消息时间处理
unreadMessageDate: function (msg) {
var Time = msg.delay || null;
var timestamp2;
if(Time){
// Time = Time.replace(/-/g,'/');
Time = Time.replace(/T/g,' ');
Time = Time.replace(/.[0-9]{1,}Z/g,'');
// var stringTime = "2014-07-10 10:21:12";
Time = Date.parse(new Date(Time)) + 28800000;
Time = new Date(Time).toLocaleString();
}
return Time;
},
// 获取当前日期 时间
getNowFormatDate: function () {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
// var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
// + " " + date.getHours() + seperator2 + date.getMinutes()
// + seperator2 + date.getSeconds();
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
return currentdate;
},
// 时间判断
dateJudge02: function () {
var type = $('.selectBox').attr('data-type');
var is = type == '1';
if(is){
return true;
}else{
return false;
}
},
// 时间判断
dateJudge: function (t1,t2) {
t1 = t1 || '12:30';
t2 = t2 || '14:00';
// 2014-03-02
var _D = window.extFn.getNowFormatDate();
var date1 = _D + ' ' + t1;
var date2 = _D + ' ' + t2;
// 2014-03-02 12:00
var oDate1 = new Date(date1);
var oDate2 = new Date(date2);
var oDate3 = new Date();
var D1T = oDate1.getTime();
var D2T = oDate2.getTime();
var D3T = oDate3.getTime();
var is = D3T>D1T && D3T 0){
day = Math.floor(intDiff / (60 * 60 * 24));
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}else{
$(timeStrDist).html('剩余00秒');
clearInterval(_this.time);
return false;
}
if (minute <= 9) {minute = '0' + minute;}
if (second <= 9) {second = '0' + second;}
var str='剩余';
if(day>0){
str+=day+"天"+hour+'时'+minute+'分'+second+'秒';
}else if(hour>0){
str+=hour+'时'+minute+'分'+second+'秒';
}else if(minute>0){
str+=minute+'分'+second+'秒';
}else if(second>0){
str+=second+'秒';
}
$(timeStrDist).html(str);
intDiff--;
return str;
}, 1000);
}
// 插件绑定
$.fn.fn_timerCountDown = fn_timerCountDown;
})(window,jQuery);
// 创建 style 节点
function set_fontFamily() {
var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
var ht;
if(isMac){
ht = 'body,button,input,select,option,textarea{font-family: Hiragino Sans GB,sans-serif !important;}';
}else{
ht = 'body,button,input,select,option,textarea{font-family: "Microsoft YaHei",Arial,sans-serif!important;-moz-osx-font--webkit-font-smoothing: antialiased !important;}';
}
var nod = document.createElement("style");
nod.type="text/css";
if(nod.styleSheet){
nod.styleSheet.cssText = ht;
} else {
nod.innerHTML = ht;
}
document.getElementsByTagName("head")[0].appendChild(nod);
}
// pc端 自定义 title样式
#titleTips{
padding: 6px;
position: fixed;
width: 300px;
background: @colorfff;
border:1px solid @colorGrey54;
// border-radius:3px;
font-size: 12px;
z-index: 100;
color: @color666;
box-shadow: 0 0 4px @tipTitleShadow;
i{
position: absolute;
display: block;
left: 50%;
margin-left: -9px;
top: -6px;
width: 9px;
height: 6px;
background: @explainUp01;
}
}
$(".tipTitle").on("mouseover",function(){
if($("#titleTips").length!=1){
$('body').append('<div id="titleTips"><i></i><span></span></div>');
}
//获取选中元素的私有属性值
var popValue = $(this).attr("data-title");
//获取元素左边距到窗口左边缘的距离
var xAxis = $(this).offset().left;
//获取元素上边距到窗口顶端的距离（这里减去了滚动条滚动的距离）
var yAxis = $(this).offset().top-$(document).scrollTop();
//获取当前元素的宽度与高度
var domWidth = $(this).width();
var domHeight = $(this).height();
//计算要显示字符的字母个数（显示的框框要根据字符数自动设置宽度）
var fontNumber = popValue.length;
//设置每个字符所占据的像素长度
var widthForSingleAlpha = 14;
//鼠标移入的时候显示提示框。
$("#titleTips").show();
// 设置到顶端的距离
$("#titleTips").css("top",(yAxis+domHeight+6)+"px");
var smallTipsWidth = $("#titleTips").width();/*获取弹框的宽度*/
$("#titleTips").css("left",xAxis+domWidth/2-smallTipsWidth/2);/*根据弹框的宽度设置其到左端的距离*/
$("#titleTips>span").html(popValue);/*设置显示的文字内容*/
});
$(".tipTitle").on("mouseout",function(){
$("#titleTips").hide();
});
// 判断 Mac 终端
isMac = /macintosh|mac os x/i.test(navigator.userAgent);
// 判断 Windows 终端
isWindows = /windows|win32/i.test(navigator.userAgent);
// 判断 Linux 终端
isLinux = /linux/i.test(navigator.userAgent);
// 判断 android 终端
isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
// 判断 ios 终端
isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
//判断 ie
var browser=navigator.appName
var b_version=navigator.appVersion
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
alert("IE 6.0");
} else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
alert("IE 7.0");
} else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {
alert("IE 8.0");
} else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {
alert("IE 9.0");
}
//js 获取get 参数
function fn_get(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null){
return unescape(r[2]);
}
return null;
}
//form 禁止回车表单自动提交事件
function fn_Key13() {
var f = document.getElementsByTagName("form");
for (var i = f.length - 1; i >= 0; i--) {
f[i].onkeydown=function (event) {
var e = event ? event : window.event;
var c = Number(e.keyCode);
console.log(c);
if(c==13){
return false;
}
}
}
}
fn_Key13();
/**
* 是否为mac系统
* */
var isMac = function() {
return /macintosh|mac os x/i.test(navigator.userAgent);
}();
/**
* 是否为windows系统
* */
var isWindows = function() {
return /windows|win32/i.test(navigator.userAgent);
}();
//jq 插件模板
(function (w,$,undefined) {
var _this = {
O : {
name : "name",
id : "id",
cla : "cla"
},
loadJs : function (U) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = U;
document.body.appendChild(script);
},
loadCss : function (U) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = U;
document.getElementsByTagName("head")[0].appendChild(link);
},
loadImg : function (U,fn) {
this._.img = new Image();
this._.img.src = U;
this._.img.onload = fn || function () {
console.log(this._.img);
}
},
init : function (O,_jk) {
this.O = $.extend(this.O,O);
this._ = _jk;
$(this.O.id).on('click',this.O.cla, function(event) {
event.preventDefault();
console.log($(this).text());
});
},
sayN : function () {
console.log(this.O.name);
},
sayId : function () {
console.log(this.O.id);
}
};
var _jk = {
init : function (O) {
_this.init(O,this);
},
sayN : function () {
_this.sayN();
},
sayId : function () {
_this.sayId();
},
loadJs : function (U) {
_this.loadJs(U);
},
loadCss : function (U) {
_this.loadCss(U);
},
loadImg : function (U,fn) {
_this.loadImg(U,fn);
}
};
w._jk = _jk;
}(window,jQuery));
_jk.init({
name: "jk_name",
id : "#div01",
cla : ".next"
});
_jk.sayN();
_jk.sayId();
_jk.loadImg("https://www.baidu.com/img/bd_logo1.png",function () {
$("body").append(_jk.img);
});
//设置 iframe 高度
function set_iframeH(str) {
var f = document.getElementById(str);
f.Win = f.contentWindow || f.contentDocument.parentWindow;
f.height = f.Win.document.documentElement.scrollHeight || f.Win.document.body.scrollHeight;
}
// 返回上一个页面
self.location=document.referrer;
history.back(-1);location.reload(); // 有兼容问题
history.go(-1);location.reload(); // 有兼容问题
//beforeunload 兼容性
ie8 <a href="javascript:;"></a> javascript:;伪协议会触发beforeunload事件
//layer 显示图片
layer.open({
type: 1,
title: false,
offset: 'auto',
skin: 'layui-layer-demo', //样式类名
closeBtn: 0, //不显示关闭按钮
anim: 2,
area: ['auto', 'auto'],
fix: true,
shade: 0.3,
shadeClose: true, //开启遮罩关闭
content: '<img class="layerShowImgBox" src=""/>'
});
//捕获页 弹框配置
layer.open({
type: 1,
skin: 'layui-layer-rim',
area: ['auto', 'auto'],
shade: 0.35,
fix: true,
scrollbar: false,
title: '全车品登录', //不显示标题
content: $('#loginHideBox') //捕获的元素
});
// 设置滚动条位置
function fn_scrollTop(Obj) {
var T = $(Obj).offset().top;
$("html,body").scrollTop(T);
}
/**
*jackdizhu 瀑布流 小插件
*Box:"#liBox" 最外层容器
*Li:".li" 列表元素
*Margin:10 列表之间的间距 margin-left or margin-right
*_this=this 调用this 用_this代替
*/
;!(function (window,$,undefined) {
window.waterfallFlow=function(options) {
var _default={
Box:"#liBox",
Li:".li",
Margin:10
};
var _options = $.extend({},_default,options);
var Liobj=$(_options.Li),
BoxObj=$(_options.Box);
var LiWidth = Liobj[0].offsetWidth+_options.Margin;
var BoxWidth=BoxObj[0].offsetWidth+_options.Margin;
function fn_setLiBox(){
var H=[]; //记录高度的数组
var N = BoxWidth/LiWidth|0;
var Max_H,MinKey,Max,Li_H;
for(var i = 0;i < Liobj.length;i++) {
Li_H = Liobj[i].offsetHeight; //获取每个Li的高度
if(i < N) { //N是一行最多的Li，小于n就是第一行
Max_H =Math.max.apply(null,H);
H[i]=Li_H; //把每个Li放到数组里面
Liobj.eq(i).css("top",0); //第一行Li的top值为0
Liobj.eq(i).css("left",i * LiWidth); //第i个Li的左坐标就是i*li的宽度
}
else{
min_H =Math.min.apply(null,H) ; //取得数组中的最小值 ，高度值最小
MinKey = fn_getarraykey(H, min_H); //最小的值对应的key
H[MinKey] += Li_H; //加上新高度后 更新高度值
Liobj.eq(i).css("top",min_H); //先得到高度最小的Li，然后把接下来的li放到它的下面
Liobj.eq(i).css("left",MinKey * LiWidth); //第i个li的左坐标就是i*li的宽度
}
}
Max =Math.max.apply(null,H) ;
BoxObj.css("height",Max);
}
/* 使用for in运算返回数组中某一值的对应项数(计算出最小的高度值是数组里面的第几个) */
function fn_getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
/*一定要用onload，如果有图片不加载完就不知道高度值*/
window.onload = function() {fn_setLiBox();};
}
})(window,jQuery)
/**
*jackdizhu a锚点动画 小插件
*A:'a' a标签元素
*_this=this 调用this 用_this代替
*/
;!(function (window,$,undefined) {
window.anchorAnimation=function(options) {
var _default={
A:'a',
aTime:1000,
Fn_Click:null,
Fn_Callback:null
};
var _options = $.extend({},_default,options);
var aObj=$(_options.A);
var Href,id;
var rel=/#[A-Za-z0-9_]+/;
// 获取元素 绑定点击事件
$(_options.A).on('click', function(event) {
event.preventDefault();
event.stopPropagation();
Href=this.href;
id=rel.exec(Href);
if(id.length){
fn_GoAnimation(id[0]);
if(typeof _options.Fn_Click == 'function'){
var _this=this;
_options.Fn_Click(_this);
}
}
return false;
});
// 执行滚动动画
function fn_GoAnimation(id) {
var Ojb=$(id);
var scT=Ojb.offset().top;
// 防止回调重复执行
Ojb.attr({
'data-animate': 'true'
});
$('html,body').animate({
scrollTop:scT
},_options.aTime,function () {
if(typeof _options.Fn_Callback == 'function'){
var _this=this;
if(Ojb.attr('data-animate')=='true'){
Ojb.attr({
'data-animate': 'false'
});
_options.Fn_Callback(_this);
}
}
});
}
}
})(window,jQuery);
//new Date 参数形式：如：
new Date("January 12,2006 22:19:35");
new Date("January 12,2006");
new Date(2006,0,12,22,19,35);
new Date(2006,0,12);
new Date(1137075575000);
//根据邮箱后缀 跳转登录页面
function fn_get_emailLogin(){
var hash = {
'qq.com': 'http://mail.qq.com',
'gmail.com': 'http://mail.google.com',
'sina.com': 'http://mail.sina.com.cn',
'163.com': 'http://mail.163.com',
'126.com': 'http://mail.126.com',
'yeah.net': 'http://www.yeah.net/',
'sohu.com': 'http://mail.sohu.com/',
'tom.com': 'http://mail.tom.com/',
'sogou.com': 'http://mail.sogou.com/',
'139.com': 'http://mail.10086.cn/',
'hotmail.com': 'http://www.hotmail.com',
'live.com': 'http://login.live.com/',
'live.cn': 'http://login.live.cn/',
'live.com.cn': 'http://login.live.com.cn',
'189.com': 'http://webmail16.189.cn/webmail/',
'yahoo.com.cn': 'http://mail.cn.yahoo.com/',
'yahoo.cn': 'http://mail.cn.yahoo.com/',
'eyou.com': 'http://www.eyou.com/',
'21cn.com': 'http://mail.21cn.com/',
'188.com': 'http://www.188.com/',
'foxmail.com': 'http://www.foxmail.com',
'outlook.com': 'http://www.outlook.com'
}
var _mail = $("input[type=email]").val().split('@')[1]; //获取邮箱域名
for (var j in hash){
if(j == _mail){
return hash[_mail];
}
}
return false;
}
//简单图片切换
function fn_slide(Obj,n,top) {
if(top=='top'){
var interval1 = $(Obj).find("li:first-child").outerHeight();
var mar='marginTop';
}else{
var interval1 = $(Obj).find("li:first-child").outerWidth();
var mar='marginLeft';
}
var leng=$(Obj).find("li").length+1;
$(Obj).find("ul").css({width:interval1*(leng-1)+'px'});
var count1 = leng - n-1; /* 显示 5 个 li标签内容 */
var curIndex1 = 0;
$(Obj).find("a").on('click',function(){
$(Obj).find("a").removeClass('disabled');
if (curIndex1 == 0){$(Obj).parent().find('.prev').addClass('disabled');}
if (curIndex1 >= count1){$(Obj).parent().find('.next').addClass('disabled');}
if( $(this).hasClass('disabled') ){return false;}
if ($(this).hasClass('prev')){--curIndex1;}
else{++curIndex1;}
if(mar=='marginTop'){
$(Obj).find("ul").stop(false, true).animate({marginTop: -curIndex1*interval1 + "px"}, 600);
}else{
$(Obj).find("ul").stop(false, true).animate({marginLeft: -curIndex1*interval1 + "px"}, 600);
}
});
}
//IScroll 多个div 调用 点击事件 配置
$('.wrapper').each(function() {
var myscroll;
var id='#'+$(this).attr('id');
function loaded(){
myscroll=new IScroll(id,{
momentum:false,
hScrollbar:false,
hideScrollbar:false,
vScroll:true,
scrollbars: 'custom',
click: true,
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A|P)$/},
preventDefault:false
});
}
function set_hide() {
$(id).css({visibility:'visible',display:'none'});
}
loaded();
set_hide();
});
//阻止浏览器默认行为
event.preventDefault();
//阻止浏览器往下派发事件
event.stopPropagation();
//判断事件是否是起泡事件类型
console.log(event.bubbles);
//判断事件是否可拥可取消的默认动作
console.log(event.cancelable);
//事件绑定
function eventBinding(obj,type,handle){
if(obj.addEventListener){
//非ie
obj.addEventListener(type,handle,false);
}else if(obj.attachEvent){
//ie
obj.attachEvent('on' + type,handle);
}else{obj['on' + type] = handle;}
}
//手机拖动事件
$(function() {
var startX, startY, endX, endY;
document.getElementById("shoplist").addEventListener("touchstart", touchStart, false);
document.getElementById("shoplist").addEventListener("touchmove", touchMove, false);
document.getElementById("shoplist").addEventListener("touchend", touchEnd, false);
function touchStart(event) {
var touch = event.touches[0];
startY = touch.pageY;
}
function touchMove(event) {
var touch = event.touches[0];
endY = (startY - touch.pageY);
}
function touchEnd(event) {
if(endY>100){
//加载更多
$(".loadMore").click();
}
}
});
// 停止body页面滚动
function stopTouchMove(e) {
bodyScollTop=$('body').scrollTop();
$("body,html").css({"overflow":"hidden"});
return false;
}
// 开始页面滚动
function startTouchMove(e) {
$('body').scrollTop(bodyScollTop);
$("body,html").css({"overflow":"auto"});
return false;
}
//多行文字两端对齐
$("#CompanyIntroduction p").css({'textalign':'justify','letter-spacing':'-.15em'});
var text = $("#CompanyIntroduction p").html().split("").join(" ").replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " ");//添加空格 处理3个空格情况
$("#CompanyIntroduction p").html(text);
//文字两端对齐方法
function fn_TextJustify(Obj) {
var t=$(Obj).addClass('.TextJustify').text();
// 手机端
// $(Obj).css({'letter-spacing':'-.15em'});
// var t2=t.html().split("").join(" ").replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " ");
// pc端
var t2=t.split("").join(" ");
$(Obj).html(t2).attr('data-text',t);
}
//处理3个空格情况
box.innerHTML = box.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " ")
//多行文字超出隐藏
$("#CompanyIntroduction").each(function(i){
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
IE 注释
除了IE以外的版本
<!--[if IE 6]>
只有IE6版本可见
<![endif]-->
<!--[if lte IE 6]>
IE6及其以下版本可见
<![endif]-->
<!--[if gte IE 6]>
IE6及其以上版本可见
<![endif]-->
<!--[if IE 7]>
只有IE7版本可见
<![endif]-->
<!--[if lte IE 7]>
IE7及其以下版本可见
<![endif]-->
<!--[if gte IE 7]>
IE7及其以上的版本可见
<![endif]-->
<!--[if IE 8]>
只有IE8版本可见
<![endif]-->
<!--[if lte IE 8]>
IE8及其以下的版本可见
<![endif]-->
<!--[if gte IE 8]>
IE8及其以上的版本可见
<![endif]-->
<![if !IE]>
除了IE以外的版本
<![endif]>
火狐 浏览器 页面比例显示不正常 问题
//关于 火狐 浏览器 页面比例不正常问题 (屏幕的像素比)
layout.css.devPixelsPerPx 值 改为 1
//火狐 RemoteLiveReload liveReload 插件
//谷歌 LiveReload liveReload 插件
//sublime LiveReload liveReload 插件
//liveReload 插件配置 (文件修改-浏览器自动刷新)
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}
sublime配置
//用户配置
{
"always_show_minimap_viewport": true,
"auto_complete": true,
"auto_match_enabled": true,
"color_scheme": "Packages/Color Scheme - Default/Solarized (Light).tmTheme",
"default_encoding": "UTF-8",
"default_line_ending": "Unix",
"dpi_scale": 1.0,
"ensure_newline_at_eof_on_save": true,
"fade_fold_buttons": true,
"fold_buttons": true,
"font_face": "Consolas",
"font_size": 12,
"highlight_line": true,
"ignored_packages":
[
"Vintage"
],
"show_encoding": true,
"show_line_endings": true,
"tab_size": 2,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"update_check": false
}
php_给文件加MD5
// MD5
// $filename = "./includes/libraries/javascript/base.css";
function code6($url){
$result = sprintf("%u",crc32($url));
$code = '';
while($result >0){
$s = $result % 62;
if($s > 35){
$s=chr($s+61);
}elseif($s>9 && $s<=35){
$s=chr($s+55);
}
$code .= $s;
$result = floor($result / 62);
}
return $code;
}
$url = $_GET["file"];
// $md5file = md5_file($url);
$md5file = md5_file($url);
$arr = explode('/',$url);
$filename= $arr[count($arr)-1];
$short = code6($md5file);
$filename1 = str_replace(".",'.'.$md5file.'.',$filename);
$filename2 = str_replace(".",'.'.$short.'.',$filename);
echo $filename1."<br/>";
echo $filename2."<br/>";