web前端开发随手笔记 - 持续更新
本文仅为个人常用代码整理,供自己日常查阅
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:670529375@qq.com">电子邮箱:670529375@qq.com</a>
关闭自动完成表单输入
<input autocomplete="off" type="text" />
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);
定时调用
var timer = setInterval(function(){
...
}, 1000);
clearInterval(timer);
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(){
};
};
事件监听
1
2
|
obj.addEventListener(event, function , false ); // Chrome obj.attachEvent( 'on' + event, function ); // IE |
点击对象
1
2
3
|
$(document).click( function (e){ var ele = e.target || e.srcElement; }); |
鼠标相对容器坐标
obj.mousemove(function (e){
var off = obj.offset();
var x = e.pageX - off.left;
var y = e.pageY - off.top;
});
密码强度检测
var score = 0;
if(/\d/.test(v)) score ++;
if(/[a-z]/.test(v) || /[A-Z]/.test(v)) score ++;
if(/\W/.test(v)) score ++;
当前时间
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();
本地存储
localStorage.length;
localStorage.key(eq);
localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.clear(); localStorage.setItem(key, JSON.stringify(value));
JSON.parse(localStorage.getItem(key));
地理定位
navigator.geolocation.getCurrentPosition(function(rt){
rt.coords.latitude; // 以十进制数表示的纬度
rt.coords.longitude; // 以十进制数表示的经度
rt.coords.altitude; // 以十进制数表示的高度
rt.coords.accuracy; // 以米为单位表示的经纬度坐标的精准度
rt.coords.altitudeAccuracy; // 以米为单位表示的高度坐标的精确度
rt.coords.heading; // 以相对正北做顺时针旋转的角度指定设备当前运动方向
rt.coords.speed; // 以秒/米为单位表示的设备当前地面速度
});
var watch = navigator.geolocation.watchPosition(function(){
navigator.geolocation.clearWatch(watch);
});
web前端开发随手笔记 - 持续更新的更多相关文章
- web前端开发浏览器兼容性 - 持续更新
浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果 首先我们来看一下目前市面上常见的一 ...
- Web前端开发学习笔记(一)
最近在复习Web前端的开发知识,于是就把大二上学期曾经学过的东西拿出来复习一遍,把自己在做曾经的作业时遇到有意义的点都记下来吧. Homework1:http://my.ss.sysu.edu.cn/ ...
- Web前端开发学习笔记(二)
Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: ...
- webpack4搭建Vue开发环境笔记~~持续更新
项目git地址 一.node知识 __dirname: 获取当前文件所在路径,等同于path.dirname(__filename) console.log(__dirname); // Prints ...
- web前端开发笔记(1)
一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必 ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- 《编写高质量代码--Web前端开发修炼之道》读书笔记
前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...
- web前端开发笔记(2)
一.什么是作用域. 所有变量都存在于一个执行环境中(也称作用域),这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量.总结: 执行环境有全局执行环境和函数执行环境. 每次进入一个新执 ...
- web前端开发最佳实践笔记
一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...
随机推荐
- [BZOJ 1218] [HNOI2003] 激光炸弹 【n logn 做法 - 扫描线 + 线段树】
题目链接:BZOJ - 1218 题目分析 可以覆盖一个边长为 R 的正方形,但是不能包括边界,所以等价于一个边长为 R - 1 的正方形. 坐标范围 <= 5000 ,直接 n^2 的二维前缀 ...
- Java学习IO篇
来吧,同志们,为复习网络编程做准备-- 一.理论准备 流是个抽象的概念,是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以"流" ...
- HTTP-304 NOT Modified
http://www.douban.com/note/161120791/ http://blog.sina.com.cn/s/blog_4c98b9600100jd4z.html http://ww ...
- Spring MVC 解读——@RequestMapping (2)(转)
转自:http://my.oschina.net/HeliosFly/blog/214438 Spring MVC 解读——@RequestMapping 上一篇文章中我们了解了Spring如何处理@ ...
- 《Apache Spark源码剖析》
Spark Contributor,Databricks工程师连城,华为大数据平台开发部部长陈亮,网易杭州研究院副院长汪源,TalkingData首席数据科学家张夏天联袂力荐1.本书全面.系统地介绍了 ...
- MYSQL仅仅向某个字段进行插入
例子: mysql> show create table student \G . row *************************** Table: student Create T ...
- 关于java、Android中Math的一些用法
java.math.Math类常用的常量和方法: Math.PI 记录的圆周率Math.E记录e的常量Math.abs 求绝对值Math.sin 正弦函数 Math.asin 反正弦函数Math.co ...
- Win10开发必备:Visual Studio 2015正式版下载
7月21日凌晨消息,面向大众用户的Visual Studio 2015集成开发工具正式版免费试用版已经推出.本文帮大家汇总一下简体中文社区版.专业版以及企业版在线安装版以及ISO离线安装镜像下载地址. ...
- [转载]typedef常见用法
注:本文系转载,并修改了一些错误. typedef常见用法 1.常规变量类型定义 例如:typedef unsigned char uchar描述:uchar等价于unsigned char类型定义 ...
- 通过UIImagePickerController完成照相和相片的选取
UIImagePickerController是用于选取现有照片,或者用照相机现场照一张相片使用的 定义: @interface ShowViewController : UIViewControll ...