JS實現(xiàn)簡單留言板功能
更新時間：2022年08月25日 16:46:12 作者：popping_Sun
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單留言板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)簡單留言板的具體代碼，供大家參考，具體內(nèi)容如下
言歸正傳，之前的案例相信大家都已經(jīng)完全弄清楚了，還記得我們之前統(tǒng)計字數(shù)的那個案例嗎？忘記的可以再去翻閱一下，今天就是在這個方法的基礎(chǔ)上，把它變成一個留言版，就像我們之前的評論一樣，是不是很期待呢？先來看一下效果圖
輸入昵稱，選擇頭像，輸入留言，點擊廣播就能夠在下面顯示出來了，是不是很nice呢，具體怎么實現(xiàn)的呢，我們來看代碼
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>留言板</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }
? ? ? ? #box{
? ? ? ? ? ? width: 50%;
? ? ? ? ? ? border: 4px solid olivedrab;
? ? ? ? ? ? padding: 10px 30px;
? ? ? ? ? ? height: 800px;
? ? ? ? }
? ? ? ? #box img{
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? margin: 10px 0;
? ? ? ? }
? ? ? ? #tex{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? margin: 10px 0;
? ? ? ? }
? ? ? ? .count{
? ? ? ? ? ? float: right;
? ? ? ? ? ? color: silver;
? ? ? ? }
? ? ? ? #btn{
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 25px;
? ? ? ? ? ? background: orange;
? ? ? ? ? ? color: white;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? outline: none;
? ? ? ? ? ? border: 0px;
? ? ? ? ? ? line-height: 25px;
? ? ? ? }
? ? ? ? #content{
? ? ? ? ? ? margin: 50px 0;
? ? ? ? }
? ? ? ? .list{
? ? ? ? ? ? padding: 5px;
? ? ? ? ? ? height: 80px;
? ? ? ? ? ? border-bottom: 1px solid black;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? .list button{
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? right: 0;
? ? ? ? ? ? top: 40px;
? ? ? ? ? ? background: orange;
? ? ? ? ? ? color: white;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? outline: none;
? ? ? ? ? ? border: 0px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="box">
? ? ? ? 昵稱：<input type="text" id="userName"><br/>
? ? ? ? 請選擇頭像<span>
? ? ? ? ? ? <img src = "imgs/01.jpg" align="absmiddle"/>
? ? ? ? ? ? <img src = "imgs/02.jpg" align="absmiddle"/>
? ? ? ? ? ? <img src = "imgs/03.jpg" align="absmiddle"/>
? ? ? ? ? ? <img src = "imgs/04.jpg" align="absmiddle"/>
? ? ? ? </span>
? ? ? ? <textarea name="" id="tex" cols="30" rows="10" maxlength="150" placeholder="請輸入留言"></textarea>
? ? ? ? <div class="count">還可以輸入
? ? ? ? ? ? <span id="left">150</span>個字
? ? ? ? ? ? <button id="btn">廣播</button>
? ? ? ? </div>
? ? ? ? <div id="content">
? ? ? ? ? ? <!-- <div id="list">
? ? ? ? ? ? ?<span>昵稱</span>
? ? ? ? ? ? ?<span>內(nèi)容</span>
? ? ? ? ? ? ?<div>時間</div>
? ? ? ? ? ? ?<button>刪除</button>
? ? ? ? </div> -->
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? //頁面加載渲染
? ? ? ? window.onload = function(){
? ? ? ? ? ? if(localStorage.arr1113){
? ? ? ? ? ? ? ? arr = JSON.parse(localStorage.arr1113)
? ? ? ? ? ? ? ? show(arr)
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? arr = []
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //獲取Dom元素
? ? ? ? var userName = document.querySelector("#userName")
? ? ? ? var btn = document.getElementById("btn")
? ? ? ? var left = document.getElementById("left")
? ? ? ? var txt = document.getElementById("tex")
? ? ? ? //計算剩余字符
? ? ? ? txt.oninput = function(){
? ? ? ? ? ? var len = txt.maxLength-txt.value.length
? ? ? ? ? ? left.innerHTML = len
? ? ? ? }
? ? ? ? //選擇圖片
? ? ? ? var pic = document.querySelectorAll("#box img")
? ? ? ? var src = ''
? ? ? ? for(var i = 0;i<pic.length;i++){
? ? ? ? ? ? pic[i].onclick = function(){
? ? ? ? ? ? ? ? for(var j = 0;j<pic.length;j++){
? ? ? ? ? ? ? ? ? ? pic[j].style.border =""
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.style.border = "1px solid red"
? ? ? ? ? ? ? ? src = this.src
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //點擊廣播
? ? ? ? var arr = []
? ? ? ? btn.onclick = function(){
? ? ? ? ? ? if(userName.value==''||txt.value ==''){
? ? ? ? ? ? ? ? alert("請輸入昵稱和留言")
? ? ? ? ? ? }else{
? ? ? ? ? ? var obj = {
? ? ? ? ? ? ? ? id:+new Date(),
? ? ? ? ? ? ? ? name:userName.value,
? ? ? ? ? ? ? ? content:txt.value,
? ? ? ? ? ? ? ? time:timer(),
? ? ? ? ? ? ? ? src:src
? ? ? ? ? ? }
? ? ? ? ? ? arr.unshift(obj)
? ? ? ? ? ? userName.value = ''
? ? ? ? ? ? txt.value = ''
? ? ? ? ? ? localStorage.arr1113 = JSON.stringify(arr)
? ? ? ? ? ? show(arr)
? ? ? ? }
? ? ? ? }
? ? ? ? //渲染函數(shù)
? ? ? ? function show(arr){
? ? ? ? ? ? var str = ''
? ? ? ? ? ? var contents = document.getElementById("content")
? ? ? ? ? ? contents.innerHTML = ''
? ? ? ? ? ? for(var i = 0;i<arr.length;i++){
? ? ? ? ? ? ? ? str +=`
? ? ? ? ? ? ? ? <div class = "list">
? ? ? ? ? ? ? ? <img src = "${arr[i].src}" align="absmiddle">
? ? ? ? ? ? ? ? <span>${arr[i].name} </span>
? ? ? ? ? ? ? ? <span>${arr[i].content}</span>
? ? ? ? ? ? ? ? <br/>
? ? ? ? ? ? ? ? <span>${arr[i].time}</span>
? ? ? ? ? ? ? ? <button οnclick="del(${arr[i].id})">刪除</button>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? `
? ? ? ? ? ? }
? ? ? ? ? ? contents.innerHTML = str
? ? ? ? }
? ? ? ? //刪除函數(shù)
? ? ? ? function del(id){
? ? ? ? ? ? arr.forEach(function(ele,index){
? ? ? ? ? ? ? ? if(id ==arr[index].id){
? ? ? ? ? ? ? ? ? ? ?arr.splice(index,1)
? ? ? ? ? ? ? ? ? ? ?show(arr)
? ? ? ? ? ? ? ? ? ? ?localStorage.arr1113 = JSON.stringify(arr)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? //獲取時間
? ? ? ? function timer(){
? ? ? ? ? ? var now = new Date()
? ? ? ? ? ? var month = now.getMonth()+1
? ? ? ? ? ? var day = now.getDate()
? ? ? ? ? ? var hours = now.getHours()
? ? ? ? ? ? var min = now.getMinutes()
? ? ? ? ? ? var result = check(month)+"月"+check(day)+"日 ?"+check(hours)+":"+check(min)
? ? ? ? ? ? return result
? ? ? ? }
? ? ? ? //檢查時間少于10前面添上0
? ? ? ? function check(n){
? ? ? ? ? ? n = n<10 ? "0"+n : n
? ? ? ? ? ? return n
? ? ? ? }
? ? ? ? //移入移出效果函數(shù)----利用事件委托處理
? ? ? ? var contents = document.getElementById("content")
? ? ? ? ? ? contents.onmouseover = function(event){
? ? ? ? ? ? ? ? var enent = event || window.event
? ? ? ? ? ? ? ? var target = event.target || window.srcElement
? ? ? ? ? ? ? ? if(target.nodeName.toLowerCase() == "div"){
? ? ? ? ? ? ? ? ? ? target.style.background = "gray"
? ? ? ? ? ? ? ? ? ? var delBtn = target.lastElementChild
? ? ? ? ? ? ? ? ? ? delBtn.style.display = "block"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? contents.onmouseout = function(event){
? ? ? ? ? ? ? ? var enent = event || window.event
? ? ? ? ? ? ? ? var target = event.target || window.srcElement
? ? ? ? ? ? ? ? if(target.nodeName.toLowerCase() == "div"){
? ? ? ? ? ? ? ? ? ? target.style.background = ""
? ? ? ? ? ? ? ? ? ? var delBtn = target.lastElementChild
? ? ? ? ? ? ? ? ? ? delBtn.style.display = ""
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? </script>
</body>
</html>主要是Js的代碼，css樣式可以按照自己的想法去操作，打造屬于自己的style
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細匯總了常用原生JS兼容性寫法，感興趣的小伙伴們可以參考一下2016-04-04
本文為大家講述下如何使用jsJS判斷是否安裝flash player及版本，下面的處理代碼或許對大家有所幫助，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
npm?install報錯Error:EPERM:operation?not?permitted,rename解決
這篇文章主要給大家介紹了關(guān)于npm?install報錯Error:EPERM:operation?not?permitted,rename的解決辦法,文中介紹了可能遇到的多種原因以及解決辦法,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)點擊動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
JavaScript中從setTimeout與setInterval到AJAX異步
這篇文章主要介紹了JavaScript中從setTimeout與setInterval到AJAX異步,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要為大家介紹了style-loader為什么要使用pitch方法原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
下面小編就為大家分享一篇淺談js獲取ModelAndView值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了BootStrap表單的制作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了JavaScript生成一個不重復的ID的方法示例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了JavaScript中的flat()和flatMap()方法,解釋了它們的功能、使用方法和應用場景,flat()用于將嵌套數(shù)組壓平,而flatMap()則是在壓平的同時對每個元素進行轉(zhuǎn)換,需要的朋友可以參考下2024-11-11