本文仅为个人常用代码整理,供自己日常查阅

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, functionfalse); // 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前端开发随手笔记 - 持续更新的更多相关文章

  1. web前端开发浏览器兼容性 - 持续更新

    浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果 首先我们来看一下目前市面上常见的一 ...

  2. Web前端开发学习笔记(一)

    最近在复习Web前端的开发知识,于是就把大二上学期曾经学过的东西拿出来复习一遍,把自己在做曾经的作业时遇到有意义的点都记下来吧. Homework1:http://my.ss.sysu.edu.cn/ ...

  3. Web前端开发学习笔记(二)

    Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: ...

  4. webpack4搭建Vue开发环境笔记~~持续更新

    项目git地址 一.node知识 __dirname: 获取当前文件所在路径,等同于path.dirname(__filename) console.log(__dirname); // Prints ...

  5. web前端开发笔记(1)

     一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必 ...

  6. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  7. 《编写高质量代码--Web前端开发修炼之道》读书笔记

    前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...

  8. web前端开发笔记(2)

    一.什么是作用域. 所有变量都存在于一个执行环境中(也称作用域),这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量.总结: 执行环境有全局执行环境和函数执行环境. 每次进入一个新执 ...

  9. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

随机推荐

  1. Phonegap 3.0 获取当前地址位置

    新版本的cordova 3.0 中,使用官方的示例可直接获取当前手机的地理位置,前提是手机开启了gps,或可联网. 获取到的是经纬度坐标值等信息,可通过google api 实现通过经纬度获取当前地理 ...

  2. 深入了解一下PYTHON中关于SOCKETSERVER的模块-C

    同时处理多个客户端请求,并且为不同的CLIENT开不同的线程处理. 这个东东,就显然实用性稍强了一些.(FORK和THREAD方式均可,但各有应用) #!/usr/bin/env python fro ...

  3. [topcoder]UnsealTheSafe

    http://community.topcoder.com/stat?c=problem_statement&pm=4471&rd=10711 这题果然是道简单题,图+DP.拿道题便觉 ...

  4. bootstrap真是个好东西

    之前就知道有bootstrap这么个东东,但是因为本身不做web,也就没有仔细了解.这次一个项目合作方使用django和bootstrap做的,有机会接触了一些,感觉确实非常好! 今天下午利用一个下午 ...

  5. TimePicker,TimePickerDialog以及自定义timepicker(一)

    场景:在activity上点击,弹出一个dialog,然后点击dialog上的一个按钮,在弹出时间.以及自定义dialog 懒,要用到一个选择时间的需求,只要求小时和分钟,弹出式,第一时间想到了tim ...

  6. 子元素margin-top属性传递给父元素的问题 转!

    问题描述:一个父包含框包含一个子元素.给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化. html结构:<div class=&q ...

  7. the partition number

    有一个容量为n的背包,有1, 2, 3, ..., n这n种物品,每种物品可以无限使用,求装满的方案数. 法一: http://mathworld.wolfram.com/PartitionFunct ...

  8. U3D C# 实现AS3事件机制

    写了很多年的AS3,最近接触U3D感觉事件机制没AS3的爽.咬紧牙关一鼓作气 基于C# 的委托实现了一版.废话不多说上干货. EventDispatcher代码如下: using UnityEngin ...

  9. 用户浏览器关闭cookie处理方法

    方法一: function getSessionId(){ var c_name = "jsessionid"; // alert("cookie:"+docu ...

  10. Eclipse(Myeclipse)安装GoogleGWT

    1,下载gpe http://code.google.com/p/googleappengine/并安装. 2,下载gwt http://code.google.com/intl/zh-CN/webt ...