forked from Faucet7/Tic.scut.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (121 loc) · 7.66 KB
/
index.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
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
140
141
142
143
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华南理工腾讯创新创业俱乐部官方网站</title>
<link rel="stylesheet" href="./style.css">
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
</head>
<script src="test1.js" defer></script>
<body>
<h1 class="title">华南理工腾讯创新创业俱乐部官方网站</h1>
<h3>添加了钟✌✌✌ ---- 587! 23.11.15</h3>
<div style="display: flex;justify-content: center;margin: 0 16px;">
<iframe src="https://0x587.github.io/clock-of-clock/" id="clock-iframe"
style="display: block; width: 60vw;height: 40vw;background-color: #FFF;border-radius: 18px;"></iframe>
<div style="display: none;font-size: 24px;" id="clock-hide">
<p>竖屏没有钟！竖屏没有钟！</p>
<p>竖屏没有钟！竖屏没有钟！</p>
<p>竖屏没有钟！竖屏没有钟！</p>
<p>竖屏没有钟！竖屏没有钟！</p>
<p>竖屏没有钟！竖屏没有钟！</p>
<p>竖屏没有钟！竖屏没有钟！</p>
</div>
<script>
function onWindowSizeChange() {
var width = window.innerWidth;
var height = window.innerHeight;
iframe = document.getElementById('clock-iframe');
iframeHide = document.getElementById('clock-hide');
if (width < height) {
iframe.style.display = 'none';
iframeHide.style.display = 'block';
}
else {
iframe.style.display = 'block';
iframeHide.style.display = 'none';
}
}
onWindowSizeChange();
window.addEventListener('resize', onWindowSizeChange);
</script>
</div>
<h3>添加了标题 ----71綦 23.11.13</h3>
<h2 style="color: green;">Easy</h2>
<h3>添加css文件并将标题文字居中 ----沈廷睿 23.11.13</h3>
<h4 style="color: green;">[已解决] 没有实现css中样式和标题标签的单独绑定（指定了所有的h1标签） </h4>
<h3>在css文件中 将标题颜色改为荧光绿色 ----刘佳涛 23.11.14</h3>
<h4 style="color: green;">[已解决] css代码报错了 你这是在html里的写法 在css里面不用加标签 直接指定就行了 而且上面都已经指定title的样式了 可以直接在他那里面添加color字段
</h4>
<h3>在css文件中 将背景颜色改为黑色 除标题外文字改为白色 ----陈诗懿 23.11.14</h3>
<h4 style="color: green;">[已解决] 指定整个body为白色没问题 只是要注意样式指定的优先级问题
</h4>
<h3>在css文件中 所有文字改成一个像素风的字体 字体文件自己找 ----王子鑫 23.11.14</h3>
<h4 style="color: green;">[已解决] 完美 字体文件整理的习惯也很好
</h4>
<h3>在这条下面插入几张原神的图片 ----牛瑞雨 23.11.14</h3>
<img src="./assets/audios/images/image1.jpg" width="200px" alt="不是原神" />
<img src="./assets/audios/images/image2.png" width="200px" alt="不是原神" />
<img src="./assets/audios/images/image3.jpg" width="200px" alt="原神" />
<img src="./assets/audios/images/image4.jpg" width="200px" alt="原神" />
<h4 style="color: green;">[已解决] img标签写错了呀 看一下菜鸟教程？ 另外能不能再插入一张本地的图片
</h4>
<h3>在这条下面插入一条音频 要求音乐和原神相关 请自行查找 ----薛景妍 23.11.14</h3>
<audio src="./assets/audios/nian.mp3" controls></audio>
<h4 style="color: green;">[已解决] 完美 媒体文件整理的习惯也很好
</h4>
<h3>在这条下面插入一个文本框 可以输入文字的那种 不输入时的占位字符为：“想玩原神” ----陈锴亮 23.11.14</h3>
<input type="text" class="textbox" placeholder="想玩原神">
<h4 style="color: green;">[已解决] 完成的没问题！等js来接一下 </h4>
<h2 style="color: gray;">Normal</h2>
<h3>添加几个按钮/开关 并在后面添加随机数字 ----李岳烁 23.11.14</h3>
<button onclick="addone('num1')" class="nes-btn is-primary" value="一个按钮" name="button1"
style="width: 160px;">+1</button>
<input type="textbox" id="num1" value=><br>
<button onclick="changecolor()" class="nes-btn is-success"value="另一个按钮" name="button2" style="width: 160px;">改变颜色</button>
<input type="textbox" id="num2" value=><br>
<button class="nes-btn is-error" value="最后一个按钮" name="button3" style="width: 160px;">切换正负</button>
<input type="textbox" id="num3" value=>
<script>
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var num3 = document.getElementById("num3");
num1.value = Math.floor(Math.random() * 100);
num2.value = Math.floor(Math.random() * 100);
num3.value = Math.floor(Math.random() * 100);
</script>
<h4 style="color: green;">[已解决] 完美 而且真的写了随机数 </h4>
<h3>创建js文件并给按钮添加点击效果 要求点击后 随机数字加一 ----胡昱之 23.11.15</h3>
<h4 style="color: green;">[已解决] 奈斯 相当不错 </h4>
<h3>在js中给按钮添加点击效果 要求点击后 随机数字改变颜色 ----xxx 23.11.xx</h3>
<h3>在js中给开关添加点击效果 要求点击后 随机数字切换正负 ----xxx 23.11.xx</h3>
<h3 id="hyperlink">将这个需求变为一个超链接 要求这个链接可以在js中随意配置 默认链接为原神的官网 ----曹雪宸小 & xxx 23.11.15</h3>
<script>
var hyperlink = document.getElementById('hyperlink');
hyperlink.innerHTML = '<a href="https://genshin.mihoyo.com/">将这个需求变为一个超链接 要求这个链接可以在js中随意配置 默认链接为原神的官网 ----曹雪宸小 & xxx 23.11.15</a>';
</script>
<h4 style="color: red;">[待解决] 链接没问题 但是后面这段写进js里比较好？ 而且这种实现方式 实质上和直接href是一样的
</h4>
<h3>在js中给这段文字添加效果 要求鼠标悬停在文字上面时 文字字号变大 移开后还原 ----xxx 23.11.xx</h3>
<h2 style="color: red;">Hard</h2>
<h3>在js中请求一些有趣的api 并实现相应的效果 api可以自己找 这里推荐几个： https://zhuanlan.zhihu.com/p/616708019 ----hy 23.11.14
</h3>
<div class="nes-container with-title is-centered is-dark">
<p class="nes-text">添加了nes-css库,大家可以访问<a target="_blank"
href="https://nostalgic-css.github.io/NES.css/#">nes-css官网</a>查看更多
</p>
<p class="nes-text is-primary">大家继续补充 </p>
</div>
<h3>用css给按钮添加一些美化效果 比如点击动画 可以模仿ios的一些按钮组件 ----hy 23.11.14</h3>
<button type="button" class="nes-btn is-primary">Primary</button>
<button type="button" class="nes-btn is-success">Success</button>
<button type="button" class="nes-btn is-warning">Warning</button>
<button type="button" class="nes-btn is-error">Error</button>
<button type="button" class="nes-btn is-disabled">Disabled</button>
<h3>在js中 使上面的文本框中输入的文字 在点击回车之后插入到这条的下面（多次插入 ----xxx 23.11.xx</h3>
<h3>实现点击图片放大查看 ----xxx 23.11.xx</h3>
<h2 style="color: blue;">还有高手？</h2>
<h3>自己提出需求 自己解决 ----xxx 23.11.xx</h3>
</body>
</html>