html、css、javascript随手笔记
本文仅为个人常用代码整理,供自己日常查阅
html
浏览器内核
<!--[if IE]><![endif]--> <!--[if IE 6]><![endif]--> <!--[if gte IE 7]><![endif]--> <!--[if lte IE 7]><![endif]--> <!--[if !IE]><![endif]--> <!--[if !(lte IE 7)]><!-->
电话消息邮件
<a href="tel:10086">电话:10086</a> <a href="sms:10086">短信:10086</a> <a href="weixin://addfriend/l670529375">微信:l670529375</a> <a href="mailto:[email protected]">电子邮箱:[email protected]</a>
css
chrome滚动条
::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:#f9f9f9;} ::-webkit-scrollbar-track:hover{background:#efefef;} ::-webkit-scrollbar-thumb{border-radius:4px;background:#aaa;} ::-webkit-scrollbar-thumb:hover{background:#777;} ::-webkit-scrollbar-thumb:active{background:#666;}
清浮动
.clearfix:after{height:0;display:block;content:".";visibility:hidden;clear:both;} .clearfix{zoom:1;} .clear{height:0;overflow:hidden;font-size:0;clear:both;}
字体大小固定
div{-webkit-text-size-adjust:none;text-size-adjust:none;}
悬挂定位
div{position:fixed;_position:absolute;top:100px;_top:expression(documentElement.scrollTop + 100 + "px");left:50px;}
最大最小宽高度
div{max-width:1280px;_width:expression(documentElement.clientWidth > 1280 ? "1280px" : "auto");} div{min-width:980px;_width:expression(documentElement.clientWidth < 980 ? "980px" : "auto");} div{min-height:800px;_height:expression((documentElement.clientHeight || document.body.clientHeight) > 800 ? "800px" : "");} div{min-height:600px;_height:expression((documentElement.clientHeight || document.body.clientHeight) < 600 ? "600px" : "");}
背景透明图
div{background:url(../images/logo.png) no-repeat 50%;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/logo.png");}
背景渐变
div{background:-webkit-linear-gradient(top,#f9f9f9,#f1f1f1);background:-moz-linear-gradient(top,#f9f9f9,#f1f1f1);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#FFf9f9f9‘,endColorstr=‘#FFf1f1f1‘,GradientType=0);background:linear-gradient(to bottom,#f9f9f9,#f1f1f1);}
灰阶
div{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);filter:grayscale(100%);filter:gray;}
透明度
div{-webkit-opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5;}
阴影
div{-webkit-box-shadow:0 1px 0 #ccc;-moz-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc;}
动画旋转
div{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);}
动画翻转
div{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);transform:scale(-1, 1);}
动画位移
div{-webkit-transform:translate(50px,0);-moz-transform:translate(50px,0);transform:translate(50px,0);}
动画持续时长
div{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
盒模型边框
div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
图片水平垂直居中
div{width:800px;height:800px;display:table-cell;text-align:center;vertical-align:middle;} div i{position:static;+position:absolute;top:50%;} div img{position:static;+position:relative;top:-50%;left:-50%;vertical-align:middle;}
div{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
三角形
div{width:0;height:0;border-bottom:10px solid #ccc;border-left:10px dotted transparent;border-right:10px dotted transparent;}
英文字符换行
div{word-break:break-all;word-wrap:break-word;}
文本字符不换行
div{white-space:nowrap;}
文本字符超出隐藏
div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
伪类选择器
div:first-child{color:#999;} div:last-child{color:#999;} div:nth-child(2n){color:#999;} div:nth-child(odd){color:#999;} div:nth-child(even){color:#999;}
javascript
判断手机端类型
if(/android/i.test(navigator.userAgent)){ ... }; if(/ipad|iphone|mac/i.test(navigator.userAgent)){ ... };
判断手机用户
var ua = navigator.userAgent.toLowerCase(); var isIpad = ua.match(/ipad/i) == ‘ipad‘; var isIphoneOs = ua.match(/iphone os/i) == ‘iphone os‘; var isMidp = ua.match(/midp/i) == ‘midp‘; var isUc7 = ua.match(/rv:1.2.3.4/i) == ‘rv:1.2.3.4‘; var isUc = ua.match(/ucweb/i) == ‘ucweb‘; var isAndroid = ua.match(/android/i) == ‘android‘; var isCE = ua.match(/windows ce/i) == ‘windows ce‘; var isWM = ua.match(/windows mobile/i) == ‘windows mobile‘; if(isIpad || isIphoneOs || isMidp || isUc7 || isUc || isAndroid || isCE || isWM){ location.href = ‘‘; };
窗口准备开始时
$(document).ready(function(){ ... });
窗口滚动时
window.onscroll = function(){ ... };
窗口改变大小时
window.onresize = function(){ ... };
窗口加载完时
window.onload = function(){ ... };
新窗口控制
window.open(‘‘,‘_blank‘,‘width=200,height=200,top=200,left=200);
定时调用
setInterval(function(){ ... }, 1000); setTimeout(function(){ ... }, 1000);
图片加载状态
var img = new Image(); img.src = ‘‘; if(img.complete){ };
img.onload = function(){ };
js文件加载状态
var js = document.createElement(‘script‘); js.src = ‘‘; document.getElementsByTagName(‘head‘)[0].appendChild(js);
if(js.readyState){ js.onreadystatechange = function(){ if(js.readyState == ‘loaded‘ || js.readyState == ‘complete‘){ js.onreadystatechange = null; }; }; }else{ js.onload = function(){ }; };
当前时间
var date = new Date(); date.getTime(); date.setTime();
date.getFullYear(); date.getMonth(); date.getDate(); date.getHours(); date.getMinutes(); date.getSeconds();
创建元素
var img = document.createElement(‘img‘); img.src = ‘‘; img.width = 100px; img.height = 30px; img.style.display = ‘block‘; document.body.appendChild(img);
历史记录
history.back();
document.referrer;
userAgent
navigator.userAgent;
跨域
document.domain = ‘www‘;
父窗口函数
window.parent.fn();
临时存储
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
本地存储
localStorage.setItem(key, value);
localStorage.getItem(key);
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。