h5专题常用小代码

转载

草长莺飞飞满天 2022-12-28 14:47:04 博主文章分类：JS

文章标签 html css Text 文章分类 运维

今天把做专题常用的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;       <br>}

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{<br>　　position:absolute;<br>　　top:0px;<br>　　left:0px;<br>　　width:100%;<br>　　height:100%;<br>}<br>.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;
}