其他分享
首页 > 其他分享> > js:留言板案例（tab头像切换，留言框，计数器等）

js:留言板案例（tab头像切换，留言框，计数器等）

作者：互联网

 图上是效果图；

图下为代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tops {
            width: 50%;
            height: 350px;
            margin: auto;
            padding: 20px;
            border: solid 3px red;
        }
        .tops img {
            width: 100px;
            height: 100px;
        }
        textarea {
            width: 90%;
            height: 150px;
        }
        .bottoms {
            width: 50%;
            margin: auto;
            padding: 20px;
            min-height: 200px;
            margin-top: 20px;
            border: solid 3px red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="tops">
            <div>
                <label>头像:</label>
               <img src="img/a.PNG" >
							 <img src="img/b.PNG" >
							 <img src="img/c.PNG" >
							 <img src="img/d.PNG" >
            </div>

            <div>
                <textarea maxlength="180" cols="30" rows="10" oninput="changeNum()"></textarea>
            </div>

            <div>
                <button type="button" onclick="addArr()">发表</button>
                <span>还可以输入<span class="maxLength"></span>个字,最多180个</span>
            </div>
        </div>

        <div class="bottoms">
            
        </div>
    </div>

    <script>
        var imgs = document.querySelectorAll('.tops img')
        var text = document.querySelector('textarea')
        var bots = document.querySelector('.bottoms')
        var maxNum = document.querySelector('.maxLength')
        // console.log(imgs)

        var imgSrc = '' // 创建一个空字符串放置选中的图片路径
        for(var i = 0;i <imgs.length;i++){
            imgs[i].onclick = function(){
                for(var j = 0; j<imgs.length;j++){
                    imgs[j].style.border = ''
                }
                this.style.border = 'solid 2px red'
                imgSrc = this.getAttribute('src')
            }
        }

        var arr = []
        // 本地存储
        if (localStorage.arr0908) {
            arr = JSON.parse(localStorage.arr0908)
            showArr(arr)
        }

        // 添加事件
        function addArr() {
            if (imgSrc && text.value) {
                var obj = {
                    imgSrc: imgSrc,
                    value: text.value,
                    time: getTime(),
                    id: new Date().getTime()
                }
    
                arr.push(obj)
    
                localStorage.arr0908 = JSON.stringify(arr)
    
                showArr(arr)

                clearStyle()

                changeNum()
            } else if (!imgSrc) {
                alert('请选择头像')
            } else if (!text.value) {
                alert('请输入内容')
            } else {
                alert('未知错误')
            }
        }

        // 获取一个指定格式时间
        function getTime() {
            var time = new Date()
            var str = time.toLocaleString()
            return str
        }

        // 重置页面
        function clearStyle() {
            text.value = ''
            for(var j = 0; j<imgs.length;j++){
                imgs[j].style.border = ''
            }
            changeNum()
        }

        // 渲染
        function showArr(arrFn) {
            var str = ''
            for (var i = 0; i < arrFn.length; i++) {
                str += `
                    <div style='display: flex'>
                        <div style='width: 60px;'>
                            <img src="${arrFn[i].imgSrc}" style='width: 50px;height: 50px;'>
                        </div>
                        <div style='flex: 1;line-height: 50px;'>
                            ${arrFn[i].value}
                        </div>
                        <div style='width: 60px;line-height: 50px;'>
                            <button type="button" onclick="delData(${arrFn[i].id})">删除</button>
                        </div>
                    </div>
                    <div style='border-bottom: solid 3px #eee;margin: 5px 0;'>
                        ${arrFn[i].time}
                    </div>
                `
            }
            bots.innerHTML = str
        }

        // 删除
        function delData(id) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].id == id) {
                    arr.splice(i, 1)
                }
            }
            localStorage.arr0908 = JSON.stringify(arr)
            showArr(arr)
        }

        // 实时文字监听
        var maxLength = text.getAttribute('maxLength')
        maxNum.innerHTML = maxLength
        function changeNum() {
            var num = maxLength - text.value.length
            if (num <= 0) {
                num = 0
            }
            maxNum.innerHTML = num
        }
        
    </script>
</body>
</html>

标签：arr,document,js,width,tab,maxLength,var,height,留言板
来源： https://blog.csdn.net/weixin_59519449/article/details/120219235