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前端开 ...
随机推荐
- 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 ...
- UIWebView 自定义网页中的alert和confirm提示框风格
.h #import <UIKit/UIKit.h> @interface UIWebView (JavaScriptAlert) -(void)webView:(UIWebView *) ...
- importExcel运用注解实现EXCEL导入poi类
JAVA报表 package com.app.common.excel; import java.io.File; import java.io.FileInputStream; import jav ...
- ibatis把表名作为一个参数报错问题的解决方案
用ibatis的时候,想把表名也作为一个参数传进去,可是报错了,在ibatis配置文件里面是#resource#的方式,报错信息如下: org.apache.cxf.interceptor.Fault ...
- 在多台服务器上简单实现Redis的数据主从复制
Redis的主从复制功能非常强大,一个master可以拥有多个slave,而一个slave又可以拥有多个slave,如此下去,形成了强大的多级服务器集群架构.下面我演示下怎样在多台服务器上 ...
- Unity3d 基于物理渲染Physically-Based Rendering之最终篇
前情提要: 讲求基本算法 Unity3d 基于物理渲染Physically-Based Rendering之specular BRDF plus篇 Unity3d 基于物理渲染Physically-B ...
- Windows玩转Docker(二):运行whalesay image
docker官网site:http://www.docker.com/ 参照site:https://docs.docker.com/windows/step_three/ docker安装参照: h ...
- JavaScript高级程序设计19.pdf
注册处理程序 navigator.registerContentHandler("applicat/rss+xml","http://www.somereader.com ...
- 实现自己的脚本语言ngscript之三:语法设计
这是第四篇了,之所以隔了这么久才写,一方面是因为最近开始实习了,另一方面是因为设计语法真是要考虑很多东西. 于是我去读了这本书,里面实现了两种语言,一种跟js差不多语法,用ast解释执行:另一种语法类 ...
- 10个经典的 Java main 方法面试题
以下是笔者认为比较经典的关于Java main方法的面试题,与其说是Java面试题,其实也是Java的一些最基础知识问题,分享给大家,如有错误,请指出. 1.不用main方法如何定义一个类? 不行,没 ...