js

function bubbleSort3(arr3) {
var low = 0;
var high= arr.length-1; //设置变量的初始值
var tmp,j;
console.time('2.改进后冒泡排序耗时');
while (low < high) {
for (j= low; j< high; ++j) //正向冒泡,找到最大者
if (arr[j]> arr[j+1]) {
tmp = arr[j]; arr[j]=arr[j+1];arr[j+1]=tmp;
}
--high; //修改high值, 前移一位
for (j=high; j>low; --j) //反向冒泡,找到最小者
if (arr[j]<arr[j-1]) {
tmp = arr[j]; arr[j]=arr[j-1];arr[j-1]=tmp;
}
++low; //修改low值,后移一位
}
console.timeEnd('2.改进后冒泡排序耗时');
return arr3;
}
var arr=[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
console.log(bubbleSort3(arr));
1,stopPropagation=function(event){
var e = event || window.event;
if (e && e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
2,preventDefault=function(event){
var e = event || window.event;
if (e && e.preventDefault) e.preventDefault();
else returnValue = false;
}
3,toFixed=function(num, s) {
var times = Math.pow(10, s)
var des = num * times + 0.5;
des = parseInt(des, 10) / times;
return des + ''
}
js:console.log(toFixed(21.414,3));
4, addHandler=function (element, type, handler) {
if(element.addEventListener) {
element.addEventListener(type, handler, false);
}else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}else{element["on" + type] = handler;}
}
html:<div id="test">test</div>
js:var e=document.getElementById("test");
addHandler(e,click,function(){
alert("OK");
})
5,var points=[2,1,3];
points.sort(function(a, b){return a-b});
console.log(points);
6,orderby=function(name){
return function(o, p){ var a, b;
if (typeof o === "object" && typeof p === "object" && o && p) {
a = o[name];b = p[name];
if (a === b) {
return 0;
} if (typeof a === typeof b) {
return a < b ? -1 : 1;
}return typeof a < typeof b ? -1 : 1; } else { throw ("error"); }} }
js:var list=[{"name":"a"},{"name":"z"},{"name":"cs"}];
list.sort(orderby("name"));
6,orderby=function(name,minor){
return function(o,p){
var a,b;
if(o && p && typeof o === 'object' && typeof p ==='object'){
a = o[name];
b = p[name];
if(a === b){
return typeof minor === 'function' ? minor(o,p):0;
}
if(typeof a === typeof b){
return a < b ? -1:1;
}
return typeof a < typeof b ? -1 : 1;
}else{
thro("error");
}
}
}
js:var list=[{"name":"a2","age":3},{"name":"a1","age":2},{"name":"b","age":1}];
list.sort(orderby("name",orderby("age")));
console.log(list);
7,getRect=function(element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{top : rect.top - top,bottom : rect.bottom - top,left : rect.left - left, right : rect.right - left }
}
html:<div id="test" style="background:red;50%">test<div>
js:console.log(getRect(document.getElementById("test")));
8,visibleY=function(el){
var top = el.getBoundingClientRect().top, rect, el = el.parentNode;

do {
rect = el.getBoundingClientRect();
if (top <= rect.bottom === false)
return false;
el = el.parentNode;
} while (el != document.body);
return top <= document.documentElement.clientHeight;
}
html:<div>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/><div id="test">show<div></div>
js:console.log(visibleY(document.getElementById("test")));
9,replace=function(input,regExp){
var reg = new RegExp(regExp, "g");
if (!!input) {return input.replace(reg, ""); } else {
return "";
}}
js:console.log(replace("abbcb","b")); //ac
A, getRegExp=function(input,r){
var reg = new RegExp('\[(.*)+\]', "g");
if(r)reg = new RegExp('\[(.*?)\]', "g");//最小模式
reg.exec(input);
return RegExp.$1;
}
console.log(getRegExp("test[1dd1][33][xxdsfsfxx]"));
B,uniqueArray=function(array,id){
var r = [];
for(var i = 0, l = array.length; i < l; i++) {
for(var j = i + 1; j < l; j++)
if(!id){if (array[i] === array[j]) j = ++i;}
else{if (array[i][id] === array[j][id]) j = ++i; }
r.push(array[i]);
}
return r;
}

var list=[1,1,2,3,4,5];
console.log(uniqueArray(list));
var list=[{id:"2"},{id:"2"},{id:"2ee"},{id:"3"}];
console.log(uniqueArray(list,"id"));
C,toggleFullScreen=function () {
if (!document.fullscreenElement &&
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {if (document.exitFullscreen) { document.exitFullscreen();
} else if (document.msExitFullscreen) {document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { document.webkitExitFullscreen();
}}}

HTML:<div onclick="toggleFullScreen()">test</div>
D,flip3D
<!DOCTYPE html>
<html>
<head>
<style>
.flip3D{ 240px; height:200px; margin:10px; float:left; }
.flip3D > .front{
position:absolute;
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; 240px; height:100%; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.flip3D > .back{
position:absolute;
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; 240px; height:100%; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
transform: perspective( 600px ) rotateY( 0deg );
}
</style>
</head>
<body>
<div class="flip3D">
<div class="back">Box 1 - Back</div>
<div class="front">Box 1 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 2 - Back</div>
<div class="front">Box 2 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 3 - Back</div>
<div class="front">Box 3 - Front</div>
</div>
</body>
</html>
E,Flip auth Height
<!DOCTYPE html>
<html>
<head>
<style>
.flipcard {
perspective: 800;
-moz-perspective: 800;
-webkit-perspective: 800;
margin: 1em auto;
96%;
border: solid 1em white;
border-radius: 0.5em;
font-family: Georgia;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
cursor: pointer;
box-shadow: 0 0 5px black;
}
.flipcard:hover {
box-shadow: 0 0 1em black;
}
.flipcard.flipped {
transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-webkit-transform: rotatey(-180deg);
}
.flipcard .face {
padding: 1em;
text-align: center;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.flipcard .front {
background: #220000;
color: white;
display: block;
}
.flipcard.flipped .front {
display:none;
}
.flipcard .back {
background: #66eeff;
color: black;
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
display:none;
}
.flipcard.flipped .back {
display:block;
}
</style>
</head>
<body>
<div class="flipcard" onclick="test(this)">
<div class="face front">Front<br/>FrontFront</div>
<div class="face back">
back
</div>
</div>
<script>
function test(o){
o.classList.toggle('flipped')

}
</script>
</body>
</html>
D,justify-content:flex-start;| flex-end | center | space-between | space-around; 对齐方式
align-items: flex-start; | flex-end | center | baseline | stretch;//高度不一致时对齐方式
align-content: flex-start; | flex-end | center | space-between | space-around | stretch;多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

align-self:auto | flex-start | flex-end | center | baseline | stretch;可覆盖align-items
D,Flex flex:1 1 50px; flex-grow flex-shrink[缩小] flex-basis;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
body {margin:0px}
body > div {display:flex;flex-flow:row wrap;min-800px}
body > div > header,nav,main,aside,footer{ background:red;border-radius:7px;margin:6px;padding:20px;}
body > div > header{order:1;height:100px;flex:0 1 100%}
body > div > nav{order:2;flex:0 1 200px}
body > div > main{order:3;min-height:400px;flex:1}
body > div > aside{order:4;flex:0 1 200px}
body > div > footer{order:5;height:100px;flex:0 1 100%}
</style>

<title>Document</title>
</head>

<body>
<div>
<header>Header</header>
<nav>nav</nav>
<main>main</main>
<aside>aside</aside>
<footer>footer</footer>
</div>
</body>
</html>
E:vertical-align

<style>
div span{
vertical-align:middle;
}
.f35px{
font-size:135px;
}
</style>
<div style="100%;height:100px">
<span class="f35px">1111</span>
<span>22222</span>
<span style="vertical-align:top">333</span>
</div>
F:CSS
<div class="test">
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.
</div>
<style>
.test{
margin:50px;font-size:25px; line-height:2;background-image:linear-gradient(black 1px,transparent 1px);
background-size:100% 50px;background-origin:centent-box;background-position:0 45px;
}
</style>
G:CSS
<div class="smile">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
/>
</div>
<style>
@keyframes test{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@keyframes test1{
from{transform:rotate(360deg);}
to{transform:rotate(0deg);}
}

.smile{
animation:test 6s linear infinite;
transform-origin:30% 330px;
}
.smile > img{
animation:test1 6s linear infinite;

}</style>

==================
@keyframes wave{
from{background-position:0 0;}
to{background-position:-500px 0;}
}
.test{50px;height:70px;background:url('xxx') 0 0;
animation:wave 2s infinite setps(10);
}
===========================
var peopleFactory=function(name,age,state){
var temp={};
temp.name=name;
temp.age=age;
temp.state=state;
temp.print=function(){
console.log(this.name+','+this.age+','+this.state);
}
return temp;
}
var person1=peopleFactory('name','80','china');
person1.print();
========================================
var peopleConstructor=function(name,age,state){

this.name=name;
this.age=age;
this.state=state;
this.print=function(){
console.log(this.name+','+this.age+','+this.state);
}

}
var person1=new peopleConstructor('name','100','Ny');
person1.print();
====================================================================
var peopleProto=function(){}
peopleProto.prototype.name="";
peopleProto.prototype.age="";
peopleProto.prototype.state="";

peopleProto.prototype.print=function(){
console.log(this.name+','+this.age+','+this.state);
}
var person1=new peopleProto();
person1.name="tddest";
person1.age="test";
person1.state="test";
person1.print();