Table of contents
js method encapsulation to obtain the total time from a certain time to the present
js encapsulates a svg icon management method
js method encapsulation to obtain the total time from a certain time to the present
1. Demand
When doing some information display, we need to display various times, sometimes the exact creation time, and sometimes the creation time until now, so some calculations are required. So in this project of mine, the boss wrote a method to calculate the approximate time.
2. Method
fetchdayTime(date) {
const second = Date.parse(new Date()) - new Date(date).getTime();
// 计算出相差天数
const days = Math.floor(second / (24 * 3600 * 1000));
// 计算出小时数
const leave1 = second % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
const hours = Math.floor(leave1 / (3600 * 1000));
// 计算相差分钟数
const leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
const minutes = Math.floor(leave2 / (60 * 1000));
// 计算相差秒数
const leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
const seconds = Math.round(leave3 / 1000);
let result = '';
if (days && days > 7) {
result = moment(date)
.locale('zh-cn')
.format('YYYY-MM-DD');
} else if (days && days >= 1 && days < 7) {
result += `${formatMessage({ id: 'global.fetchTime.day.ago' }, { num: days })}`;
} else if (hours && hours >= 1 && hours <= 23) {
result += `${formatMessage({ id: 'global.fetchTime.hour.ago' }, { num: hours })}`;
} else if (minutes && minutes >= 1 && minutes <= 59) {
result += `${formatMessage({ id: 'global.fetchTime.minute.ago' }, { num: minutes })}`;
} else if (seconds && seconds >= 1 && seconds <= 59) {
result += `${formatMessage({ id: 'global.fetchTime.second.ago' }, { num: seconds })}`;
} else {
result = `${formatMessage({ id: 'global.fetchTime.second.ago.one' })}`;
}
return result;
},The subsequent judgment is to return the corresponding field according to the corresponding time interval. Because of the internationalization, everyone did not see the corresponding return statement.
The corresponding sentences for international translation are as follows.
Three, use
You only need to use this method to pass in the corresponding number of days to get the corresponding time.
result:
js encapsulates a svg icon management method
1. Demand
In project development, it is inevitable to use a large number of svg icons, and because most of the svg icon codes are relatively long, if they are placed under the corresponding page, the code will be extremely confusing, such as this.
It is very ugly, so for programmers who have always had code cleanliness, such code cannot be tolerated. So from the previous code of the boss of this project I am writing, I found a way to manage svg icons in a unified way.
Two, realize
const pageheaderSvg = {
getSvg(type, size = 16 , color = 'black') {
const svg = {
addSvg: (
<svg
t="1668670915612"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="14252"
width={size}
height={size}>
<path
d="M305.6 225.6c-17.6-17.6-43.2-17.6-59.2 0L19.2 460.8c-25.6 30.4-25.6 72 0 97.6l225.6 235.2c8 8 20.8 12.8 30.4 12.8s20.8-4.8 30.4-12.8c17.6-17.6 17.6-43.2 0-59.2L88 512l217.6-225.6c17.6-17.6 17.6-43.2 0-60.8zM1001.6 460.8L774.4 225.6c-17.6-17.6-43.2-17.6-59.2 0s-17.6 43.2 0 59.2L932.8 512 715.2 737.6c-17.6 17.6-17.6 43.2 0 59.2 8 8 17.6 12.8 30.4 12.8 12.8 0 20.8-4.8 30.4-12.8l225.6-235.2c28.8-28.8 28.8-70.4 0-100.8zM612.8 230.4c-20.8-8-46.4 4.8-56 25.6L382.4 742.4c-8 20.8 4.8 46.4 25.6 56 4.8 0 8 4.8 12.8 4.8 17.6 0 33.6-12.8 38.4-30.4l179.2-491.2c8-20.8-4.8-46.4-25.6-51.2z"
p-id="14253"
fill={color}>
</path>
</svg>
),
}
return svg[type] || type;
}
}
export default pageheaderSvg;| pass parameters | illustrate |
| type | It is the corresponding svg icon, corresponding to "addSvg" below. |
| size | font size |
| color | color |
Probably these things, and the rest is very common syntax, import and throw, object value syntax in square brackets, and so on. In fact, it is not difficult, what is needed is this kind of programming thinking. This way the code is easy to maintain and easy to reuse.
Three, use
First import the corresponding file
Then use the corresponding method and pass in the corresponding parameters.
The final result is displayed.
Summarize:
For me, a novice in programming, it is actually not difficult to implement these methods. The most important thing is this kind of programming thinking. Maybe this will cause you to take a long time when you first write code. However, it will be much easier to maintain it yourself or others later. Probably this is why the predecessors planted trees and the descendants enjoyed the shade. Of course, I am also very grateful to the front-end boss of this project. The above two methods all come from the code of the big guy.