JS實現(xiàn)簡單留言板功能
更新時間：2022年08月25日 16:46:12 作者：popping_Sun
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)簡單留言板的具體代碼，供大家參考，具體內(nèi)容如下
言歸正傳，之前的案例相信大家都已經(jīng)完全弄清楚了，還記得我們之前統(tǒng)計字?jǐn)?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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS基于MSClass和setInterval實現(xiàn)ajax定時采集信息并滾動顯示的方法
這篇文章主要介紹了JS基于MSClass和setInterval實現(xiàn)ajax定時采集信息并滾動顯示的方法,涉及JavaScript頁面元素定時滾動操作及ajax調(diào)用實現(xiàn)技巧,需要的朋友可以參考下2016-04-04
本文為大家介紹下js獲取兄弟、父類等節(jié)點的方法，感興趣的朋友可以參考下2014-01-01
DIV是一個盒子模型通俗說就是一個容器，在布局過程中經(jīng)常會使用到這個標(biāo)簽，在本文大家將學(xué)會如何讓DIV可編輯、可拖動，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10
javascript createElement()創(chuàng)建input不能設(shè)置name屬性的解決方法
今天在使用document.createElement()動態(tài)創(chuàng)建input時，發(fā)現(xiàn)不能為其name賦值，以下是測試代碼。2009-10-10
這篇文章主要介紹了JavaScript中BOM對象原理與用法,,結(jié)合實例形式分析了javascript中BOM瀏覽器對象模型相關(guān)概念、原理、用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-07-07
梳理總結(jié)JavaScript的23個String方法
文章主要介紹了梳理總結(jié)JavaScript的23個String方法,JavaScript?中的String類型用于表示文本型的數(shù)據(jù)。它是由無符號整數(shù)值作為元素而組成的集合,更多詳細(xì)內(nèi)容需要的朋友可以參考一下2022-07-07
JavaScript組件焦點與頁內(nèi)錨點間傳值的方法
這篇文章主要介紹了JavaScript組件焦點與頁內(nèi)錨點間傳值的方法,涉及輸入框與錨點的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要給大家介紹了關(guān)于js獲取光標(biāo)位置的最新方法,獲取光標(biāo)位置,最常用的方法就是使用Selection對象和Range對象,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
目前隨著元宇宙概念的爆火，THREE技術(shù)已經(jīng)深入到了物聯(lián)網(wǎng)、VR、游戲、數(shù)據(jù)可視化等多個平臺，今天我們主要基于THREE實現(xiàn)一個三維的VR看房小項目，感興趣的朋友跟隨小編一起看看吧2022-10-10