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

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. In machine learning, is more data always better than better algorithms?

    In machine learning, is more data always better than better algorithms? No. There are times when mor ...

  2. UIWebView 自定义网页中的alert和confirm提示框风格

    .h #import <UIKit/UIKit.h> @interface UIWebView (JavaScriptAlert) -(void)webView:(UIWebView *) ...

  3. importExcel运用注解实现EXCEL导入poi类

    JAVA报表 package com.app.common.excel; import java.io.File; import java.io.FileInputStream; import jav ...

  4. ibatis把表名作为一个参数报错问题的解决方案

    用ibatis的时候,想把表名也作为一个参数传进去,可是报错了,在ibatis配置文件里面是#resource#的方式,报错信息如下: org.apache.cxf.interceptor.Fault ...

  5. 在多台服务器上简单实现Redis的数据主从复制

          Redis的主从复制功能非常强大,一个master可以拥有多个slave,而一个slave又可以拥有多个slave,如此下去,形成了强大的多级服务器集群架构.下面我演示下怎样在多台服务器上 ...

  6. Unity3d 基于物理渲染Physically-Based Rendering之最终篇

    前情提要: 讲求基本算法 Unity3d 基于物理渲染Physically-Based Rendering之specular BRDF plus篇 Unity3d 基于物理渲染Physically-B ...

  7. Windows玩转Docker(二):运行whalesay image

    docker官网site:http://www.docker.com/ 参照site:https://docs.docker.com/windows/step_three/ docker安装参照: h ...

  8. JavaScript高级程序设计19.pdf

    注册处理程序 navigator.registerContentHandler("applicat/rss+xml","http://www.somereader.com ...

  9. 实现自己的脚本语言ngscript之三:语法设计

    这是第四篇了,之所以隔了这么久才写,一方面是因为最近开始实习了,另一方面是因为设计语法真是要考虑很多东西. 于是我去读了这本书,里面实现了两种语言,一种跟js差不多语法,用ast解释执行:另一种语法类 ...

  10. 10个经典的 Java main 方法面试题

    以下是笔者认为比较经典的关于Java main方法的面试题,与其说是Java面试题,其实也是Java的一些最基础知识问题,分享给大家,如有错误,请指出. 1.不用main方法如何定义一个类? 不行,没 ...