Web front-end development handy notes-continuous updates

This article is only for personal use code collation, for their daily review

HTML Browser kernel

<!--[If ie]><! [endif]--><!--[If IE 6]><! [endif]--><!--[If GTE IE 7]><! [endif]--><!--[If LTE IE 7]><! [endif]--><!--[if! ie]><! [endif]--><!--[if! ( LTE IE 7)]><!-->

Phone message Mail

<a href= "tel:10086" > Tel: 10086</a><a href= "sms:10086" > SMS: 10086</a><a href= "weixin:// addfriend/l670529375 ">:l670529375</a><a href=" Mailto:[email protected] "> E-mail: [Email protected]< /a>

Turn off auto-complete form input

<input autocomplete= "Off" type= "text"/>

Csschrome scroll bar

::-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;}

Clear float

. Clearfix:after{height:0;display:block;content: "."; Visibility:hidden;clear:both;}. Clearfix{zoom:1;}. Clear{height:0;overflow:hidden;font-size:0;clear:both;}

Fixed font size

Div{-webkit-text-size-adjust:none;text-size-adjust:none;}

Suspension positioning

Div{position:fixed;_position:absolute;top:100px;_top:expression (documentelement.scrolltop + + + "px"); left:50px;}

Maximum minimum width height

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": "");}

Background Transparency Chart

Div{background:url (.. /images/logo.png) no-repeat 50%;_background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader (src= ".. /images/logo.png ");}

Background gradient

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);}

Gray Scale

Div{-webkit-filter:grayscale (100%);-moz-filter:grayscale (100%); Filter:grayscale (100%); filter:gray;}

Transparency

Div{-webkit-opacity:0.5;-moz-opacity:0.5;filter:alpha (opacity=50); opacity:0.5;}

Shadow

div{-webkit-box-shadow:0 1px 0 #ccc;-moz-box-shadow:0 1px 0 #ccc; box-shadow:0 1px 0 #ccc;}

Animation rotation

Div{-webkit-transform:rotate (180deg);-moz-transform:rotate (180deg); transform:rotate (180deg);}

Animation Flip

Div{-webkit-transform:scale ( -1, 1);-moz-transform:scale ( -1, 1); Transform:scale (-1, 1);}

Animation displacement

Div{-webkit-transform:translate (50px,0);-moz-transform:translate (50px,0); transform:translate (50px,0);}

Duration of animation

Div{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}

Box model border

Div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

Horizontal Vertical center of picture

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;}

Triangle

div{width:0;height:0;border-bottom:10px solid #ccc; border-left:10px dotted transparent;border-right:10px dotted Transparent;}

English character wrapping

Div{word-break:break-all;word-wrap:break-word;}

Text characters do not break line

Div{white-space:nowrap;}

Text characters beyond Hidden

Div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

Pseudo class Selector

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 determines phone-side type

if (/android/i.test (navigator.useragent)) {    ...}; if (/ipad|iphone|mac/i.test (navigator.useragent)) {    ...};

Judging mobile users

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 | | isIp Honeos | | ISMIDP | | IsUc7 | | Isuc | | isandroid | | Isce | | ISWM) {    location.href = ';};

When the window is ready to start

$ (document). Ready (function () {    ...});

When the window scrolls

Window.onscroll = function () {    ...};

Window changes Large hours

Window.onresize = function () {    ...};

When the window finishes loading

Window.onload = function () {    ...};

New Window Control

window.open (', ' _blank ', ' width=200,height=200,top=200,left=200 ');

Timed call

var timer = setinterval (function () {    ...}, 1000);
Clearinterval (timer); SetTimeout (function () {    ...}, 1000);

Picture Loading status

var img = new Image (); img.src = "; if (Img.complete) {};
Img.onload = function () {};

JS file load Status

var js = document.createelement (' script '), js.src = ';d ocument.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 () {    };};

Event Monitoring

12	obj.addEventListener(event, function, false); // Chromeobj.attachEvent(‘on‘+ event, function); // IE

Click Object

123	$(document).click(function(e){    varele = e.target || e.srcElement;});

Mouse relative container coordinates

Obj.mousemove (function (e) {    var off = Obj.offset ();    var x   = E.pagex-off.left;    var y   = e.pagey-off.top;});

Password Strength detection

var score = 0;if (/\d/.test (v)) score ++;if (/[a-z]/.test (v) | |/[a-z]/.test (v)) score ++;if (/\w/.test (v)) score + +;

Current time

var date = new Date ();d ate.gettime ();d ate.settime ();
Date.getfullyear ();d ate.getmonth ();d ate.getdate ();d ate.gethours ();d ate.getminutes ();d ate.getseconds ();

Creating elements

var img           = document.createelement (' img '); img.src           = '; Img.width         = 100px;img.height        = 30px; Img.style.display = ' block ';d ocument.body.appendChild (IMG);

Historical records

History.back ();
Document.referrer;

UserAgent

Navigator.useragent;

Cross-domain

document.domain = ' www ';

Parent window functions

Window.parent.fn ();

Local storage

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));

Geo-positioning

Navigator.geolocation.getCurrentPosition (function (RT) {    rt.coords.latitude;//latitude    in decimal notation Rt.coords.longitude; Longitude Rt.coords.altitude in decimal number    ;//height rt.coords.accuracy in decimal number    ;//accuracy    of latitude and longitude coordinates expressed in meters Rt.coords.altitudeAccuracy; The accuracy of the height coordinate expressed in meters is    rt.coords.heading;//A clockwise rotation angle relative to the north specifies the current direction of movement of the device    rt.coords.speed;//The current ground speed of the device in seconds per meter}) var watch = navigator.geolocation.watchPosition (function () {    navigator.geolocation.clearWatch (watch);});

Web front-end development handy notes-continuous updates