HTML+CSS+JS案例展示(留言板)

参考来源:

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

网页GitHub地址如下:(若加载较慢建议刷新后耐心等待一会~)

js_bbs

主要功能:

  1. 未输入内容时点击发送按钮,会弹出对话框提示;
  2. 输入内容后点击发送按钮,文本内容会显示在下方区域。

网页代码如下:

HTML:




    
    
    
    js_bbs
    


    

留言板:

评论区:

    CSS:

    textarea {
        outline: none;
        margin: 0 0 10px 100px;
    }
    ul {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
        margin: 10px 0 10px 100px;
        font-size: 16px;
        color: pink;
    }
    

    JS:

    var ul = document.querySelector('ul');
    var text = document.querySelector('textarea');
    var btn = document.querySelector('button')
    btn.onclick = function() {
        if (text.value == '') {
            alert('您没有输入内容');
            return false;
        }else {
            var li = document.createElement('li');
            li.innerHTML = text.value;
            ul.insertBefore(li,ul.children[0]);
        }
    }

    你可能感兴趣的:(HTML+CSS+JS,javascript,html,css)