小项目-前端-总结
2017-09-05 15:10
134 查看
该项目前端展示部分主要以表单列表为主：
1、整理一份base.css公共样式每个项目都可以用上（主要包括初始化样式，
布局样式，做界面内容前都先把最外层布局写好
.layout-auto,.layout{margin-left:auto;margin-right:auto;}
.layout-auto{width:100%;min-width:1000px;}
.layout{width:1000px;}中间内容的宽度
，公共弹出层，项目几个主色.c-col-red.c-col-blue等，常用的字体间距.fs14.fs16.fs18.ml10.mr10.mt10.mb10等，超出部分省略等）
2、编写公共的form表单样式，包括inputlabeltextbuttontextarearadiocheckbox等个别的错误提示error
不同颜色的按钮及hover和disable时的样式
3、列表以table去做布局，<colgroup>标签，对表格的列thtr进行组合，列的样式只要写1次再<col/>上即可应用到所有列上
（1）可以让实现方，根据回调方的多种形态进行不同的处理和操作。（ASIHttpRequest）
（2）可以让实现方，根据自己的需要定制回调方的不同形态。（UITableView）
（3）可以将耗时的操作隐藏在回调方，不影响实现方其它信息的展示。
（4）让代码的逻辑更加集中，更加易读。
//解决手机键盘弹出底部logo跑到键盘上的问题
10、手机端粘贴触发事件可用
$("#accountVerifyinput").on('input',function(){
aVerify();
});
iphone上文本框上边框出现阴影：
解决：
input{-webikit-apperaance:none;}
11、浏览器屏幕发生改变触发的事件
$(window).resize(function(){
//方法内容
});
12、获取验证码倒计时
13、一个元素绑定多个事件
14、placeholder样式兼容多种浏览器
::-webkit-input-placeholder{color:#bbb;}
/*MozillaFirefox4to18*/
:-moz-placeholder{color:#bbb;opacity:1;}
/*MozillaFirefox19+*/
::-moz-placeholder{color:#bbb;opacity:1;}
:-ms-input-placeholder{color:#bbb;}
15、window.onload=function(){}和$(window).load(function(){})和$(document).ready(function(){})
(1)js中的window.onload等价于jq的$(window).load(funciton(){})//必须等到界面所有内容加载完成再执行
(2)$(document).ready(function(){})简写为$(function(){})//DOM结构绘制完成就执行不必等到全部加载完
16、$(document).on("click","指定元素",function(){})和$("指定元素").click(function(){})区别
前者将事件绑定在document上，动态产生的新元素只要符合指定元素也会被绑定事件，.click绑定的动态生成的元素则没有事件
17、系统遮罩层和提示层
18、使用validate.js进行表单验证
若button为type="submit"，则可用表单submit提交方法，这样写：
19、callback&&callback()
20、截取url后面的参数
界面1：
界面2：
21、编写移动端底部的到底提示
22、文本框输入的时间不能小于当前时间（比较时间戳）
23、给文本框输入数字时，自动从右向左每3位添加1个逗号
//千位分隔符
functiontoThousands(num){
varxiaoshu="";
varzhengshu="";
t=num.toString();
if(t.indexOf('.')>0){
varindex=t.indexOf('.');
xiaoshu=t.slice(index,t.length);
zhengshu=t.slice(0,index);
}else{
zhengshu=t;
}
varzhengshu=(zhengshu||0).toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');
varresult=zhengshu+xiaoshu;
returnresult;
}
//使用
直接toThousands("文本框的值");
使用：
加载数据时再给数字分割逗号的使用：
24、自适应布局的写法
25、让已知宽高的弹窗居中
关于粗心：
比如修改错误添加和编辑界面是分为两个界面的情况，总是只改添加忘记改修改的
都说人不能两次踏进同一条河流，不能重复犯同样的错误，可是很多时候却老是重蹈覆辙
希望下来能细心点做事或改问题时考虑全面些确保正确
关于虚心接受批评：
做错事被叼很正常啊，心态要端正好，不要像小孩子一样被说一句就不高兴了被叼说明还有给你改正的机会
他们只是希望你做事更认真更细致一点所以要平复心情虚心接受批评并且做好改正才能进步
关于沟通：
问题讲清楚，分工也要考虑好如何分配，不要导致做白工，而且很关键的一点是一定要坚持自己认为是对的如果还有疑虑就马上问清楚
1、整理一份base.css公共样式每个项目都可以用上（主要包括初始化样式，
布局样式，做界面内容前都先把最外层布局写好
.layout-auto,.layout{margin-left:auto;margin-right:auto;}
.layout-auto{width:100%;min-width:1000px;}
.layout{width:1000px;}中间内容的宽度
，公共弹出层，项目几个主色.c-col-red.c-col-blue等，常用的字体间距.fs14.fs16.fs18.ml10.mr10.mt10.mb10等，超出部分省略等）
2、编写公共的form表单样式，包括inputlabeltextbuttontextarearadiocheckbox等个别的错误提示error
不同颜色的按钮及hover和disable时的样式
3、列表以table去做布局，<colgroup>标签，对表格的列thtr进行组合，列的样式只要写1次再<col/>上即可应用到所有列上
<table> <colgroup> <colstyle="width:200px;"/> <colstyle="width:200px;"/> <col/> </colgroup> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>小白</td> <td>男</td> <td>25</td> </tr> <tr> <td>花花</td> <td>男</td> <td>25</td> </tr> </tbody> </table>
4、列表以验证用jq的vaildate.js校验 5、 （1）自定义错误提示
<script>
functionshowError($obj,msg){
$obj.parents("input-box").find(".error-tip").show().html(msg);
}showError($("#txtName"),"请输入用户名");</script>
<formclass="formBox"> <divclass=input-info> <labelfor="txtName">用户名：</label> <divclass="input-box"> <inputtype="text"placeholder="请输入用户名"id="txtName"name="Name"/> <divclass="error-tip"></div> </div> </div> </form>
（2）表单的正则表达式
//是否邮箱
functionisEmail(email){
return/^([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\\.][a-z]{2,5}([\\.][a-z]{2})?$/.test(email);
}
//是否手机
functionisMobile(mobile){
return/^(0|86|17951)?(13[0-9]|17[0-9]|15[012356789]|18[0-9]|14[57])[0-9]{8}$/.test(mobile);
}
//是否账号
functionisAccount(account){
return/^[0-9a-zA-Z\s]+$/.test(account);
}
//匹配日期格式yyyy-mm-ddhh:mm
varregExp=/^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d$/;
$(function(){
emailVerfiy();
})
functionemailVerfiy(){
varemail1="111@qq.com";
varemail2="111qq.com";
console.log(isEmail(email1));//true
console.log(!isEmail(email2));//true
console.log(isEmail(email2));//false
//true才执行提示错误
if(!isEmail(email2)){
console.log("邮箱格式不正确");
}
}html中直接正则限制输入:
onkeyup="this.value=this.value.replace(/\D/g,'');"只能输入数字，将非数字字符用""取代
onkeyup="this.value=this.value.replace(^[^\u4e00-\u9fa5]{0,}$,'');"不能输入中文
this.value=this.value.replace(/[^\w\.\/]/ig,'');只能输入数字和字母
onkeyup="this.value=toHalf(this.value);"输入全角转化为半角
onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'');"去掉文本框头尾空格
onkeyup="value=value.replace(/[^\d^\.]+/g,'')"只能输入数字和小数点
//全角转换为半角
functiontoHalf(str){
vartmp="";
for(vari=0;i<str.length;i++){
if(str.charCodeAt(i)>65280&&str.charCodeAt(i)<65375){
tmp+=String.fromCharCode(str.charCodeAt(i)-65248);
}
elseif(str.charCodeAt(i)==12288){
tmp+=String.fromCharCode(32);
}
else{
tmp+=String.fromCharCode(str.charCodeAt(i));
}
}
returntmp;
}
6、form表单中的input[type='reset']自带有初始化其他表单元素的值的功能 7、提交表单时的验证,多个验证方法的情况
$("btnSubmit").click(function(){
varverifyVal=emailVerify();
verifyVal=verifyVal&&imgCodeVerify();
})8、ajax发送请求-封装方法
//发送请求（回调方）
functionsendReq(url,param,callback,failCallback){
$.ajax({
type:"post",
url:url+"?"+(newDate().getTime()),//+后面为了清除缓存
data:param,
contentType:"application/x-www-form-urlencoded",
dataType:"json",
success:function(result){
callback&&callback(result);
/*if(callback){
callback(result);
}*/
},
error:function(e){
failCallback&&failCallback();
}
});
}
//使用：（实现方）
functionupdatePayPwd(){
sendReq("/User/UpdatePayPwd",{
pwd:pwd,
payPwd:payPwd
},function(result){
if(result.Success){
//执行成功操作
}else{
//执行失败操作
}
}
}
回调函数的好处：
（1）可以让实现方，根据回调方的多种形态进行不同的处理和操作。（ASIHttpRequest）
（2）可以让实现方，根据自己的需要定制回调方的不同形态。（UITableView）
（3）可以将耗时的操作隐藏在回调方，不影响实现方其它信息的展示。
（4）让代码的逻辑更加集中，更加易读。
9、手机端界面
#smVerifyinput,#accountVerifyinput"为界面的文本框，手机上点击文本框时，底部fixed或absolute的内容会被跑到键盘上面。
//解决手机键盘弹出底部logo跑到键盘上的问题
<script>
varviewHeight=window.innerHeight;
$("#smVerifyinput").focus(function(){
$(".page").css("height",viewHeight);
}).blur(function(){
$(".page").css("height","100%");
});
$("#accountVerifyinput").focus(function(){
$(".page").css("height",viewHeight);
}).blur(function(){
$(".page").css("height","100%");
});
</script>
10、手机端粘贴触发事件可用
$("#accountVerifyinput").on('input',function(){
aVerify();
});
iphone上文本框上边框出现阴影：
解决：
input{-webikit-apperaance:none;}
11、浏览器屏幕发生改变触发的事件
$(window).resize(function(){
//方法内容
});
12、获取验证码倒计时
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>倒计时</title>
</head>
<body>
<inputtype="button"value="获取验证码"id="getCode"/>
<scriptsrc="Static/Js/jquery.js"></script>
<script>
//验证码发送倒计时
functioncodeCountDown(obj,wait){
if(wait<=0){
$(obj).removeClass("disable").prop("disabled",false).val("获取验证码");
}else{
if(!$(obj).hasClass("disable")){
$(obj).addClass("disable").prop("disabled","disabled");
}
$(obj).val("重新获取("+wait+")");
wait--;
setTimeout(function(){
codeCountDown(obj,wait);
},1000);
}
}
$(function(){
$("#getCode").click(function(){
codeCountDown($(this),10);
})
});
</script>
</body>
</html>
13、一个元素绑定多个事件
<script>
//一个元素绑定多个事件
$("#tab.more").hover(function(){
$("#moreList").removeClass("hide");
},function(){//离开事件
$("#moreList").addClass("hide");
}).click(function(){
console.log("click事件");
});
</script>
14、placeholder样式兼容多种浏览器
::-webkit-input-placeholder{color:#bbb;}
/*MozillaFirefox4to18*/
:-moz-placeholder{color:#bbb;opacity:1;}
/*MozillaFirefox19+*/
::-moz-placeholder{color:#bbb;opacity:1;}
:-ms-input-placeholder{color:#bbb;}
15、window.onload=function(){}和$(window).load(function(){})和$(document).ready(function(){})
(1)js中的window.onload等价于jq的$(window).load(funciton(){})//必须等到界面所有内容加载完成再执行
(2)$(document).ready(function(){})简写为$(function(){})//DOM结构绘制完成就执行不必等到全部加载完
16、$(document).on("click","指定元素",function(){})和$("指定元素").click(function(){})区别
前者将事件绑定在document上，动态产生的新元素只要符合指定元素也会被绑定事件，.click绑定的动态生成的元素则没有事件
17、系统遮罩层和提示层
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>遮罩层</title>
<style>
/*提示层*/
.sys-tip{display:none;position:fixed;z-index:100000000;min-width:150px;height:30px;line-height:30px;padding:010px;border-radius:2px;vertical-align:middle;font-size:12px;text-align:center;font-weight:600;top:30px;left:50%;}
.sys-tip.tip-success{color:#3c763d;background-color:#cbf0c6;border:1pxsolid#bae9b4}
.sys-tip.tip-error{color:#a94442;background-color:#f2dede;border:1pxsolid#ebccd1}
.sys-tip.tip-warn{color:#8a6d3b;background-color:#fcf8e3;border:1pxsolid#faebcc}
/*弹出层*/
.sys-pop-wrap{position:fixed;left:0;top:0;width:100%;height:100%;display:none;z-index:1000000;}
.sys-pop-wrap.sys-pop-mask{background:#000;width:100%;height:100%;filter:Alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}
.sys-pop-wrap.sys-pop-maskiframe,.sys-pop-wrap.sys-pop-main.pop-contiframe{width:100%;height:100%;border:0none;}
.sys-pop-wrap.sys-pop-maskiframe{filter:Alpha(opacity=0);-moz-opacity:0;opacity:0;}
.sys-pop-wrap.sys-pop-main{position:absolute;left:50%;top:50%;margin-left:-400px;width:800px;background:#fff;z-index:1000001;}
.sys-pop-wrap.sys-pop-main.pop-tit{height:42px;padding:020px;font-size:16px;color:#222;line-height:42px;background:#F6F5FA;}
.sys-pop-wrap.sys-pop-main.pop-tit.close{width:16px;height:16px;margin-top:13px;background:url(/Static/Images/Common/close.png);cursor:pointer;}
.sys-pop-wrap.sys-pop-main.pop-cont{overflow:hidden;}
.sys-pop-wrap.sys-pop-main.pop-cont.pop-loading{text-align:center;width:100%;height:100%;}
.sys-pop-tip-wrap.sys-pop-main{width:350px;height:220px;margin-left:-175px;margin-top:-110px;}
.sys-pop-tip-wrap.sys-pop-main.pop-cont{padding:40px20px20px;height:44px;line-height:22px;text-align:center;border:0;font-size:14px;}
.sys-pop-tip-wrap.sys-pop-main.pop-ft{margin-bottom:30px;text-align:center;}
.sys-pop-tip-wrap.sys-pop-main.pop-ft.btn{background-color:#2d2d2d;padding:09px;line-height:24px;display:inline-block;border-radius:2px;color:#fff;}
.sys-pop-loading-wrap.sys-pop-main{background:none;}
.sys-pop-loading-wrap.sys-pop-main.pop-cont{border:none;color:#fff;}
</style>
</head>
<body>
<buttonid="btnClick">点击我出现遮罩</button>
<scriptsrc="Static/Js/jquery.js"></script>
<script>
$(function(){
$("#btnClick").click(function(){
$.systemTip("error","失败啦");
varloading=$.loadingTip();
setTimeout(function(){
loading.remove();
},2000);
})
})
$(function(){
//提示，success,wran,error
$.systemTip=function(tip,msg){
$("#__sys_tip").remove();
varsystemTip=$("<divid='__sys_tip'class='sys-tip'></div>");
systemTip.addClass("tip-"+tip);
systemTip.text(msg);
systemTip.show().appendTo("body");
systemTip.css({
"margin-left":-(systemTip.width()/2)+"px"
});
setTimeout(function(){
systemTip.remove();
},4000);
};
//加载中提示
$.loadingTip=function(){
vartag=$('<divclass="sys-pop-wrapsys-pop-loading-wrap"><divclass="sys-pop-mask"><iframescrolling="no"src="about:blank"></iframe></div></div>').show().appendTo('body');
varmain=$('<divclass="sys-pop-main"></div>').appendTo(tag);
$('<divclass="pop-cont"><tableclass="pop-loading"><tr><td>loading...</td></tr></table></div>').appendTo(main);
returntag;
};
})
</script>
</body>
</html>
18、使用validate.js进行表单验证
valid()检验是否验证通过boolean
validate()验证所选的form
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>vaildate</title>
<style>
.error{display:inline-block;color:red;}
</style>
</head>
<body>
<formid="passForm">
<label>姓名：</label><inputplaceholder="请输入姓名"name="txtName"/>
<label>电话：</label><inputplaceholder="请输入电话"name="txtTel"/>
<inputtype="button"value="提交"id="btnSubmit">
</form>
<scriptsrc="Static/Js/jquery.js"></script>
<scriptsrc="Static/Js/jquery.validate.js"></script>
<script>
$(function(){
validateForm();
$("#btnSubmit").click(function(){
console.log($("#passForm").valid());//false
if(!$("#passForm").valid()){
returnfalse;
}
})
});
functionvalidateForm(){
return$("#passForm").validate({
onfocusout:function(element){$(element).valid();},//失去焦点时触发
onkeyup:function(element,event){
if(/^\s+/.test(this.elementValue(element))){
//去除左侧空格
varvalue=this.elementValue(element).replace(/^\s+/g,"");
$(element).val(value);
}
},
rules:{
txtName:{
required:true
},
txtTel:{
required:true
}
},
messages:{
txtName:{
required:"请输入姓名"
},
txtTel:{
required:"请输入电话"
}
}
});
}
</script>
</body>
</html>
若button为type="submit"，则可用表单submit提交方法，这样写：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>vaildate</title>
<style>
.error{display:inline-block;color:red;}
</style>
</head>
<body>
<formid="passForm">
<label>姓名：</label><inputplaceholder="请输入姓名"name="txtName"/>
<label>电话：</label><inputplaceholder="请输入电话"name="txtTel"/>
<!--<inputtype="button"value="提交"id="btnSubmit">-->
<inputtype="submit"value="提交"id="btnSubmit"/>
</form>
<scriptsrc="Static/Js/jquery.js"></script>
<scriptsrc="Static/Js/jquery.validate.js"></script>
<script>
$(function(){
validateForm();
/*$("#btnSubmit").click(function(){
console.log($("#passForm").valid());//false
if(!$("#passForm").valid()){
returnfalse;
}
})*/
$("#passForm").submit(function(){
console.log($("#passForm").valid());//false
if(!$("#passForm").valid()){//valid()验证表单结果值的boolean
returnfalse;
}
});
});
functionvalidateForm(){
return$("#passForm").validate({//validate()调用jq的表单验证
onfocusout:function(element){$(element).valid();},//失去焦点时触发
onkeyup:function(element,event){
if(/^\s+/.test(this.elementValue(element))){
//去除左侧空格
varvalue=this.elementValue(element).replace(/^\s+/g,"");
$(element).val(value);
}
},
rules:{
txtName:{
required:true
},
txtTel:{
required:true
}
},
messages:{
txtName:{
required:"请输入姓名"
},
txtTel:{
required:"请输入电话"
}
}
});
}
</script>
</body>
</html>
19、callback&&callback()
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>inputBlur失去焦点</title>
</head>
<body>
<inputid="bankName"placeholder="请输入银行名称"/>
<spanclass="error"></span>
<scriptsrc="Static/Js/jquery.js"></script>
<scriptsrc="Static/Js/jquery.validate.js"></script>
<script>
$(function(){
inputBlur("#bankName",verifyBankName);//鼠标失去焦点之后回调verifyBankName()
});
functioninputBlur(obj,callback){
$(document).on("blur",obj,function(){
callback&&callback();
//回调函数的理解：函数a有一个参数，这个参数是函数b，当a执行完后执行函数b，这个过程叫回调
/*第一个callback相当于
if(callback){callback();}
先判断是否存在callback再执行回调callback(),防止不声明callback就运行导致报错
*/
});
}
functionverifyBankName(){
varbankName=$.trim($("#bankName").val());
if(!bankName){
$(".error").text("请输入银行名称");
returnfalse;
}else{
$(".error").text("已输入");
returntrue;
}
}
</script>
</body>
</html>
20、截取url后面的参数
界面1：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<ahref="NameUpdate.html?NameId=20">点我转到NameUpdate.html修改界面</a>
</body>
</html>
界面2：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>获取url问号后面所带参数</title>
</head>
<body>
<scriptsrc="Static/Js/jquery.js"></script>
<script>
$(function(){
alert("我截取到的url的参数是："+getUrlParam("NameId"));
});
//获取URL中的request参数
functiongetUrlParam(name){
varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)");
varr=window.location.search.substr(1).match(reg);
if(r!=null)
{returndecodeURIComponent(r[2]);}
else
{return"";}
}
</script>
</body>
</html>
21、编写移动端底部的到底提示
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>我是有底线的~</title>
<style>
/*底线*/
.bottomTip{position:relative;text-align:center;color:#000;font-size:.6rem;margin:1rem0;}
.bottomTip:before,.bottomTip:after{content:'';position:absolute;top:.4rem;width:30%;height:1px;background:#000;}
.bottomTip:before{left:0;}
.bottomTip:after{right:0;}
</style>
</head>
<body>
<divclass="bottomTip">我的有底线的~</div>
</body>
</html>
22、文本框输入的时间不能小于当前时间（比较时间戳）
functiongetTime(day){
varre=/(\d{4})(?:-(\d{1,2})(?:-(\d{1,2}))?)?(?:\s+(\d{1,2}):(\d{1,2}):(\d{1,2}))?/.exec(day);
returnnewDate(re[1],(re[2]||1)-1,re[3]||1,re[4]||0,re[5]||0,re[6]||0).getTime();
}
//判断预约时间是否大于当前时间
functioncompareTime(){
varnowDate=newDate().getTime();
varappointDate=newDate($.trim($("#txtTime").val())).getTime();
if(nowDate>appointDate){
$("#meetTimeError").text("预约时间不能小于当前时间");
returnfalse;
}else{
$("#meetTimeError").text("");
returntrue;
}
}23、给文本框输入数字时，自动从右向左每3位添加1个逗号
functiontoThousands(newnum){//每隔3位，用逗号隔开
varresult=[],
counter=0;
newnum=(newnum||0).toString().split('');
for(vari=newnum.length-1;i>=0;i--){
counter++;
result.unshift(newnum[i]);
if(!(counter%3)&&i!=0){
result.unshift(',');
}
}
returnresult.join('');
}
//从右向左每3位加一个逗号
functionjoinVal(n){
varb=parseInt(n).toString();
varlen=b.length;
if(len<=3){returnb;}
varr=len%3;
returnr>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(",");
}
//以上两个结合，数字和输入小数点，保留小数点后2位
//千位分隔符
functiontoThousands(num){
varxiaoshu="";
varzhengshu="";
t=num.toString();
if(t.indexOf('.')>0){
varindex=t.indexOf('.');
xiaoshu=t.slice(index,t.length);
zhengshu=t.slice(0,index);
}else{
zhengshu=t;
}
varzhengshu=(zhengshu||0).toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');
varresult=zhengshu+xiaoshu;
returnresult;
}
//使用
直接toThousands("文本框的值");
使用：
$(document).on("blur",'#txtTurnoverPerYear',function(){
turnoverPerYearVerify();
});
$(document).on("keyup","#txtTurnoverPerYear",function(){
turnoverPerYearVerify();
});
functionturnoverPerYearVerify(){
varmoney=$.trim($("#txtTurnoverPerYear").val().replace(/,/g,""));//将文本框的逗号去掉
if(money.length!=0){
money=money.replace(/^0*/gi,"");//匹配文本框中的数字
$("#txtTurnoverPerYear").val(toThousands(money));//调用分割逗号的方法并再次重现赋值给文本框
}
if(money.length==0){
$("#txtTurnoverPerYear-error").text("请输入与正确的金额").show();
returnfalse;
}
elseif(money.length>16){
$("#txtTurnoverPerYear-error").text("金额长度不能超过16位").show();
returnfalse;
}
elseif(money.charAt(0)=='0'||!isMoney(money)){
$("#txtTurnoverPerYear-error").text("请输入与正确的金额").show();
returnfalse;
}else{
$("#txtTurnoverPerYear-error").text("").hide();
returntrue;
}
}加载数据时再给数字分割逗号的使用：
$(function(){
joinMoney();
})
functionjoinMoney(){
varm=$.trim($("txtYearMoney").val());
$("txtYearMoney").val(joinVal(m));
}24、自适应布局的写法
//方法一绝对定位法
body{margin:0;padding:0;}
.leftWrap1{width:200px;position:fixed;left:0;top:0;height:500px;background:#3c763d;}
.mainWrap1{margin-left:200px;margin-right:200px;height:500px;background:#dddddd;}
.rightWrap1{width:200px;position:fixed;right:0;top:0;background:#5C6F85;height:500px;}
<divclass="leftWrap1"></div>
<divclass="mainWrap1"></div>
<divclass="rightWrap1"></div>
//方法二margin负值法，要注意的是主体内容层最外面要包含100%的大层
<divid="main">
<divid="body">222222222222</div>
</div>
<divid="left">22222222</div>
<divid="right">33333333333</div>
#main{width:100%;height:100%;float:left;}
#left,#right{float:left;width:200px;height:100%;background:#5C6F85;}
#body{margin:0210px;height:100%;background:#3c763d;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}
//方法三自身浮动
<divclass="left">222</div>
<divclass="right">111</div>
<divclass="main">333</div>
.left{float:left;width:200px;height:500px;background:#5C6F85;}
.right{float:right;width:200px;height:500px;background:#5C6F85;}
.main{margin:0210px;height:500px;background:#ddd;}
25、让已知宽高的弹窗居中
<divclass="container"></div>
//css
body{position:relative;}
.container{width:100px;height:100px;border:1pxsolid#000000;
position:absolute;margin:auto;left:0;right:0;top:0;bottom:0;}
//js
<script>
$(function(){
$("body").width($(window).width());
$("body").height($(window).height());
});
</script>
关于粗心：
比如修改错误添加和编辑界面是分为两个界面的情况，总是只改添加忘记改修改的
都说人不能两次踏进同一条河流，不能重复犯同样的错误，可是很多时候却老是重蹈覆辙
希望下来能细心点做事或改问题时考虑全面些确保正确
关于虚心接受批评：
做错事被叼很正常啊，心态要端正好，不要像小孩子一样被说一句就不高兴了被叼说明还有给你改正的机会
他们只是希望你做事更认真更细致一点所以要平复心情虚心接受批评并且做好改正才能进步
关于沟通：
问题讲清楚，分工也要考虑好如何分配，不要导致做白工，而且很关键的一点是一定要坚持自己认为是对的如果还有疑虑就马上问清楚
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端入坑出坑总结——为了更快的出入下一个坑（项目开发总结）
- 项目开发过程前端开发中遇见的问题总结
- 项目中使用前端技术总结一（Sea.js）
- 前端项目总结
- 前端项目的总结——css in js 的好处？
- webpack前端构建工具学习总结（四）之自动化生成项目中的html页面
- web项目前端开发经验总结
- 前端项目积累和总结——表单验证
- 前端项目的总结——为什么要组件化？
- [React项目总结] 基于 webpack 搭建前端工程基础篇
- 项目开发总结：前端开发部分总结[兼容性、DOM操作、跨域等]（持续更新）
- 【项目总结】扯一扯电商网站前端css的整体架构设计（1）
- 前端项目的总结——为什么要使用typescript？
- 前端项目积累和总结——零碎知识（js）
- WEB项目前端表单认证遇到的问题的反思及总结
- webapp项目前端总结
- 前端项目的总结——为什么要这么分层？好处是什么？
- 装修项目之前端总结一
- 魔兽军团前端项目的一些总结
- 项目前端总结