今天把做专题常用的js代码总结出来（持续更新），方便以后直接复制使用，不用老敲啊敲
1、屏幕适配JS代码
| 1 2 3 |
<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、简单选择器
| 1 2 3 |
function $(selector){
return document.querySelector(selector);
}
|
3、添加class
| 1 2 3 4 5 6 7 |
function addClass(obj,claName){
var reg = new RegExp("(^|\\s+)"+claName+"($|\\s+)");
if(!obj.className.match(reg)){
obj.className+=" "+claName;
}
return obj;
}
|
4、删除class
| 1 2 3 4 5 6 |
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）
| 1 2 3 4 5 |
function loadJs(url){
var script = document.createElement("script");
document.getElementsByTagName("head")[0].appendChild(script);
script.src=url;
}
|
6、ajax
| 1 2 3 4 5 6 7 8 9 10 11 12 |
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、微信检测
| 1 2 3 |
if((window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger')){
//微信
}
|
8、QQ检测
| 1 2 3 |
if(window.navigator.userAgent.match(/QQ\//i)){
//qq
}
|
9、判断网友表单中添的信息是不是数字
| 1 2 3 4 5 6 7 |
//判断手机号码是不是数字
var tel=$("#tel").val()*1;
if(tel){
alert("是数字")
}else{
alert("不是数字");
}
|
10、背景音乐
详细用法查看这里：http://www.cnblogs.com/gg1234/p/5603474.html
| 1 2 3 4 |
<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、数组去重
| 1 2 3 4 5 6 7 8 9 10 |
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选择器
| 1 2 3 4 5 6 7 8 9 |
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代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
#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代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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浏览器版本
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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;
}
|