一些非常有用的html,css,javascript代码片段(持久更新)

1.判断设备是否联网

if (navigator.onLine) {

    //some code

}else{

    //others code

}

2.获取url的指定参数

 function getString(parameter) {

        var url = window.location.href;//获取url

        var model = "([?&])" + parameter + "=([^&]*)";//定义了这样一个模式

        var oModel = new RegExp(model);//把这个模式定义成一个对象

        if (oModel.test(url)) {//用test方法测试这个对象看是true还是false；

                return RegExp["$2"]; //$2为RegExp对象的一个属性 与正则表达式匹配的第二个子匹配;

               }

              else {

                  return null;

             }

         }

//调用上面的代码

//若一个url如下

url="http://www.leinov.com/blog?id=20&type=1";

var Id=getString(id);

var Type=getString(type);

alert(Id); //

alert(Type); //

3.阻止点击事件执行两次

(这是在用iScroll时候遇到的问题可能iScroll本身的原因点击某个元素调用函数了两次，阻止的原理就是让他在一定时间间隔内不要再执行)

var timeTag = null; //设置一个全局的时间点

function oneTime() {

    if (timeTag == null) {

        timeTag = new Date().getTime(); //获取当前时间

    } else {

        var timeTag2 = new Date().getTime();

        if (timeTag2 - timeTag < 1000) {

            timeTag = timeTag2;

            return;

        } else {

            timeTag = timeTag2;

        }

    }

    //你需要执行的代码

}

4.手机横竖屏监听

function changeDirection() {

        if (window.orientation == 180 || window.orientation == 0) {

        //do something or chage the style

        }

        if (window.orientation == 90 || window.orientation == -90) {

        //do something or chage the style

        }

    }

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", changeDirection, false);//监听这个事件

5.获取window对象的所有属性

var count=0;//技术器

for(var property in window){

    document.write(property);

    document.write('<br/>');

    count++;

}

alert(count);

6.使用getComputedStyle方法获取元素样式

一般情况下我我们要获取一个元素的样式（宽，高等），都是要先设置元素的样式，但getComputedStyle你可以不用设置也可以获取，他会计算元素的样式并返回

<html>

<script>

window.onload=function(){

    getComStyle("pic","width");

}

function getComStyle(id, style) {

    var node = document.getElementById(id);

    var theStyle;

    if (window.getComputedStyle) { //如果window有getComputedStyle这个属性

        var styleObj = window.getComputedStyle(node, null); //第二个参数是获取伪元素的样式 设置null就是不获取 styleObj是一个包含各种样式属性的对象

        theStyle = styleObj.getPropertyValue(style); //getPropertyValue获取元素css指定的属性值

    } else { //ie

        theStyle = node.currentStyle;

    }

    return theStyle;

}
</script>

<body>

    <div id="pic"></div>

</body>

</html>

7.div水平垂直居中页面显示

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div网页居中显示</title>

    <style>

      *{ margin:0; padding: 0;}

      .center{position: absolute;  width: 300px; height: 200px; margin-left: -150px; margin-top: -100px; left: 50%; top:50%; background: #4DAE8B}

    </style>

</head>

<body>

    <div class="center"></div>

</body>

</html>

8.ios在页面里打开app

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>

    <title>在网页里打开app</title>

</head>

<body>

    <!--在网页里点击下面的链接 如果手机上装有这些app可以直接打开-->

    <h1>在网页中打开app</h1>

    <h2><a id="openapp1" href="weixin:">打开微信</a></h2>

    <h2><a id="openapp2" href="baidumusic:">打开百度音乐</a></h2>

    <h2><a id="openapp3" href="changba:">打开唱吧</a></h2>

    <h2><a id="openapp4" href="xiami:">打开虾米</a></h2>

    <h2><a id="openapp5" href="duomi:">打开多米</a></h2>

    <h2><a id="openapp6" href="qqmusic:">打开qq音乐</a></h2>

    <h2><a id="openapp7" href="weibo:">打开微博</a></h2>

</body>

</html>

9.理解 !function(){}()

//2014-9-5
// 匿名函数立即执行

(function() {

    console.log(0);

})();

//这种写法大家应该很熟悉但有时候也会遇到下面这种写法

! function() {

    console.log(0);

}();

//这是什么意思呢 其实效果跟上面一样 也是立即执行一个匿名函数

//！的目的是告诉解释器它后面是个表达式

//前面也可以是+，—,~

(function() {})() == ! function() {}();

10.久违的table

//2014-9-25
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

</head>

<body>

 <table border=1 >

   <tr>

     <td >11</td>

     <td >12</td>

     <td rowspan=3>竖3</td>

   </tr>

   <tr>

     <td>21</td>

     <td >22</td>

   </tr>

   <tr>

     <td >31</td>

     <td >32</td>

   </tr>

   <tr>

     <td >41</td>

     <td colSpan=2>横2</td>

   </tr>

    <tr>

     <td >51</td>

     <td colSpan=2>横2</td>

   </tr>

  </table>

</body>

</html>

11.fixed居中固定

//2014-11-1

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>

    <title>fixed居中显示</title>

    <style>

    *{margin:0; padding: 0;}

   div{max-width:980px; height:70px; position:fixed; margin:0 auto; left:0; right:0; background: #454648;}

    section{ height: 2000px;}

    </style>

</head>

<body>

    <div></div>

    <section></section>

</body>

</html>

12 浏览器支持css属性检测

var div=document.createElement("div");

    for(prototype in div.style){

        document.write(prototype+"<br>");

    }

13阻止默认事件

<a class="a" href="http://www.leinov.com">leinov</a>

<script>

        var a=document.querySelector("a");

        a.onclick=function(event){

            event.preventDefault();

        }

</script>

14 clientY,pageY

$(document).mousedown(function(e){

            console.log("clientY:"+e.clientY+" 和 pageY:"+e.pageY);

  })

  //clientX,clentY 是相对于window而言的 浏览器的窗口有多大 他们的最大值就有多大 pageX,pageY是相对于文档的 文档有多宽多高 最大值就有多大

15 图片水平垂直居中

//2014-12-1

img {display:block}

.wrap {display:-webkit-box; -webkit-box-align:center; -webkit-box-pack:center;}

16 判断数据类型

//2014-12-16

<script>

        var a=[];

        var theType=Object.prototype.toString.call(a);

        alert(theType); // [object Array]

</script>

17 只支持移动设备检测

var device=('ontouchstart' in window)|| window.DocumentTouch && document instanceof DocumentTouch;
//在pc上返回undefined 在移动设备返回true

18 强制换行和禁止换行

//强制换行

word-break: break-all //按字母换行

word-break: break-word //按单词换行

  //上面两种只适用于英文

word-breaK: pre-wrap //按中文换行

//禁止换行

white-space:nowrap

//单行多余内容用省略号表示

display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

//多行多余内容用省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

19 行内元素垂直对其方式

vertical-align 属性设置元素的垂直对齐方式。

可能的值

值    描述

baseline    默认。元素放置在父元素的基线上。

sub    垂直对齐文本的下标。

super    垂直对齐文本的上标

top    把元素的顶端与行中最高元素的顶端对齐

text-top    把元素的顶端与父元素字体的顶端对齐

middle    把此元素放置在父元素的中部。

bottom    把元素的顶端与行中最低的元素的顶端对齐。

text-bottom    把元素的底端与父元素字体的底端对齐。

length

%    使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit    规定应该从父元素继承 vertical-align 属性的值。

20.删除数据某一项

//删除数组某一项 2015-4-22

     Array.prototype.removeByValue = function(val) {

      for(var i=; i<this.length; i++) {

        if(this[i] == val) {

          this.splice(i, );

          break;

        }

      }

    }

//调用

var arr=["a","b","c"];

arr.removeByValue("a");

21.文本居中显示

<style >

.centrol{

  height: 300px;

  /*display flex方式*/

  display: -webkit-flex;

  display:flex;

  -webkit-align-items: center;

  align-items: center;

  -webkit-justify-content: center;

  justify-content: center;

  /*display box方式*/

  display:box;

  display:-webkit-box;

  display:-moz-box;

  -webkit-box-pack:center;

  -moz-box-pack:center;

  -webkit-box-align:center;

  -moz-box-align:center;

}

 </style>

<div class="centrol">看我居中显示耶</div>

22.伸缩盒

ul{ width: 100%;

   display:box;

   display:-webkit-box;

   display:-moz-box;

   display: -webkit-flex;

   display:flex;

}

ul li{

  -webkit-flex:1;

  flex:1;

  -webkit-box-flex:1;

   box-flex:1;

}

23.css3媒体查询设备

iphone5：

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){

}

24.移动端模拟hover

15-8-3

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">

        <script type="text/javascript" src="../../statics/js/zepto.js"></script>

          <style type="text/css">

          *{ margin: 0; padding: 0;}

         html,body{

           -webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0);

         }

          .hover{ width: 90%;margin: auto; height: 300px; background: #ff6666; -webkit-transition:all 0.1s;}

          .hover.touch{ background: #e4e4e4;  }

      </style>

     </head>

    <body>

         <div class='hover'></div>

         <script type="text/javascript">

         var hover = $(".hover");

         hover[0].addEventListener('touchstart',function(){ $(this).addClass('touch');},false);

         hover[0].addEventListener('touchend',function(){ $(this).removeClass('touch');},false);

        </script>

    </body>

</html>

25,三列一换行输出

for(i=0;i<;i++){

var ul ="";

if(i%3==0) {

    ul = "<ul>";

}

ul+="<li>"+(i+1)+"</li>";

if((i+1)%3==0) ul+="</ul>";

console.log(ul);

}

26,一维数组,二维数组求和

function sumMatrix1(matrix: number[]){

    let sum = 0;

    for(let i=0;i<matrix.length;i++){

        sum +=matrix[i];

    }

    return sum;

}

var sum1 = sumMatrix1([3,4,5,34,3,2,11]);

console.log(sum1);

function sumMatrix2(matrix: number[][]) {

    let sum = 0;

    for (let i = 0; i < matrix.length; i++) {

        var currentRow = matrix[i];

        for (let i = 0; i < currentRow.length; i++) {

            sum += currentRow[i];

        }

    }

    return sum;

}

var sum2 = sumMatrix2(arr)

console.log(sum2);

27字符串截取

"北京市".charAt("北京市".length-1); //市

"北京市".slice(0,"北京市".length-1); //北京