本文主要是介绍pc端web前端开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.判断浏览器
var navigatorName = "Microsoft Internet Explorer"; //判断是否是ie浏览器if (navigator.appName == navigatorName) {$(".buy-num").css("top", 2); //控制动态验证码的位置};var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;//判断是否是chrome浏览器if (isChrome) {$(".main-center .buy-box input").css("top",1);} `
2.css样式控制placeholder
::-webkit-input-placeholder {color: #999999;font-size: 14px;
}
:-moz-placeholder {/* Firefox 18- */color: #999999;font-size: 14px;
}
::-moz-placeholder {/* Firefox 19+ */color: #999999;font-size: 14px;
}
:-ms-input-placeholder {color:#999999;font-size: 14px;
}3.其他方法判断pc端是用什么浏览器打开
var explorer =navigator.userAgent ;
//ie
if (explorer.indexOf("MSIE") >= 0) {
alert("ie");
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
alert("Firefox");
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
alert("Chrome");
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
alert("Opera");
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
alert("Safari");
}
//Netscape
else if(explorer.indexOf("Netscape")>= 0) {
alert('Netscape');
} 4.要想让两个input标签在同一行并且对齐，最好用浮动方便控制，不然很难对齐
<div class="buy-box clear"><p class="fl p-num"><input name="investAmt" onkeyup="value=value.replace(/[^\d]/g,'')" type="text" placeholder="<%=product.limitAmt%>元起购" class="buy-num ws_num" maxlength="6"/></p><p class="fl p-button"><button class="buy-a">立即购买</button></p> </div>注释：其中fl代表我自己写的一个像左浮动的类，οnkeyup=”value=value.replace(/[^\d]/g,”)，这句话代表首先这是个正则式验证，用来验证输入值的规则；
当输入值的键盘抬起时触发这个事件。value表示此输入框的值，/\d/g为正则表达式，用来匹配所有非数字字符；
此句功能为：将输入值为非数字的字符替换为空；也就是这个只可以输入数字。
.main-center .buy-box{margin-top: 35px;width: 425px;
}
.main-center .buy-box .p-num{height: 52px;border: 1px solid #D1D1D1;border-right: 0px;line-height: 52px;width: 245px;}
.main-center .buy-box input{padding-left: 10px;display:block;font-size: 18px;height: 50px; /*input的高度一定要具体给出，即使父元素有高度，也要用具体数字表示，不可以用百分比*/line-height: 50px;width: 100%;font-family:"微软雅黑";outline: none;border:none;background: white;
}
.main-center .buy-num{color: #000000;
}.main-center .buy-box .p-button{height: 52px;border: 1px solid #f07263;line-height: 52px;width: 180px;text-align: center;background: #f07264;
}
.main-center .buy-a{display:block;width: 100%;height: 100%;outline: none;color: white;/*height:52px;*/background: #f07264;font-size: 16px;/*display: inline-block;width: 180px;*/border: none;font-family:"微软雅黑"; /*input或者是button标签会自带字体样式的，所以需要自己写一次*/
}
5.在静态页面时候多注意设计稿数字和自己多写几个数字之间的对比样式，看是否是一样的。写jquery时候要记得加分好，json数据记得最后一个不要添加道号。
6.
<span></span>
怎么写出一个三角形span {display: block;position: absolute;left: 50%;width: 0px;height: 0px;overflow: hidden;border: 8px solid transparent;border-top-color: #8cdb37;}
7.
[<a href="http://www.itrust.org.cn/home/index/itrust_certifi/wm/2336994467.html" target="_blank" title="企业信用评级证书
"><img src="/img/sale.png"></a>-](https://img-blog.csdn.net/20151202114118299)
当a标签添加title属性时候，鼠标滑过就会出现如上图所示的东西。在ie8下也可以显示，并且可以跟随鼠标在移动，还是不错的8.当缩小浏览器的窗口大小时候如果出现“背景色没有完全填充完”留有空白的，那么应该给body一个最小的宽度，比如：min-width：1280px。
9.
<div class="buy-box clear"><p class="fl p-num"><input name="investAmt" onkeyup="value=value.replace(/[^\d]/g,'')" type="text" placeholder="<%=product.limitAmt%>元起购" class="buy-num ws_num" maxlength="6"/></p><p class="fl p-button"><button class="buy-a">立即购买</button></p> </div>对起购金额进行控制，并且让placeholder在ie8下也可以显示，具体代码如下（本文所有的类和一些其他的语法都是来自自己项目，看不懂的可以忽略哦，但是jquery代码和样式都是应该看得懂得，正确的。小菜一枚，瞎整理的……）
对起购金额进行控制，并且让placeholder在ie8下也可以显示。
/*起购金额输入数字控制start*/var moneyTotal=parseInt($(".maxAmt").val());var remianAmt=parseInt($(".remianAmt").val());var litmitMoney=parseInt($(".limitAmt").val());var useMoney=0;if(remianAmt>moneyTotal){useMoney=moneyTotal;}else if(remianAmt<=moneyTotal) {useMoney=remianAmt;};$(".buy-a").click(function() {var reg = /^[0-9]*[1-9][0-9]*$/;var value = parseInt($(".buy-num").val());if(value>useMoney){$(".error-tip").html("最大购买金额"+useMoney+"元喔");}else if(value<litmitMoney){$(".error-tip").html("起购金额"+litmitMoney+"元喔");}else if (reg.test(value) && value%500==0) {$(".error-tip").html(" ");var form = $('form');form.attr("action", form.attr('data-url')+"&investAmt="+moneyTotal);} else if ($(".buy-num").val() != "") {$(".error-tip").html("请输入500的整数倍");}if ($(".buy-num").val().length == 0) {$(".error-tip").html("请输入购买金额");return false;}$(".buy-num").focus(function() {if ($(".buy-num").val().length == 0) {$(".error-tip").html("");}$(this).css("font-size", "18px");$(this).val("");})}) //判断浏览器是否支持placeholder属性supportPlaceholder='placeholder'in document.createElement('input');placeholder=function(input){var text=input.attr("placeholder"),defaultValue=input.defauleValue;if(!defaultValue){input.val(text).css("color","#999999").css("font-size","14px");}input.focus(function(){if(input.val()==text){$(this).val("").css("color","#000000").css("font-size","18px");};});input.blur(function(){if(input.val()==""){$(this).val(text).css("color","#999999").css("font-size","14px");}});input.keydown(function(){$(this).removeClass("phcolor");});};//当浏览器不支持placeholder属性时，调用plasceholder函数if(!supportPlaceholder){$("input").each(function(){text=$(this).attr("placeholder");if($(this).attr("type") =="text"){placeholder($(this));}});};这段代码只适用于type=text在ie8下面的提示。要让type=password有placeholder这个提示的话，ie8应该这么处理：例如：<form data-url="/login" action="javascript:;" method="post" id="loginForm"><ul><li><input type="text" class="text" placeholder="输入手机号" id="telephone" name="telephone" maxlength="11" value="<%=outString(telephone) %>"/></li><li id="wrpa_password">
<input type="password" class="text" id="pwd" name="pwd" placeholder=""/>
<span>登录密码</span></li><li><input type="submit" value="立即登录" class="sub-btn" id="sub-btn" /></li></ul></form>/** 时间：2015年12月1日* 描述：登陆密码框兼容ie8处理*/$('#wrpa_password').click(function() {$('#wrpa_password span').text('');$('#pwd').focus();});$('#pwd').focus(function() {$('#wrpa_password span').text('');});$('#pwd').blur(function() {if ($('#pwd').val() == '') {$('#wrpa_password span').text('登录密码');} //这个是为了处理用tab键盘按钮而做出来的处理});这篇关于pc端web前端开发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
