0. 前言
在当你写一个项目中肯定会遇到各种问题，大神请忽略，遇到问题不可怕，解决就好了啊，是吧！
timg.jpeg
1. 小方法
问题1
有这样一个时间查询列表，当我改变时间的时候需要想后台传给它我选择的时间
image.png
如果是同一天怎么处理，需要我给一个区间，一天时间是从xxxx-xx-xx 00:00:00 至 xxxx-xx-xx 23:59:59的，后台明明可以处理，让我一个大前端来，我说好吧我传给你，于是就有这个方法。
/*处理时间格式
有四种时间格式
1 Y-M-D，年-月-日
2 Y/M/D，年/月/日
3 Y-M-D H:M:S:0 年-月-日 时00:分00:秒00
4 Y-M-D H:M:S:1 年-月-日 时23:分59:秒59
*/
export const getDate = function (time) {
let date = new Date(),
y = date.getFullYear(),
m = date.getMonth() + 1,
d = date.getDate(),
h = "00",
f = "00",
s = "00",
h1 = "23",
f1 = "59",
s1 = "59",
nowDay = null;
if (m < 10) {
m = "0" + m;
}
if (d < 10) {
d = "0" + d;
}
switch(time != null) {
case "Y-M-D" == time:
nowDay = y + '-' + m + '-' + d
break;
case "Y/M/D" == time:
nowDay = y + '/' + m + '/' + d
break;
case "Y-M-D H:M:S:0" == time:
nowDay = y + '-' + m + '-' + d + " " + h + ":" + f + ":" + s;
break;
case "Y-M-D H:M:S:1" == time:
nowDay = y + '-' + m + '-' + d + " " + h1 + ":" + f1 + ":" + s1;
break;
}
return nowDay
}
可能看着有点low啊，但是能实现效果，用的时候，传入我规定好的参数就OK了。
问题2
还是时间查询的列表，有几个单选按钮，对应天数，当我点击按钮的时候，时间选择框展示出点击的的天数的前几天的日期
image.png
当我点击哪一天的时候，起止日期就变成当前日期的前几天对应的参数
/*
处理时间，接受一个参数，参数从0开始
返回值：当前时间的第n天
*/
export const getBeforeDate = function (n) {
let num = n || 0,
d = new Date(),
year = d.getFullYear(),
mon=d.getMonth()+1,
day=d.getDate(),
s = null;
if(day <= num){
if(mon>1) {
mon=mon-1;
}
else{
year = year-1;
mon = 12;
}
}
d.setDate(d.getDate()-num);
year = d.getFullYear();
mon=d.getMonth()+1;
day=d.getDate();
s = year+"/"+(mon<10?('0'+mon):mon)+"/"+(day<10?('0'+day):day);
return s;
}
实现效果
GIF.gif
问题3
在开始我们我们写项目一定会写一个公共的样式CSS文件，
一、为了代码的复用，
二、方便，
三、牛X人都这样写，我不知道你牛不牛，
有这样一个样式，ul li列表，在reset.css文件中已经把默认样式去掉了，在想让前面的圆出来就恢复默认的样式，list-style-type: disc,但是有个问题，UI设计师非得让你弄成红的颜色，是不是很蛋疼。。。
image.png
.ul li:after {
content: '';
display: block;
position: absolute;
width: 8px;
height: 8px;
background-color: #da161a;
left: -20px;
top: 7px;
border-radius: 50%;
}
这里我们就可以用伪类，具体的实现效果就得看你们公司的设计师怎么设计了。。。
问题4
有这么一个需求，有的东西你想复制，有时候可能因为疏忽，复制少了一个，所以有个点击按钮，当我点击复制按钮的时候，会把值复制到，就不用自己选中了，这样减少复制错的情况，也能提高用户体验
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="测试文本"/>
<input type="button" id="btn" value="复制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
var inputText = document.getElementById('inputText');
inputText.focus();
inputText.setSelectionRange(0, inputText.value.length);
document.execCommand('copy', true);
});
</script>
</body>
</html>
实现效果
GIF(1).gif
问题5
项目中遇到打开qq临时会话的功能，在企业qq百度半天，知乎啊，github啊，都没找到，最后。。。不说了，记录一下装x时刻
链接方式
（1）第一种点击链接可直接弹出对话窗口
<a class="suspend-btn-1" target="_blank" rel="nofollow" href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&uin=企业qq号"></a>
（2）第二种需要确认后才弹出对话窗口
<a class="suspend-btn-1" target="_blank" rel="nofollow" href="http://crm2.qq.com/page/portalpage/wpa.php?uin=企业qq号&aty=1&a=1&curl=&ty=1"></a>
（3）第三种开启qq个人临时会话窗口
- 第一步 点击网址登陆
http://shang.qq.com/v3/index.html - 第二步 点击推广工具
- 第三步 会弹出一个对话框，点击免费开通服务即可（如果没有弹框，就刷新页面，直到你能点击免费开通服务为止）
然后下面会生成一个网址
<a target="_blank" href=http://wpa.qq.com/msgrd?v=3&uin=qq号码&site=qq&menu=yes>点我</a >
问题6
有的时候需要选择日期的时候，要用select下拉框，但是select会有默认样式，你有多少东西他都会显示，但是东西特别多的时候，就不是那么友好，比如
WechatIMG155.jpeg
太多了，是不是，解决办法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="article-start-box">
<select style="margin-left: 40px; outline: none;"
onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0">
<option value="volvo">文学集</option>
<option value="saab">哲学</option>
<option value="opel">雅思</option>
<option value="audi">大学网奥数大学网奥数</option>
<option value="volvo">文学集</option>
<option value="saab">哲学</option>
<option value="opel">雅思</option>
<option value="audi">大学网奥数</option>
<option value="volvo">文学集</option>
<option value="saab">哲学</option>
<option value="opel">雅思</option>
<option value="audi">大学网奥数大学网奥数</option>
<option value="volvo">文学集</option>
<option value="saab">哲学</option>
<option value="opel">雅思</option>
<option value="audi">大学网奥数</option>
</select>
</div>
</body>
</html>
实现效果
GIF(2).gif
但是还有一个问题，就是不能把所有的东西都写在html中啊，不是不能实现，就是low
html样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/JavaScript" src="birDate1.js"></script>
<style type="text/css">
div{
position: relative;
}
select{
width:60px;
position: absolute;
top: 96px;
outline: none;
}
#selYear{
left: 0;
}
#selMonth{
left: 80px;
}
#selDay{
left: 160px;
}
</style>
</head>
<body>
<div>
<select onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0" id="selYear"></select><span>年</span>
<select onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0" id="selMonth"></select><span>月</span>
<select onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0" onchange="this.size=0" id="selDay"></select><span>日</span>
</div>
<script type="text/javascript">
var selYear = window.document.getElementById("selYear");
var selMonth = window.document.getElementById("selMonth");
var selDay = window.document.getElementById("selDay");
// 新建一个DateSelector类的实例，将三个select对象传进去
new DateSelector(selYear, selMonth, selDay);
// 也可以试试下边的代码
// var dt = new Date(2004, 1, 29);
// new DateSelector(selYear, selMonth ,selDay, dt);
</script>
</body>
</html>
引入的js文件，封装成了一个方法
//处理时间，selsect框，选xxxx年xx月xx日
export const dateSelector = function (selYear, selMonth, selDay) {//定义函数
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
this.selYear.Group = this;
this.selMonth.Group = this;
// 给年份、月份下拉菜单添加处理onchange事件的函数
if (window.document.all != null) // IE
{
this.selYear.attachEvent("onchange", DateSelector.Onchange);
this.selMonth.attachEvent("onchange", DateSelector.Onchange);
}
else // Firefox
{
this.selYear.addEventListener("change", DateSelector.Onchange, false);
this.selMonth.addEventListener("change", DateSelector.Onchange, false);
}
if (arguments.length == 4) // 如果传入参数个数为4，最后一个参数必须为Date对象
this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate());
else if (arguments.length == 6) // 如果传入参数个数为6，最后三个参数必须为初始的年月日数值
this.InitSelector(arguments[3], arguments[4], arguments[5]);
else // 默认使用当前日期
{
var dt = new Date();
this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
}
}
// 增加一个最小年份的属性--最老年份
DateSelector.prototype.MinYear = 1960;
// 增加一个最大年份的属性--最新年份，即当前时期getFullYear()
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
// 初始化年份
DateSelector.prototype.InitYearSelect = function () {
// 循环添加OPION元素到年份select对象中
for (var i = this.MaxYear; i >= this.MinYear; i--) {
// 新建一个OPTION对象
var op = window.document.createElement("OPTION");
// 设置OPTION对象的值
op.value = i;
// 设置OPTION对象的内容
op.innerHTML = i;
// 添加到年份select对象
this.selYear.appendChild(op);
}
}
// 初始化月份
DateSelector.prototype.InitMonthSelect = function () {
// 循环添加OPION元素到月份select对象中
for (var i = 1; i < 13; i++) {
// 新建一个OPTION对象
var op = window.document.createElement("OPTION");
//判断月数小于10，前面加上一个0
if (i < 10) {
i = "0" + i
}
// 设置OPTION对象的值
op.value = i;
// 设置OPTION对象的内容
op.innerHTML = i;
// 添加到月份select对象
this.selMonth.appendChild(op);
}
}
// 根据年份与月份获取当月的天数
DateSelector.DaysInMonth = function (year, month) {
var date = new Date(year, month, 0);
return date.getDate();
}
// 初始化天数
DateSelector.prototype.InitDaySelect = function () {
// 使用parseInt函数获取当前的年份和月份
var year = parseInt(this.selYear.value);
var month = parseInt(this.selMonth.value);
// 获取当月的天数
var daysInMonth = DateSelector.DaysInMonth(year, month);
// 清空原有的选项
this.selDay.options.length = 0;
// 循环添加OPION元素到天数select对象中
for (var i = 1; i <= daysInMonth; i++) {
// 新建一个OPTION对象
var op = window.document.createElement("OPTION");
//判断天数小于10，前面加上一个0
if (i < 10) {
i = "0" + i
}
// 设置OPTION对象的值
op.value = i;
// 设置OPTION对象的内容
op.innerHTML = i;
// 添加到天数select对象
this.selDay.appendChild(op);
}
}
// 处理年份和月份onchange事件的方法，它获取事件来源对象（即selYear或selMonth）
// 并调用它的Group对象（即DateSelector实例，请见构造函数）提供的InitDaySelect方法重新初始化天数
// 参数e为event对象
DateSelector.Onchange = function (e) {
var selector = window.document.all != null ? e.srcElement : e.target;
selector.Group.InitDaySelect();
}
// 根据参数初始化下拉菜单选项
DateSelector.prototype.InitSelector = function (year, month, day) {
// 由于外部是可以调用这个方法，因此我们在这里也要将selYear和selMonth的选项清空掉
// 另外因为InitDaySelect方法已经有清空天数下拉菜单，因此这里就不用重复工作了
this.selYear.options.length = 0;
this.selMonth.options.length = 0;
// 初始化年、月
this.InitYearSelect();
this.InitMonthSelect();
// 设置年、月初始值
this.selYear.selectedIndex = this.MaxYear - year;
this.selMonth.selectedIndex = month - 1;
// 初始化天数
this.InitDaySelect();
// 设置天数初始值
this.selDay.selectedIndex = day - 1;
}
实现效果
GIF(3).gif
问题7
在我们的表单提交中，会有输入银行卡号的时候，那么为了用户体验佳，就会要求你做到每输入4位号码加上一个空格，但是在你提交的时候，后端让我把空格去掉，哎，没办法啊，都是大爷啊！
图片.png
表单有个
onInput={this.inputFunc.bind(this)}的事件，也可以用onkeyup事件，反正实现的办法很多
js原生
<input type="text" id="bankCard"/>
!function () {
document.getElementById('bankCard').onkeyup = function (event) {
var v = this.value;
if(/\S{5}/.test(v)){
this.value = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
}
};
}();
react中我的写法
先看图
图片.png
代码
//输入银行卡号的时候每位添加一个空格
inputFunc () {
let cardNumber = this.refs.cardNumber
let value = cardNumber.value
if(/\S{5}/.test(value)){
cardNumber.value = value.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
}
}
对了还有去除空格
//去除空格
let replaceCardNumber = cardNumber.replace(/\s+/g, "");
这样又能加空格，又能去除空格。。。
问题8
输入身份证号的时候，我们可以自动截取他输入身份证号的出生日期，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="card" height=20px width=40px/>
<br/>
<button type="button" onclick="dealCard()">please click it</button>
<script type="text/javascript">
function dealCard(){
var birthday=getBirthday();
switch(birthday){
case 0:
console.log("程序运行错误!");
break;
case 1:
console.log("请在输入一次!");
break;
default:
console.log("出生日期是"+birthday);
break;
}
}
function getBirthday(){
var a=document.getElementById("card").value;
if(15==a.length || 18==a.length){
var left=a.length-12;
var right=a.length-4;
var b=a.slice(left,right);
if(8==b.length){
return b;
}
else return 0;
}
else return 1;
}
</script>
</body>
</html>
问题9
兼容问题，兼容问题一直是一块硬骨头，今天遇到一个时间的兼容问题，在Chrome下时间处理没有问题，但是在Safari下就会报错，因为Safari不支持“--”的时间格式，把它改为“/”，处理就可以了，我也是醉了。
let deadline = new Date("2017-07-27 00:00:00");
当看到日期格式是yyyy-mm-dd，就想到了yyyy/mm/dd格式，以前我也好奇这两种格式有什么区别，不过之前用chrome浏览器来测试这两种日期格式，都没有问题，但是现在yyyy-mm-dd在Safari就会有问题，然后就改代码
let date_format = "2017-07-27".split('-').join('/');
let deadline = new Date(date_format + "00:00:00");
将yyyy-mm-dd格式转换成yyyy/mm/dd格式后，发现Safari和chrome都没有问题了，看来是浏览器对时间格式支持不太一样,也是醉了。
问题10
遇到一个进度条问题，用css解决的，用的c3的新特性。渐变（linear-gradient），背景图片（background-image）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 进度条 buy */
.process-box {
position: relative;
min-width: 1%;
max-width: 80%;
margin-top: 14px;
margin-left: 10px;
}
.process-box .process-bar {
position: absolute;
top: 0;
left: 0;
height: 12px;
min-width: 10%;
max-width: 100%;
border-radius: 3px;
background-image: linear-gradient(60deg, transparent 0rem, transparent 0.8rem, #00ba04 0.8rem, #00ba04 1.6rem, transparent 1.6rem, transparent 2.4rem, #00ba04 2.4rem);
background-color: rgba(0, 186, 4, .6);
background-size: 28px 50px;
}
.process-box .process-bar:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
border-radius: 3px;
background-image: linear-gradient(to bottom, rgba(0, 186, 4, .6), rgba(0, 186, 4, .6) 15%, transparent 60%, rgba(0, 186, 4, .6));
}
</style>
</head>
<body>
<div class="process-box">
<div class="process-bar">
</div>
</div>
</body>
</html>
样式
1508722046783.jpg
问题11
在项目中遇到精度丢失的问题，因为在前端如果做一些运算处理的话，会导致精度问题，
image.png
当然解决的办法有很多种
- 找你们后台让他处理好之后在返给你
- 商量一下需求，保留几位小数，然后截取一下，为什么不用四舍五入，因为四舍五入不也导致精度丢失了么？
- 引用一个库解决它,引用的库大多数用的都是bigdecimal,但是包太大，我们就用了一个比较小的，API也简单的number-accuracy,一看就懂
截取的方法
export const formatNumber = function (number, num) {
let index = parseInt(num);
if (/\./.test(`${number}`)) {
let arr = `${number}`.split('.'), result = toThousands(arr[0])
if (arr[1].length >= index) {
return `${result}.` + `${arr[1]}`.slice(0, index)
}
let prics = arr[1]
for (let i = 0; i < index - arr[1].length; i++) {
prics += '0'
}
return number = `${result}.${prics}`
}
let result = toThousands(number)
number = `${result}.`
for (let j = 0; j < index; j++) {
number += '0'
}
return number.replace(/(\.*$)/g,"")
}
问题12
有的时候我们的登录密码需要md5处理，加盐什么的。
密码是通过md5加盐处理
WechatIMG28305.jpeg
问题13
上面有写到获取某一天的时间，这次有个需求需要获取2个月内的天数，或这个月的天数，或上个月的天数。
当前月的天数
var mGetDate = function (){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var d = new Date(year, month, 0);
return d.getDate();
}
console.log(mGetDate(),"new");
image.png
上一个月的天数
var getLastDays = function(){
var now = new Date;
now.setMonth(now.getMonth() - 1);
now.setDate(1);
var next = new Date;
next.setDate(1);
var arr = [];
while(now < next){
arr.push(now.getDate());
now.setDate(now.getDate() + 1);
}
return arr.length;
}
console.log(getLastDays(),"top");
image.png
获得2个月内的天数
var two = function () {
var now = new Date;
var date = new Date();
var next = new Date;
var year = date.getFullYear();
var month = date.getMonth()+1;
var d = new Date(year, month, 0);
var arr = [];
var num = 0
now.setMonth(now.getMonth() - 1);
now.setDate(1);
next.setDate(1);
while(now < next){
arr.push(now.getDate());
now.setDate(now.getDate() + 1);
}
num = d.getDate() + arr.length
return num
}
console.log(two(),"two");
image.png
问题14
对网站进行SEO优化，sitemap。
网友评论