一些非常有用的htmlcssjavascript代码片段.docx
- 文档编号:30652588
- 上传时间:2023-08-18
- 格式:DOCX
- 页数:17
- 大小:19.28KB
一些非常有用的htmlcssjavascript代码片段.docx
《一些非常有用的htmlcssjavascript代码片段.docx》由会员分享,可在线阅读,更多相关《一些非常有用的htmlcssjavascript代码片段.docx(17页珍藏版)》请在冰豆网上搜索。
一些非常有用的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你可以不用设置也可以获取,他会计算元素的样式并返回
复制代码
window.onload=function(){
getComStyle("pic","width");
}
functiongetComStyle(id,style){
varnode=document.getElementById(id);
vartheStyle;
if(window.getComputedStyle){//如果window有getComputedStyle这个属性
varstyleObj=window.getComputedStyle(node,null);//第二个参数是获取伪元素的样式设置null就是不获取styleObj是一个包含各种样式属性的对象
theStyle=styleObj.getPropertyValue(style);//getPropertyValue获取元素css指定的属性值
}else{//ie
theStyle=node.currentStyle;
}
returntheStyle;
}
复制代码
7.div水平垂直居中页面显示
复制代码
doctypehtml>
*{margin:
0;padding:
0;}
.center{position:
absolute;width:
300px;height:
200px;margin-left:
-150px;margin-top:
-100px;left:
50%;top:
50%;background:
#4DAE8B}