写一个抽奖(点名回答问题)的扩展程序~

select_student

如何写一个扩展程序?

  • 1.设计图标

image

sketch设计稿下载地址如下:

https://github.com/zhaoolee/ProgrammingWithChrome/tree/master/pwc_source/select_student_sketch_design/

    1. 新建select_student文件夹(工程目录), 并在select_student内新建images文件夹,从设计稿导出5个尺寸的图标, 并放到images文件夹中, 新建js文件夹, 在js文件夹中新建index.js文件, 新建css文件夹, 在css文件夹中新建index.css文件, 在select_student文件夹中新建index.html文件,在select_student文件夹中新建manifest.json文件

    1. manifest.json中写入以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// manifest.json
{
"manifest_version": 2,
"name": "我们找个同学回答问题!",
"version": "1.0",
"description": "我们找个同学回答问题!",
"icons":{
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"

},
"browser_action":{
"default_icon":{
"19": "images/icon19.png",
"38": "images/icon38.png"

},
"default_title": "我们找个同学回答问题!",
"default_popup": "index.html"
}
}
    1. index.html中写入如下内容
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>找个同学回答问题</title>
<link rel="stylesheet" href="./css/index.css">
<script src="./js/index.js"></script>
</head>
<body>


<div class="content clearfix">

<div class="best_student" id="istudent">找同学回答问题!</div>

<div class="btn noselect" id = "ibtn">Start</div>


</div>

</body>
</html>
    1. 在index.js中写入如下内容(核心逻辑)
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
window.onload = function () {
function choose_student(){
var students = [
"坂田银时",
"旋涡鸣人",
"宇智波佐助",
"不摇碧莲_张楚岚",
"一叶知秋_叶修",
"空条承太郎",
"乔鲁诺乔巴纳",
"一方通行",
"卡卡罗特",
"贝吉塔"];
// 生成一个0到1的随机数
random_num = Math.random();
//将随机数扩大N倍 (N为数组的长度), 然后取整,获得随机的索引!
students_index = parseInt(random_num * (students.length));
return students[students_index];
}

//获取两个元素对象
var btn = document.getElementById("ibtn");
// 幸运儿(被抽中的学生)
var lucky_dog = document.getElementById("istudent");

// 切换按钮显示的文字
btn.onclick = (function () {
if(btn.innerHTML === "Stop"){
btn.innerHTML = "Start";
}else if(btn.innerHTML === "Start"){
btn.innerHTML = "Stop";
}
})

// 如果按钮显示的文字为Stop则疯狂换人, 如果显示的为Start则停止选择
setInterval(() => {
if(btn.innerHTML === "Stop"){
lucky_dog.innerHTML = choose_student();
}
}, 80);
};
  • 6.在index.css中写入如下内容
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
*{
margin: 0;
border: 0;

}

.clearfix:before, .clearfix:after{
content: "";
display: table;
}

.clearfix:after{

clear:both;
}

/*适配非主流浏览器(IE浏览器)*/

.clearfix{

zoom:1;

}


body{


}

.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.content{

width: 200px;
height: 120px;
background: #ea6f5a;
margin: 0 auto;
border: 1px solid white;
border-radius: 5px;
position: relative;

}

.best_student{

font-size: 25px;
line-height: 25px;
text-align: center;
color: white;
margin-top: 15px;

}

.btn{
font-size: 15px;
line-height: 22px;
text-align: center;
width: 80px;
height:22px;
margin: 0 auto;
background: white;
border-radius: 3px;
color: #346956;
position: absolute;
bottom: 20px;
left: 60px;
}

.btn:hover{
color: #ea6f5a;
}

.btn:active{
background: #f2f2f2;
}

Gif图中相关资源:

  • 进入chrome扩展页面

    1
    chrome://extensions
  • 完整程序已经上传到github, 下载地址如下:

https://github.com/zhaoolee/ProgrammingWithChrome/tree/master/pwc_source/select_student

编程小知识

  • Math.random() 函数返回一个浮点伪随机数, 在范围[0,1),也就是说,从0(包括0)往上,但是排除1, 可以实现将初始种子选择到随机数生成算法 MDN的专业解释链接

项目推广:

本文属于《用Chrome学编程》的一部分, 《用Chrome学编程》用Gif图展示Chrome的骚操作, 充分挖掘Chrome的编程潜力!开源地址: https://github.com/zhaoolee/ProgrammingWithChrome 如果你喜欢这个项目, 欢迎为项目加一颗🌟星 ~

0%