h5专题常用小代码

今天把做专题常用的js代码总结出来(持续更新),方便以后直接复制使用,不用老敲啊敲

1、屏幕适配JS代码

<script>
var phoneScale = parseInt(window.screen.width)/640;document.write('<meta name=\'viewport\' content=\'width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', user-scalable=no\'>');var html=document.querySelector('html');var rem=html.offsetWidth/6.4;html.style.fontSize=rem+'px';
</script>

  

2、简单选择器

function $(selector){
  return document.querySelector(selector);
}

3、添加class

function addClass(obj,claName){
  var reg = new RegExp("(^|\\s+)"+claName+"($|\\s+)");
  if(!obj.className.match(reg)){
obj.className+=" "+claName;
  }
  return obj;
}

4、删除class

function removeClass(obj,claName){
  var reg = new RegExp("(^|\\s+)"+claName+"($|\\s+)");
  if(obj.className.match(reg)){
obj.className=obj.className.replace(reg,"");
  }
  return obj;
}

5、loadJS(jonp)

function loadJs(url){
  var script = document.createElement("script");
  document.getElementsByTagName("head")[0].appendChild(script);
  script.src=url;
}

6、ajax

function ajax(method,url,callback,data){
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
     callback&&callback(xhr.responseText)
    }
  }
  xhr.open(method,url);
  if(data){
    xhr.send(data);
  }
}

7、微信检测

if((window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger')){
  //微信
}

8、QQ检测

if(window.navigator.userAgent.match(/QQ\//i)){
  //qq
}

9、判断网友表单中添的信息是不是数字

//判断手机号码是不是数字
var tel=$("#tel").val()*1;
if(tel){
  alert("是数字")
}else{
  alert("不是数字");
}

10、背景音乐

详细用法查看这里:http://www.cnblogs.com/gg1234/p/5603474.html

<script src="http://www1.pconline.com.cn/zt/20160621/Gbgmusic_min.js"></script>
<script>
var bgMusic = new GbgMusic("http://www1.pconline.com.cn/zt/20160608/biyadi/bg.mp3");
</script>

11、数组去重

function clearArrRepeat(arr){
var result=[],hash={};
for(var i=0,ele;ele=arr[i];i++){
if(!hash[ele]){
result.push(ele);
hash[ele]=true;
}
}
return result;
}

 12、生成css选择器

function createCssTxt(){
var divArr=document.getElementsByTagName("div");
var cssText="";
for(var i=0;i<divArr.length;i++){
cssText+="."+divArr[i].className+"{\n\n}\n";
}
console.log(cssText);
}
createCssTxt();

 13、表单校验

 html代码

<iframe src="about:blank" frameborder="0" name="tarFrom" style="display:none"></iframe>
<form action="http://survey.pcauto.com.cn/auto/submit.jsp" method="post" onsubmit="return checkInfo()" target="tarFrom" accept-charset="gb2312" id="myForm">
  <div class="uNameW pFormW">
<input type="text" id="uName">
  </div>
  <div class="uTelW pFormW">
<input type="text" id="uTel">
  </div>
  <div class="uProW pFormW">
<select id="uPro">
  
</select>
  </div>
  <div class="uCityW pFormW">
<select id="uCity">
</select>
  </div>
  <div class="uLikeW pFormW">
<select id="uLike">
</select>
  </div>
  <div class="uDealerW pFormW">
<select id="uDealer">
</select>
  </div>
  <div class="uSubmit pFormW">
<input type="submit" value="提交" id="tj">
  </div>
  <input type="hidden" name="id" value="15122" />
</form>

  

 css代码

#myForm{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}
.uName{
top:0px;
}
.uTelW{
top:0px;
}
.uProW{
top:0px;
}
.uCityW{
top:0px;
}
.uLikeW{
top:0px;
}
.uDealerW{
top:0px;
}
.uSubmit{
top:0px;
}
#tj{
opacity: 0;
}
.p6 input,.p6 select{
width: 100%;
height: 100%;
font-size: 30px;
-webkit-appearance: none;
background:none;
border: 0;
outline: 0;
font-family: "微软雅黑";
text-indent: 5px;
}

 js代码

function checkInfo(){
var uName=$("#uName"),uTel=$("#uTel"),uPro=$("#uPro"),uCity=$("#uCity"),uDealer=$("#uDealer"),uLike=$("#uLike");
if(!(/[\u4e00-\u9fa5]/g.test(uName.val()))){
alert("姓名不能为空,切必须为中文");
return false;
}else if(!/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(uTel.val())){
alert("电话号码不能为空,且必须为11位数字");
return false;
}else if(!uPro.val()||uPro.val()=="请选择"){
alert("省不能为空");
return false;
}else if(!uCity.val()||uCity.val()=="请选择"){
alert("城市不能为空");
return false;
}else if(!uLike.val()||uLike.val()=="请选择"){
alert("意向车型不能为空");
return false;
}else if(!uDealer.val()||uDealer.val()=="请选择"){
alert("经销商不能为空");
return false;
}
alert("提交成功");
myPageSlider.next();
return true;
}

 14、获取ie浏览器版本

function IEVersion() {
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
} else if (navigator.appName == 'Netscape') {
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return rv;
}

  

上一篇:Sqlserver_视图


下一篇:洛谷P1465