簡易留言板（還有一些小bug，修復ing...）

時間 2019-11-12

標籤簡易留言板還有些小 bug 修復 ing 简体版

原文原文鏈接

<!DOCTYPE html>javascript

<html>css

<head>html

<title></title>app

body {url

width: 100%;spa

height: 100%;視頻

background-image: url("img/la.jpg");htm

/*background-repeat: no-repeat;*/

}

a {

text-decoration: none;

}

.wrap {

width: 600px;

height: 200px;

border: 1px solid black;

border-radius: 5px;

margin: 0 auto;

}

.top {

height: 40px;

width: 100%;

overflow: hidden;

}

.top-left {

float: left;

width: 80px;

height: 100%;

line-height: 40px;

text-indent: 2em;

color: orange;

}

.top-right {

float: right;

width: 60%;

height: 100%;

text-align: right;

padding-right: 20px;

line-height: 40px;

}

.middle {

width: 100%;

height: 100px;

}

.middle>textarea {

width: 570px;

height: 90px;

margin-left: 13px;

border: 1px solid darkgray;

resize: none;

}

.bottom {

width: 100%;

height: 60px;

overflow: hidden;

}

.bottom-left {

height: 100%;

width: 350px;

float: left;

}

.bottom-left>div {

float: left;

width: 70px;

line-height: 50px;

text-align: center;

}

.bottom-left>div:hover {

color: orange;

}

.bottom-right {

float: right;

width: 80px;

height: 40px;

background-color: orange;

color: white;

border-radius: 5px;

margin-right: 10px;

line-height: 40px;

text-align: center;

font-size: 20px;

margin-top: 6px;

}

.message {

width: 600px;

height: 1000px;

border: 1px solid darkgray;

margin: 0 auto;

border-radius: 5px;

}

h1 {

/*width: 200px;*/

/*margin: 0 auto;*/

text-align: center;

}

.big {

width: 580px;

border: 1px solid #CCCCCC;

border-radius: 5px;

margin-left: 9px;

margin-top: 10px;

position: relative;

}

.name {

width: 100px;

height: 30px;

line-height: 30px;

padding-left: 10px;

font-weight: bold;

}

.mes {

width: 560px;

padding-left: 10px;

padding-right: 10px;

line-height: 20px;

}

.date {

width: 200px;

height: 30px;

line-height: 30px;

padding-left: 10px;

color: gainsboro;

}

.close {

width: 30px;

height: 30px;

position: absolute;

top: 10px;

right: -10px;

}

</style>

</head>

<body>

<h1>簡易留言板</h1>

LOGO

</div>

<a href="####" id="a">點擊領取紅包</a>

</div>

</div>

</div>

發佈

</div>

</div>

// 建立div的函數

function createDiv(c) {

var div = document.createElement("div");

div.setAttribute("class", c);

return div;

}

var message = document.getElementsByClassName("message")[0];

var textValue = document.querySelector(".middle>textarea");

var topRight = document.querySelector(".top-right");

var textLimit = 140;

textValue.onfocus = function() {

topRight.innerHTML = "還能夠輸入" + textLimit + "字";

topRight.style.color = "#cccccc";

}

textValue.onkeyup = function() {

textLimit = 140 - textValue.value.length;

topRight.innerHTML = "還能夠輸入" + textLimit + "字";

if (textLimit < 0) {

topRight.innerHTML = "超出" + (textValue.value.length - 140) + "字，請修改";

}

function fadu() {

var big = createDiv("big");

var name1 = createDiv("name");

name1.innerHTML = "發佈者";

var mes = createDiv("mes");

mes.innerHTML = textValue.value;

var now = new Date();

var month = now.getMonth() + 1;

var day = now.getDate();

var hour = now.getHours();

var mins = now.getMinutes();

var second = now.getSeconds();

var date1 = createDiv("date");

if (mins < 10) {

mins = "0" + mins;

}

if (second < 10) {

second = "0" + second;

}

date1.innerHTML = month + "月" + day + "日" + hour + ":" + mins + ":" + second + "發佈";

var close = createDiv("close");

close.innerHTML = "x";

// 刪除

close.onclick = function() {

message.removeChild(big);

}

big.appendChild(name1);

big.appendChild(mes);

big.appendChild(date1);

big.appendChild(close);

message.insertBefore(big, message.firstElementChild);

}

var oA = document.getElementById("a");

function func() {

topRight.innerHTML = "點擊領取紅包";

topRight.style.color = "blue";

if (textValue.value == "") {

alert("發佈內容爲空，請從新輸入");

}else if(textLimit < 0){

alert("內容已超出，請檢查一下。");

}else {

fadu();

textValue.value = "";

textLimit = 140; // 每次發佈完一條

}

</script>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。