效果图:
(我们老师要求比较奇特,要在下面加一个计时器。你们可以自行修改)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="comment-box">
<div class="comment-form">
<div class="header">新年好!留言板</div>
<hr>
<div>
<textarea name="" id="comment" cols="70" rows="5" placeholder="输入您的留言"></textarea>
</div>
<button id="btn-submit">留言</button>
</div>
<div>
<h4 class="header">留言列表</h4>
<ul id="comments">
</ul>
</div>
</div>
</div>
<form name="form1" class="clock">
<input type="button" id="showshow" value="showtime" onclick="get_time()" />
<input type="text" name="time" id="time"/>
<input type="button" id = "stopstop" value="stoptime" onclick="clearTimeout(timeID)" />
</form>
<script src="./script.js"></script>
</body>
</html>
style.css
@import url(https://fonts.googleapis.com/css?family=Roboto:400,600);
body {
font-family: "Roboto", sans-serif;
background: rgba(113, 182, 184, 0.97);
background-image: url(images/01.jpg);
background-size: cover;
height: 100%;
margin-bottom: 50px;
align-items: center;
}
.container {
display: flex;
justify-content: center;
}
.comment-box {
/* background: #fff; */
margin-top: 50px;
padding-top: 5px;
border-radius: 5px;
display: flex;
background: linear-gradient(#f69191,#f8e8b7);
flex-direction: column;
width: 75%;
}
button {
color: #fff;
float: right;
background: #b3382aeb;
margin-top: 12px;
margin-bottom: 12px;
margin-right: 26px;
padding: 12px 20px 12px 20px;
border-radius: 5px;
transition: all .2s ease;
}
button:hover {
background: #672417e7;
}
strong{
float: right;
}
.header {
margin: 15px 20px;
color: #1c1a1a;
text-align: center;
font-size: 27px;
font-weight: 600;
}
textarea {
margin: 5px 16px;
outline: none;
background: linear-gradient(#ffe8e8,#fff9ea);
border: 0;
padding: 10px;
border-radius: 5px;
width: 94%;
resize: none;
}
h4 {
margin: 10px 30px;
}
hr {
border: 0;
/* padding-top: 80px; */
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
span.date {
font-weight: 300;
font-size: 12px;
float: right;
margin-right: 10px;
}
.comment-box p {
margin: 0 30px 15px;
font-weight: 300;
color: #333;
background: #dad1d1ee;
padding: 30px 15px;
word-wrap: break-word;
}
@keyframes A{
to{
opacity: 2;
}
}
li {
/* background: linear-gradient(#f8ffc8,#ffe0c0); */
/* height: 50px; */
animation: A 10s ease forwards;
position: relative;
padding-left: 4px;
padding-top: 1px;
}
a {
float: right;
margin-right: 20px;
}
.clock {
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: row;
}
input {
height: 30px;
}
#showshow {
width: 75px;
height: 30px;
margin-top: 2px;
margin-left: 5px;
margin-right: 20px;
font-size: 14px;
font-weight: bold;
border-radius: 4px;
color: rgba(12, 12, 12, 0.915);
background-color:#b3382aeb;
border: 1px solid rgb(86, 86, 86);
}
button:hover{
background-color:#672417e7 ;
}
#stopstop {
width: 75px;
height: 30px;
margin-top: 2px;
margin-left: 20px;
margin-right: 20px;
font-size: 14px;
font-weight: bold;
border-radius: 4px;
color: rgba(12, 12, 12, 0.915);
background-color: #b3382aeb;
border: 1px solid rgb(86, 86, 86);
}
#time {
width: 80px;
border-radius: 4px;
text-align: center;
}
script.js
var btn = document.querySelector('#btn-submit');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function () {
if (text.value == '') {
alert('您没有输入内容');
return false;
}
else {
//1.创建元素
var li = document.createElement('li');
//2.添加元素 innerhtml能够识别html标签
//保证最新的留言在第一个
li.innerHTML = text.value + "<a href='javascript:;'>[删除]</a>" + "<hr>";
ul.insertBefore(li, ul.children[0]);
text.value = '';//将大文本框中已发布的留言删除
//删除元素 删除的是当前链接的父亲
var a = document.querySelectorAll('a');
for (var i = 0; i < a.length; i++) {
a[i].onclick = function () {
//node.removeChild(child) 删除的是li是当前a所在的li
//li 是 this.parengNode
ul.removeChild(this.parentNode);
}
}
}
}
function initsay() {
var li = document.createElement('li');
li.innerHTML = "新年快乐!!!" + "<a href='javascript:;'>[删除]</a>" + "<hr>";
ul.insertBefore(li, ul.children[0]);
var a = document.querySelectorAll('a');
for (var i = 0; i < a.length; i++) {
a[i].onclick = function () {
ul.removeChild(this.parentNode);
}
}
}
var flag = true;//判断时间是否停止
if (flag) {
var t = window.setInterval("showTime()", 1000);
}
function startTime() {
if (!flag) {
flag = true;
t = window.setInterval("showTime()", 1000);
}
}
function stopTime() {
if (flag) {
flag = false;
window.clearInterval(t);
}
}
function get_time() {
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();
var sec = today.getSeconds();
var timestr = "";
hour = hour < 10 ? "0" + hour : hour;
minute = minute < 10 ? "0" + minute : minute;
sec = sec < 10 ? "0" + sec : sec;
timestr = hour + ":" + minute + ":" + sec;
document.form1.time.value = timestr;
timeID = setTimeout("get_time()", 1000);
}
var snowmax = 50
var snowcolor = ["#FFDA65", "#00AADD", "#aaaacc", "#a0c4ff", "#ccccdd", "#caffbf", "#bbf7f9", "#ffc6ff", "#ffd6a5"]
var snowtype = ["Times", "Arial", "Verdana"]
var snowletter = "❉"
var sinkspeed = 0.8
var snowmaxsize = 35
var snowminsize = 10
var snowingzone = 1
var snow = []
var marginbottom
var marginright
var timer
var i_snow = 0
var x_mv = []
var crds = []
var lftrght = []
var browserinfos = navigator.userAgent
var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/)
var ns6 = document.getElementById && !document.all
var opera = browserinfos.match(/Opera/)
var browserok = ie5 || ns6 || opera
function randommaker(range) {
rand = Math.floor(range * Math.random())
return rand
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.scrollHeight
marginright = document.body.clientWidth
} else if (ns6) {
marginbottom = document.body.scrollHeight + 300
marginright = window.innerWidth
}
var snowsizerange = snowmaxsize - snowminsize
for (var i = 0; i <= snowmax; i++) {
crds[i] = 0;
lftrght[i] = Math.random() * 15;
x_mv[i] = 0.03 + Math.random() / 10;
snow[i] = document.getElementById("s" + i)
snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)]
snow[i].size = randommaker(snowsizerange) + snowminsize
snow[i].style.fontSize = snow[i].size + 'px';
snow[i].style.color = '#ffffff'
snow[i].style.zIndex = 1000
snow[i].sink = sinkspeed * snow[i].size / 5
if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) }
if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
snow[i].posy = randommaker(2 * marginbottom)
// snow[i].posy = randommaker(2*marginbottom-marginbottom-2*snow[i].size)
snow[i].style.left = snow[i].posx + 'px';
snow[i].style.top = snow[i].posy + 'px';
}
movesnow()
}
function movesnow() {
for (var i = 0; i <= snowmax; i++) {
crds[i] += x_mv[i];
snow[i].posy += snow[i].sink
snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + 'px';
snow[i].style.top = snow[i].posy + 'px';
if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])) {
if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) }
if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
snow[i].posy = 0
}
}
var timer = setTimeout("movesnow()", 50)
}
for (var i = 0; i <= snowmax; i++) {
document.write("<span id='s" + i + "' style='position:absolute;top:-" + snowmaxsize + "'>" + snowletter + "</span>")
}
if (browserok) {
window.onload = function () {
initsnow();
initsay();
}
}