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

2022-06-18 20:35:26

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); //20
alert(Type); //1

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=0; i<this.length; i++) {         
        if(this[i] == val) {             
          this.splice(i, 1);             
          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<20;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); //北京

码农公寓

相关文章