一些非常有用的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); //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); //北京
