用JavaScript添加一个计时器选图的hexo博客文章底栏插件

发表于 | 分类于 | 评论数： | 阅读次数：
一个很基础的DOM与计时器操作

源代码

首先放上代码，html部分还用了一些css但是测试了一下发现只有img的盒子大小和文字居中有效，其他不知道为啥没效，还有就是hexo还是next好像并不支持用img的width和height属性所以我才加了css
第一次写JavaScript脚本写的比较丑还多见谅
其中在52行的pic数组中可以放入你喜欢的图片

JavaScript部分

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
var click1_html;
var i=0;
var loop1;
var body;
var re1,re2,re3,re4,re5,re6,re7;
function click1()
{
  var dir=document.getElementById('one');
  click1_html=dir;
  var p=dir.parentNode;
  body=p;
  p.removeChild(dir);
  var n=document.createElement('h1');
  var n_text=document.createTextNode('点击选择按钮即可选择');
  re1=n;
  n.appendChild(n_text);
  p.appendChild(n);
  var eimg=document.createElement('img');
  re2=eimg;
  eimg.id='img1';
  eimg.width='800';
  eimg.height='600';
  p.appendChild(eimg);
  var ebut=document.createElement('button');
  ebut.type='button';
  ebut.id='two';
  var ebut_t=document.createTextNode('选择');
  re3=ebut;
  var nn=document.createElement('br');
  ebut.appendChild(ebut_t);
  p.appendChild(nn);
  p.appendChild(ebut);
  loop1=setInterval(changeImage,30);
  document.getElementById('two').addEventListener('click',click2,false);
}
function changeImage()
{
  var pic=[
    "https://i.loli.net/2019/02/22/5c6ff377c521d.jpg",
    "https://i.loli.net/2019/02/22/5c6ff377d0fc6.jpg",
    "https://i.loli.net/2019/02/22/5c6ff377d0d5f.png",
    "https://i.loli.net/2019/02/22/5c6ff377d1750.jpg",
    "https://i.loli.net/2019/02/22/5c6ff377d547f.jpg",
    "https://i.loli.net/2019/02/22/5c6ff377d563a.jpg",
    "https://i.loli.net/2019/02/22/5c6ff3780db68.jpg",
    "https://i.loli.net/2019/02/22/5c6ff3780f0f0.jpg",
    "https://i.loli.net/2019/02/22/5c6ff378167cb.jpeg",
    "https://i.loli.net/2019/02/22/5c6ff378178c8.jpeg",
    "https://i.loli.net/2019/02/22/5c6ff41dc472c.jpg",
    "https://i.loli.net/2019/02/22/5c6ff41dc6780.jpg",
    "https://i.loli.net/2019/02/22/5c6ff41dc87c9.jpg",
    "https://i.loli.net/2019/02/22/5c6ff41dc28c8.jpg",
    "https://i.loli.net/2019/02/22/5c6ff41dca549.jpg",
    "https://i.loli.net/2019/02/22/5c6ff41dcc4bb.jpg",
    "https://i.loli.net/2019/02/22/5c6ff41dd07c7.jpg",
    "https://i.loli.net/2019/02/22/5c6ff41dd2797.jpg",
    "https://i.loli.net/2019/02/22/5c6ff41dce646.jpg",
    "https://i.loli.net/2019/02/22/5c6ff41e61ebc.png"
  ];
  i++;
  if(i>=pic.length)
  i=0;
  document.getElementById('img1').src=pic[i];
}
function click2()
{
  clearInterval(loop1);
  body.removeChild(re3);
  var n1=document.createElement('button');
  var n2=document.createElement('button');
  var h1=document.createElement('h1');
  var n1_t=document.createTextNode('带回家！！！');
  var n2_t=document.createTextNode('我选择放弃');
  var h1_t=document.createTextNode('是否选择带回家？有一定的几率');
  re4=h1;
  n1.appendChild(n1_t);
  n2.appendChild(n2_t);
  n1.id='yes';
  n2.id='no';
  h1.appendChild(h1_t);
  body.appendChild(h1);
  body.appendChild(n1);
  body.appendChild(n2);
  n1.addEventListener('click',yes1,false);
  n2.addEventListener('click',no1,false);
}
var rand=Math.random();
function yes1()
{
  if(rand>=0.75)
  var now=alert('抱歉你并没有成功');
  else
  var now=alert('恭喜你成功了！！！');
  retry();
}
function no1()
{
  var now=alert('真是一个让人遗憾的选择啊！！！');
  retry();
}
function retry()
{
  body.removeChild(document.getElementById('yes'));
  body.removeChild(document.getElementById('no'));
  var h1=document.createElement('h1');
  var h1_t=document.createTextNode('是否要重新来过?');
  re5=h1;
  var n1=document.createElement('button');
  var n2=document.createElement('button');
  var n1_t=document.createTextNode('是');
  var n2_t=document.createTextNode('否');
  n1.appendChild(n1_t);
  n2.appendChild(n2_t);
  re6=n1;
  re7=n2;
  h1.appendChild(h1_t);
  body.appendChild(h1);
  body.appendChild(n1);
  body.appendChild(n2);
  n1.addEventListener('click',yes2,false);
  n2.addEventListener('click',no2,false);
}
function yes2()
{
  body.removeChild(re1);
  body.removeChild(re2);
  body.removeChild(re4);
  body.removeChild(re5);
  body.removeChild(re6);
  body.removeChild(re7);
  body.appendChild(click1_html);
}
function no2()
{
  alert('你仍然可以刷新进行重新选择');
  body.removeChild(re6);
  body.removeChild(re7);
}
document.getElementById('one').addEventListener('click',click1,false);

html部分

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" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>小游戏</title>
    <style>
      #img1
      {
        width: 800px;
        height: 600px;
        border-style: outset;
        border-color: orange;
      }
      body
      {
        border-style: groove;
        border-width: medium;
        border: orange;
      }
      #text1
      {
        text-align: center;
      }
      #one
      {
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="border">
    <h1 id="text1">---小游戏:要不要来选择一下自己可能的老婆？---</h1>
    <button type="button" id="one">开始</button>
    <script src="/js/src/game.js">
    </script>
    </div>
  </body>
</html>

如何放到每篇文章的最底下？

首先你需要在theme/layout目录下新建一个game.swig(当然名字随意)
然后把html部分抄上去并且在开头加上 

1
{% if theme.passage_end_tag.enabled %}

接着在同目录下的post.swig中找到id为post-expand的div下加入

1
2
3
4
5
<div >
  {% if not is_index %}
    {% include 'game.swig' %}
  {% endif %}
</div>

然后再找到theme/source/js/src新建一个game.js(同样名字可以随意)接着把所有的JavaScript代码复制进去即可
最后hexo clean&&hexo g –d部署到服务器就行了

就算是一分钱，也是对作者极大的支持
------ 本文结束 ------

版权声明

Baccano by baccano is licensed under a Creative Commons BY-NC-ND 4.0 International License.
由baccano创作并维护的Baccano博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于baccano 博客（ http://baccano.fun ），版权所有，侵权必究。

小游戏

---小游戏:要不要来选择一下自己可能的老婆？---

简易发声器

---简易的七键钢琴插件---

可以使用鼠标点击琴键也可以使用主键盘1-7或者小键盘的1-7来操作

那么现在开始吧

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
0%