书签分享收藏举报版权申诉 / 17

立即下载加入VIP,免费下载

当前位置：首页 > 表格模板 > 一些非常有用的htmlcssjavascript代码片段.docx

一些非常有用的htmlcssjavascript代码片段.docx

文档编号：18506070
上传时间：2023-08-18
格式：DOCX
页数：17
大小：19.28KB

《一些非常有用的htmlcssjavascript代码片段.docx》由会员分享，可在线阅读，更多相关《一些非常有用的htmlcssjavascript代码片段.docx（17页珍藏版）》请在冰点文库上搜索。

一些非常有用的htmlcssjavascript代码片段.docx

一些非常有用的htmlcssjavascript代码片段

一些非常有用的html,css,javascript代码片段

1.判断设备是否联网

if（navigator.onLine）{

//somecode

}else{

//otherscode

}

2.获取url的指定参数

复制代码

functiongetString（parameter）{

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

varmodel="（[?

&]）"+parameter+"=（[^&]*）";//定义了这样一个模式

varoModel=newRegExp（model）;//把这个模式定义成一个对象

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

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

}

else{

returnnull;

}

//调用上面的代码

//若一个url如下

url="

varId=getString（id）;

varType=getString（type）;

alert（Id）;//20

alert（Type）;//1

复制代码

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

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

复制代码

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

functiononeTime（）{

if（timeTag==null）{

timeTag=newDate（）.getTime（）;//获取当前时间

}else{

vartimeTag2=newDate（）.getTime（）;

if（timeTag2-timeTag<1000）{

timeTag=timeTag2;

return;

}else{

timeTag=timeTag2;

}

//你需要执行的代码

}

复制代码

4.手机横竖屏监听

复制代码

functionchangeDirection（）{

if（window.orientation==180||window.orientation==0）{

//dosomethingorchagethestyle

}

if（window.orientation==90||window.orientation==-90）{

//dosomethingorchagethestyle

}

window.addEventListener（"onorientationchange"inwindow?

"orientationchange":

"resize",changeDirection,false）;//监听这个事件

复制代码

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

复制代码

varcount=0;//技术器

for（varpropertyinwindow）{

document.write（property）;

document.write（'
'）;

count++;

}

alert（count）;

复制代码

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

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

复制代码

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

复制代码

doctypehtml>

div网页居中显示

复制代码

8.ios在页面里打开app

复制代码

doctypehtml>

在网页里打开app

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

在网页中打开app

">打开微信

">打开XX音乐

">打开唱吧

">打开虾米

">打开多米

">打开qq音乐

">打开微博

复制代码

9.理解!

function（）{}（）

复制代码

//2014-9-5

//匿名函数立即执行

（function（）{

console.log（0）;

}）（）;

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

!

function（）{

console.log（0）;

}（）;

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

//！

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

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

（function（）{}）（）==!

function（）{}（）;

复制代码

10.久违的table

复制代码

//2014-9-25

DOCTYPEhtml>

JSBin

11

12

竖3

21

22

31

32

41

横2

51

横2

复制代码

11.fixed居中固定

复制代码

//2014-11-1

doctypehtml>

fixed居中显示

复制代码

12浏览器支持css属性检测

vardiv=document.createElement（"div"）;

for（prototypeindiv.style）{

document.write（prototype+"
"）;

}

13阻止默认事件

复制代码

leinov

复制代码

14clientY,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

17只支持移动设备检测

vardevice=（'ontouchstart'inwindow）||window.DocumentTouch&&documentinstanceofDocumentTouch;

//在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（vari=0;i

if（this[i]==val）{

this.splice（i,1）;

break;

}

//调用

vararr=["a","b","c"];

arr.removeByValue（"a"）;

复制代码

21.文本居中显示

复制代码

看我居中显示耶

复制代码

22.伸缩盒

复制代码

ul{width:

100%;

display:

box;

display:

-webkit-box;

display:

-moz-box;

display:

-webkit-flex;

display:

flex;

}

ulli{

-webkit-flex:

1;

flex:

1;

-webkit-box-flex:

1;

box-flex:

1;

}

复制代码

23.css3媒体查询设备

iphone5：

@mediascreenand（device-width:

320px）and（device-height:

568px）and（-webkit-device-pixel-ratio:

2）{

}

24.移动端模拟hover

复制代码

15-8-3

*{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:

all0.1s;}

.hover.touch{background:

#e4e4e4;}

varhover=$（".hover"）;

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

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

复制代码

25,三列一换行输出

复制代码

for（i=0;i<20;i++）{

varul="";

if（i%3==0）{

ul="

}

ul+="

"+（i+1）+"

if（（i+1）%3==0）ul+="

";

console.log（ul）;

}

复制代码

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

复制代码

functionsumMatrix1（matrix:

number[]）{

letsum=0;

for（leti=0;i

sum+=matrix[i];

}

returnsum;

}

varsum1=sumMatrix1（[3,4,5,34,3,2,11]）;

console.log（sum1）;

functionsumMatrix2（matrix:

number[][]）{

letsum=0;

for（leti=0;i

varcurrentRow=matrix[i];

for（leti=0;i

sum+=currentRow[i];

}

returnsum;

}

varsum2=sumMatrix2（arr）

console.log（sum2）;

复制代码

27字符串截取

"北京市".charAt（"北京市".length-1）;//市

"北京市".slice（0,"北京市".length-1）;//北京

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 一些非常有用 htmlcssjavascript 代码片段

冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：一些非常有用的htmlcssjavascript代码片段.docx
链接地址：https://www.bingdoc.com/p-18506070.html

一些非常有用的htmlcssjavascript代码片段.docx

在网页中打开app

">打开微信

">打开XX音乐

">打开唱吧

">打开虾米

">打开多米

">打开qq音乐

">打开微博

热门标签