front end tricks 202002

[toc]

JavaScript 倒计时关闭页面-蚂蚁部落

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript"> 
var otimer;
var second=10;
function timer(){
otimer.innerHTML=second;
if(second>0){
second=second-1;
return false;
}
window.close();
}
window.onload=function(){
otimer=document.getElementById("timer");
setInterval(timer,1000);
}

以上代码实现了我们想要的功能,可以倒计时10秒之后关闭页面。

原理非常的简单,利用定时器setInterval()方法,不断调用timer()函数,每调用一次秒数减一,直到秒数变为零就执行window.close(),将页面关闭。同时每次调用函数都会将当前的剩余秒数写入div中,于是实现了倒计时效果。

相关阅读:

(1).innerHTML属性参阅JavaScript innerHTML一章节。

(2).setInterval()方法参阅JavaScript setInterval()一章节。

JavaScript 获取倒数第二个li元素-蚂蚁部落

1
2
3
4
5
6
7
8
<script type="text/javascript">
window.onload=function(){
var obox=document.getElementById("box");
var oshow=document.getElementById("show");
var lis=obox.getElementsByTagName("li");
oshow.innerHTML=lis[lis.length-2].innerHTML;
}
</script>

JavaScript 获取网页脚本代码内容-蚂蚁部落

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function evalscript(s){
if(s.indexOf('<script') == -1) return s;
var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
var arr = [];
while(arr = p.exec(s)){
var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
var arr1 = [];
arr1 = p1.exec(arr[0]);
if(arr1){
appendscript(arr1[1], '', arr1[2], arr1[3]);
}
else{
p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
arr1 = p1.exec(arr[0]);
appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
}
}
return s;
}

给出了核心代码,直接套用即可。

JavaScript 替换字符串全部指定内容-蚂蚁部落

将字符串中所有的字符”n”替换为字符”b”

1
2
3
4
5
String.prototype.replaceAll=function(str,repaceStr) {
return this.replace(new RegExp(str,"gmi"),repaceStr) // "gmi" ?
}
var str="antzone";
console.log(str.replaceAll("n","b"));

正则表达式删除字符串两端空格-蚂蚁部落

1
2
3
4
5
6
7
8
String.prototype.trim=function(){
var reExtraSpace=/^\s*(.*?)\s+$/;
return this.replace(reExtraSpace,"$1");
}
var str=" antzone ";
console.log(str.length);
var strNew=str.trim();
console.log(strNew.length);

CSS 紧邻下一个兄弟元素-蚂蚁部落

1
2
3
.antzone+li{
color:red;
}

代码将class属性值为antzone的li元素的紧邻下一个兄弟li元素的字体颜色设置为红色。

+选择器可以参阅CSS的相邻选择符(E+F)一章节。

CSS 获取所有紧邻兄弟元素-蚂蚁部落

1
2
3
.ant ~ li{
color:red;
}

将class属性值为”ant”元素后面的li元素字体颜色设置为红色,具体参阅CSS E~F 兄弟选择器一章节。

vue

引入json文件

import data from ‘static/h5Static.json’
此时,data已经被解析为字典

Vue对list的增删改查

删除

1
2
3
4
5
6
7
8
9
delete(id) { 
for (const v of this.list) {
if (v.id === id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.temp)
break
}
}
}

新增

1
this.list.push(car)

vue.js2.5基础入门视频教程-慕课网

1-1 课程介绍.mp4

vue官方文档

2-1 创建第一个Vue实例.mp4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello {{msg}}</h1>
</div>
<script>
new Vue({
//el确定挂载点
el: "#root",
data: {
msg: "world"
}
})
</script>
</body>
</html>

2-2 挂载点,模版与实例.mp4

挂载点、模板、实例之间的关系
vue中的el确定挂载点。
模板:挂载点里面的全部内容,可以直接写,也可以在Vue里面添加template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--    <div id="root">-->
<!-- <h1>hello {{msg}}</h1>-->
<!-- </div>-->
<div id="root">
</div>
<script>
new Vue({
//el确定挂载点
el: "#root",
template: '<h1>hello {{msg}}</h1>',
data: {
msg: "world"
}
})
</script>

2-3 Vue实例中的数据,事件和方法.mp4

插值表达式

a在 new Vue({data: {a: 123}}) 中定义

1
2
3
4
5
<h1>{{a}}</h1>
使用a-text也可实现同样的效果
<h1 a-text="a"></h1>

<h1 a-html="content"></h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="vue.js"></script>
</head>
<body>
<!--添加点击事件-->
<!--添加方法1-->
<div id="root" @click="handleClick">
<!--添加方法2-->
<!-- <div id="root" v-on:click="handleClick">-->
{{msg}}
</div>
<script>
new Vue({
//el确定挂载点
el: "#root",
data: {
msg: "world"
},
methods:{
//定义方法
handleClick: function(){
this.msg="hello";
}
}
})
</script>
</body>
</html>

2-4 Vue中的属性绑定和双向数据绑定.mp4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div title="this is title1">hello world</div>
<!--属性绑定-->
<!-- 方法1:-->
<!-- <div v-bind:title="title">hello world</div>-->
<!-- 方法2(缩写,更常用):-->
<div :title="title">hello world</div>
<!-- 双向数据绑定-->
<!-- 对比,单向::value -->
<!-- <input :value="content">-->
<!-- 对比,双向 v-model -->
<input v-model="content">
<div>{{content}}</div>
</div>
<script>
new Vue({
//el确定挂载点
el: "#root",
data: {
msg: "world",
title: "this is title2",
content: "content"
},
methods:{

}
})
</script>
</body>
</html>

2-5 Vue中的计算属性和侦听器.mp4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
姓: <input v-model="firstName">
名: <input v-model="lastName">
<div>{{firstName}} {{lastName}}</div>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0,
},
// 计算属性
computed:{
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
// 监听器
watch: {
lastName: function () {
this.count ++;
},
firstName: function () {
this.count ++;
}
},
methods:{
}
})
</script>
</body>
</html>

2-6 v-if, v-show与v-for指令.mp4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-if 删除或添加元素-->
<div v-if="show">hello world</div>
<!-- v-show 隐藏或显示元素-->
<div v-show="show">hello world</div>
<button @click="toggle">toggle</button>
<!-- v-for -->
<ul>
<li v-for="item of list">{{item}}</li>
<li v-for="(item, index) of list" key="index">{{index}} {{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
list: [1, 1, 3, 4, 5],
},
// 计算属性
computed:{
},
// 监听器
watch: {
},
methods:{
toggle: function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>

3-1 todolist功能开发.mp4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="thing">
<button @click="submit">submit</button>
</div>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
thing: "",
list: [],
},
// 计算属性
computed:{
},
// 监听器
watch: {
},
methods:{
submit: function () {
if (this.thing.trim()==="")
return;
this.list.push(this.thing);
// append 失败
// this.list.append(this.thing);
this.thing = "";
}
}
})
</script>
</body>
</html>

3-2 todolist组件拆分-1.5.mp4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="thing">
<button @click="submit">submit</button>
</div>
<ul>
<!-- 3. 属性传值 -->
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item">全局组件</todo-item>
<!-- <todo-item1>局部组件</todo-item1>-->
<!-- <li v-for="item of list">{{item}}</li>-->
</ul>
</div>
<script>
<!--全局组件-->
// 注册后即可直接在HTML中使用
Vue.component('todo-item', {
// 1. 定义属性
props: ['content'],
// 2. 使用属性
template: '<li>{{content}}</li>'
});
//局部组件
// 声明后,在Vue中添加components
// var todoItem = {
// template: '<li>item</li>'
// };

new Vue({
el: "#root",
// components: {
// 'todo-item1': todoItem,
// },
data: {
thing: "",
list: [],
},
// 计算属性
computed:{
},
// 监听器
watch: {
},
methods:{
submit: function () {
if (this.thing.trim()==="")
return;
this.list.push(this.thing);
// append 失败
// this.list.append(this.thing);
this.thing = "";
}
}
})
</script>
</body>
</html>

3-3 组件与实例的关系.mp4

组件也是实例, 也可以添加methods data等属性
new Vue(){} 实例中的template属性没有定义时,为挂载点下的HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--全局组件-->
// 注册后即可直接在HTML中使用
Vue.component('todo-item', {
// 1. 定义属性
props: ['content'],
// 2. 使用属性
template: '<li @click="itemClicked">{{content}}</li>',
methods: {
itemClicked: function () {
alert('clicked');
}
}
});

3-4 实现todolist的删除功能.mp4

组件之间通过属性传递值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="thing">
<button @click="submit">submit</button>
</div>
<ul>
<!-- @delete 或 v-on:delete 监听子组件-->
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>全局组件</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li @click="itemClicked">{{content}}</li>',
methods: {
itemClicked: function () {
// 子组件被点击,通知父组件删除
this.$emit("delete", this.index);
}
}
});

new Vue({
el: "#root",
// components: {
// 'todo-item1': todoItem,
// },
data: {
thing: "",
list: [],
},
computed:{
},
watch: {
},
methods:{
submit: function () {
if (this.thing.trim()==="")
return;
this.list.push(this.thing);
this.thing = "";
},
handleDelete: function (index) {
// delete 失败
// delete this.list[index]
// 从index开始删除1项
this.list.splice(index, 1);
}
}
})
</script>
</body>
</html>

4-1 vue-cli的简介与使用-1.5.mp4

https://cli.vuejs.org/zh/
npm install -g @vue/cli
npm install -g @vue/cli-init

1
2
3
4
5
6
7
8
9
10
11
12
13
➜  WebstormProjects vue init webpack todolist

? Project name todolist
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

To get started:

cd todolist
npm run dev

components: {App} // {‘App’: App} 键值相等可简写
单文件组件
app.vue
template script style 3个标签
template 下只可有一个元素

网页自动刷新

4-2 使用vue-cli开发TodoList.mp4

npm run dev 执行的命令定义在package.json scripts中

1
2


4-3 全局样式与局部样式.mp4

1
2
3
4
scoped : 局部的样式
<style scoped>

</style>

4-4 课程总结-1.5.mp4

1
2



:D 一言句子获取中...