The year of eight books https://www.barben.cn We've been there all the time Wed, 11 Nov 2020 01:55:22 +0000 zh-CN hourly one https://wordpress.org/?v=5.5.3 https://www.barben.cn/wp-content/uploads/2019/03/2019030513473896-150x150.png The year of eight books https://www.barben.cn thirty-two thirty-two JS calculation method of date and time https://www.barben.cn/code/923.html https://www.barben.cn/code/923.html#respond Wed, 11 Nov 2020 01:35:55 +0000 https://www.barben.cn/?p=923 JS gets the current time and converts it to a number
``` If the number of time bits is less than 2 bits, it will fill in 0 at the beginning of the return return return '\${time. Getfullyear()} year \${(time. Getmonth() + 1). Tostring(). Padstart (2,' 0 ')} month \${(time. Getmonth() + 1). Tostring(). Padstart (2,' 0 ')} month \${time. Gettimes (). ToString (). Padstart (2,'0')} month \${time. Gettimes (). ToString (). Padstart (2, '0')} days \${time. GetHours (). GetHours (). Padstart (2, '0')} days \${time. GetHours ()..gethours (). Date (2, '0')} days \${days \${time. GetHours (). GetHours () tostring(). Padstart (2, '0')}: \${time. Getminutes(). Tostring(). Padstart (2, '0')} ';
}}; / / November 11, 2020 09:20```

## JS compares the two dates by several days

``` function computeDateDiff(start, end) {
return (new Date(end) - new Date(start)) / (1000 * 60 * 60 * 24);
}

computeDateDiff("2020/11/11", "2020/12/11"); // 30
computeDateDiff("2020/11/11", "2020/10/11"); // -31
computeDateDiff("2020-01-01", "2021-01-05"); // 370
computeDateDiff("2020-08-01", "2020-05-20"); // -73```

## JS converts the slash of time to horizontal line

` //Change slash to horizontal line`

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
JS calculation method of date and time - https://www.barben.cn/code/923.html
]]>
https://www.barben.cn/code/923.html/feed zero
JS matches the style in HTML tags https://www.barben.cn/code/907.html https://www.barben.cn/code/907.html#respond Fri, 09 Oct 2020 03:48:45 +0000 https://www.barben.cn/?p=907

I use HTML in the front end of the project to render the content.

However, rendering the style tag directly on this page is really ridiculous!

## Match the style in HTML tag with regular and delete it with replace

``` Content = content = content.replace (/ style / s * = / s * = / s * = / s * "/ Ig,") / Ig, ");
/ / or you can, you can first remove the double quotes, and then remove the single quotes, / / content = content. Replace (/ style = / style =" / "/ Ig,") / Ig, ") / Ig,");;; "/ / or you can, you can first remove the double quotes, and then remove the single quotes, / / content = content. Content. Replace (/ style = / style =" / style = "/" / "/ Ig,") / Ig, ") / Ig,") / Ig, "/ Ig,");;;; "/ / or you can, you can first remove the double quotation marks, and then remove the single quotation marks / / content = content = content = content.replace (replace (/ style = '[^ \'] *? '/ Ig,");```

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
JS matches the style - https://www.barben.cn/code/907.html in the HTML tag
]]>
https://www.barben.cn/code/907.html/feed zero
Convert JS timestamp to normal digital time format https://www.barben.cn/code/897.html https://www.barben.cn/code/897.html#respond Sat, 19 Sep 2020 18:15:45 +0000 https://www.barben.cn/?p=897 In the middle of the night, I found the back end of the interface Bring good people The time field passed to me is actually a timestamp format???

Originally, I wanted the backend to change this timestamp to a value that can be seen by a man in the sun, but when I look at the time .

2020-09-20 02:06:05

Excuse me, I'll do it myself!!!!

``` function getdate(time) {
var now = new Date(time),
y = now.getFullYear(),
m = now.getMonth() + 1,
d = now.getDate();
return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
}
console.log(getdate(1600413432000)); // 2020-09-18 15:17:12```

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
JS timestamp to normal digital time format - https://www.barben.cn/code/897.html
]]>
https://www.barben.cn/code/897.html/feed zero
Van re rendering updates picker view https://www.barben.cn/code/880.html https://www.barben.cn/code/880.html#respond Fri, 11 Sep 2020 09:14:36 +0000 https://www.barben.cn/?p=880 One requirement is to use van's picker selector component instead of the input box to set everyone's score.
However, the score of each item is different, some full score is 10, some full score is 30, so it is necessary to dynamically change the optional range for picker selector.

` <! -- score selection pop-up window >`
``` Return return {data() {data() {return {showscore: false, ԡcorecolumns: [
{values: [], / / needs to dynamically set the column of integer columns,
defaultindex: 0 𠃱
},

defaultindex: 0 ԡ

,

showscore: false,, 𠃱
corecolumns:: [

/ / you need to dynamically set the column of integer columns of values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
; defaultindex: 0
}, {
values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
{defaultindex: 0
}
},
; methods: {showscorepopup() {
/ / code is for display only, some codes have been omitted. The following variable maxscore is the maximum value obtained dynamically, which may be 10 or 30

this. Scorecolumns [0]. Values = []; / / clear first and then assign
(let I = maxscore; I > = 0; I --) {
/ / add all scores to the first column of picker after traversing, for example: [30, 29, 28,..., 2, 1, 0]

this. Scorecolumns [0]. Values. Push (I); Showscore = true; / / select pop-up window for displaying score```

## Modifying picker's columns parameter does not update the view

However, the new option "values" in "columns" has not been changed.
Therefore, the first reaction is to update the view pot, so the API, Vue. \$set provided by Vue is used. The result is that the data is still modified, but the options are not updated.
Next, I looked at the van official documents and found that there was one picker.setColumnValues This picker obviously obtains the selector instance, but this picker is a parameter only available to the @ change event on the van picker component, and there is no such parameter in other events.
The setcolumnvalues method is to set the options of the column specified by the selector.

When I couldn't get the selector, I suddenly found a sentence in the document that was ignored by me

## Use ref to get picker components

``` <van-picker
ref="scoreSelect"
/>```
` console.log(this.\$refs.scoreSelect);`

As shown above, First add a ref attribute to the picker component, and then call it in the method using this. \$refs.
However, you will find that the console mercilessly output an undefined, which is to get a lonely???

## Solve the problem of using ref in the pop-up to get picker components

It does not load the pop-up in front of the pop-up layer.
The solution is Add a lazy render parameter to the pop component so that you can use \$refs to get it.

``` <van-popup
:lazy-render="false"
/>```

So I changed the showscorepopup method at the beginning of the article to look like this

``` //The instance method scoreselect receives two parameters (columnindex, values). The first parameter is the index of the column to be modified by the selector, and the second parameter is the value to be modified

showscorepop() {
/ / the code is only for display, and some codes have been omitted. The following variable maxscore is the maximum value dynamically obtained dynamically, which may be 10 or 30
/ / this.scorecolumns [0], values = [];;;
letnumarr = [];
for (let I = maxscore; I > = 0; I > = 0; I --) {for (let I = maxscore; I > = 0; I > = I --) {
/ / this.scorecolumns [0], values.values.push (I);
numarr.push (I);;;
;;
;;

for (let let I = maxscore; I > = I > = / / this. \$refs. Scoreselect. Setcolumnvalues (0, this. Scorecolumns [0]. Values); this. \$refs.scoreselect.setcolumnvalues (0, numarr);
this.showscore = true; / / display score selection pop-up window
}```

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Van re render update picker view - https://www.barben.cn/code/880.html
]]>
https://www.barben.cn/code/880.html/feed zero
How to remember JS data type in a short time? https://www.barben.cn/code/862.html https://www.barben.cn/code/862.html#respond Wed, 19 Aug 2020 10:56:26 +0000 https://www.barben.cn/?p=862
If you can remember the data type of JS in one sentence, then You're a real u so NB

U. I like to use it instead of you you

So, that means So, so, very, very, very

NB, I don't need to talk about it, of course Cattle batch Ah!!!

>What starts with u is undefined

>There are string And ES6 NEW symbol

>There are two that start with n, number and null

>The ones that start with B can be thought of boolean

No, no, no, no one really can't remember it?

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
How to remember JS data type in a short time? - https://www.barben.cn/code/862.html
]]>
https://www.barben.cn/code/862.html/feed zero
The home page of the browser has been tampered with as a security navigation system for new Duba? https://www.barben.cn/live/851.html https://www.barben.cn/live/851.html#respond Sat, 06 Jun 2020 17:22:49 +0000 https://www.barben.cn/?p=851 Today, the browser home page is inexplicably set up as a vicious drug bully safety navigation. The most troubling thing is that the protection of the homepage of the browser failed to intercept successfully, and the mentality exploded.

Type in the chrome address bar chrome://version/ (360 browser is se://version/ ）You'll find this disgusting website!

## I have done the following useless work

1. First of all, check ie options, home page changed to Baidu also invalid, reset browser settings are invalid

2. Then go to other browser settings to find the home page, but still the original address

3. Then decisively search the registry, but still in vain

4. Forced by helpless, opened the anti-virus software in the lock browser home page

I can't think of any way to solve it!
I can't bear the word "drug bully" when I get here!
Those software related to the drug bully will disappear from my computer immediately!

## The effective solution to the problem is to uninstall

To sum up, all the problems are caused by the driving spirit. When you want to unload it, it will solve the problem for you honestly.

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
The home page of the browser has been tampered with as a security navigation system for new Duba? - https://www.barben.cn/live/851.html
]]>
https://www.barben.cn/live/851.html/feed zero
Vue encapsulates Axios https://www.barben.cn/code/845.html https://www.barben.cn/code/845.html#respond Fri, 05 Jun 2020 10:12:57 +0000 https://www.barben.cn/?p=845 And the previous article《 Wechat applet encapsulates request request 》Very similar to the unique for loop writing
The advantage is really clean~

## 1. Two new files are created to encapsulate Axios and manage interfaces

I'm here src/assets/js/api Under the new one index.js and apiList.js

stay index.js To encapsulate Axios:

``` Import Axios from 'Axios';
import {message} from' element UI ';
import apilist from'. / apilist ';
import store from' @ / store ';

axios. Defaults. Timeout = 5000; / / timeout termination request
Axios. Defaults. Baseurl ='http: / / 192.168.0.88:8080 /'; /// / set a request interceptor (axios.interceptors.request.use (
config = > {
/ / const token = getcookie ('name '); / / note that you need to introduce cookie methods when using them, and recommend that js-cookie.config.data = json.stringify (config.data);
, config.headers = {content-type':'application///content-type ':'application///application///content-type':'application / application / content-type ':'application / application / content-type':'application / application / content-type ':'application / application / content-type':'application / application / content-type ':'application / content-type':'application / application / application / content-type '':'application / application / type ''content-type''content-type JSON; charset = UTF-8 ',
// 'Content-Type':'application/x-www-form-urlencoded'
}
if(store.state.token) {
}
return config;
},
error => {
return Promise.reject(err);
}
); / / set a response interceptor (axios.interceptors.response.use (
response = > {
/ / if (response.data.errcode = = 2) {use / / / / route.push ({path: "/ login",
/ / query: {redirect: router.currentroute.fullpath.fullpath} / / / / jump from which page to jump from
/ / / jump from which page
/ / / jump from which page
/ / / / jump from which page
/ / / jump from which page
/ / / jump from which page
/ / / jump from which page
/ / / jump from which page
/ / / / jump from which page
/ / / jump from which page
/ / / / / / / / / / / /})
/ / return response;
/ / let res = response. Data; //Get the data returned by the response
if (res.code = = 200) {return res.data;
} else {
/ / if the status code is not 200, an error will be reported. An error message will pop up, and no data will be returned
} error (res.msg);
},

error = > {message. Error (error. Message); Return promise. Reject (error)
}
)
/ / the following is the encapsulation method:
/ / in the get delete request mode, the first parameter is the URL address of the request, and the second parameter is some configuration items of the request. The parameters to be passed to the back end are included in the data or params properties of the configuration item,
/ / Post put In the patch request, the first parameter is the URL address, the second parameter is the JSON data to be input, and the third parameter is other configuration items other than the input parameter.

var list = {};

for(let item in apiList) {
list[item] = function(params) {
let [method, url] = apiList[item];
let data = (method == 'get' || method == "delete") ? {params} : (method == 'post' || method == "put" || method == "patch") ? params : {}
return new Promise((resolve, reject) => {
axios[method](url, data)
. then (RES = > {if (RES) {
/ / in the response interceptor, if the code is not 200, no data is returned, and res may be undefined. Therefore, if res has data, it can be sent out with resolve.
resolve(res);
}
})
.catch(err => {
reject(err);
})
})
}
}

export default list;```

stay apiList.js All interfaces are managed in a unified way

``` Let apilist = {
login: ["post", "/ user / login"], / / the user logs in
, getcaptcha: ["get", "/ user / captcha"], / / get the login image verification code

logout: ["get", "/ user / logout"], / / user logs out
} export default apilist;```

## 2. Introduce in main.js

``` Import HTTP from '@ / assets / JS / API'; / / import the interface list
Vue. Prototype. \$HTTP = http; / / mount the interface list to the global```

## 3. Use encapsulated methods in pages

``` let params = {
}

.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})```

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Vue encapsulates Axios - https://www.barben.cn/code/845.html
]]>
https://www.barben.cn/code/845.html/feed zero
Vue modularizes data, such as element form verification https://www.barben.cn/code/836.html https://www.barben.cn/code/836.html#respond Fri, 29 May 2020 06:08:26 +0000 https://www.barben.cn/?p=836 Why modularize data?

Today, when using the form component of element, I saw that the form verification rules were written under the data of the page, which was very messy.
So I wonder, can we put all the rules of form verification together for easy management? So I did these things

## Create a JS file

JS can be placed anywhere you want in the project.

Then, in this JS file, write your data, and use export default to expose the data, as follows:

` Export default your data`

## JS import this file

Use import.
You can introduce it on the page you need. Or you can introduce it in main. JS and mount it globally

``` import rules from './assets/js/rules'
Vue.prototype.\$rules = rules;```

## Use this data

You can directly call this. \$rules to read the content that you exposed in the JS file

` console.log(this.\$rules.loginRules);`

## summary

Whether you want to unify the management of data or methods, you can use this method to achieve, easy to find and modify later.

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Vue modularizes data, such as element form verification - https://www.barben.cn/code/836.html
]]>
https://www.barben.cn/code/836.html/feed zero
Element UI custom tabs style https://www.barben.cn/code/832.html https://www.barben.cn/code/832.html#respond Fri, 29 May 2020 02:18:14 +0000 https://www.barben.cn/?p=832

``` < style >
/ * to modify the style of a tab, be sure to delete the scoped * /
. El tabs after the style label__ item {
font-size: 18px !important;
padding: 10px 0 50px !important;
width: 120px !important;
}

.el-tabs__ active-bar {
width: 120px !important;
}
</style>```

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Element UI custom tabs style - https://www.barben.cn/code/832.html
]]>
https://www.barben.cn/code/832.html/feed zero
The CSS effect of mouse lengthening and extending around the line https://www.barben.cn/code/829.html https://www.barben.cn/code/829.html#respond Thu, 28 May 2020 14:51:37 +0000 https://www.barben.cn/?p=829 The effect is shown in the figure

``` < div class = "tab" >
; hey! Eight year ~
< div class = "tab class fir" > < / div >
< div class = "tab class sec" > < / div >
< / div >```
``` .tab{
display: inline-block;
line-height: 35px;
cursor: pointer;
transition: all 0.23s;
position: relative;
}

.tab:before,
.tab:after,
.tab-class-fir,
.tab-class-sec {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.23s;
}

.tab:hover {
color: #fff;
background-color: #a29bfe;
}

.tab:before {
border-top: 1px solid #000;
}

.tab:after {
border-bottom: 1px solid #000;
}

.tab-class-fir {
border-left: 1px solid #000;
}

.tab-class-sec {
border-right: 1px solid #000;
}

.tab:hover:before {
width: calc(100% + 10px);
left: -10px;
/* left: -5px; */
}

.tab:hover:after {
width: calc(100% + 10px);
left: 0;
/* left: -5px; */
}

.tab:hover > .tab-class-fir {
height: calc(100% + 10px);
top: 0;
/* top: -5px;  */
}

.tab:hover > .tab-class-sec {
height: calc(100% + 10px);
top: -10px;
/* top: -5px; */
}```

There are four hover sentences in the CSS code above. Try replacing their top or left with the comment out sentence?

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
CSS effect of mouse lengthening and extending around the line - https://www.barben.cn/code/829.html
]]>
https://www.barben.cn/code/829.html/feed zero