简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 留言板的制作
Blogger Information
Blog 12
fans 1
comment 0
visits 9801
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
留言板的制作
简简单单的博客
Original
626 people have browsed it

制作留言版之前需要了解的一些东西，比如事件的属性

事件的属性包括：事件捕获、时间冒泡阶段

举例一个事件点击效果：

实例

<button id="btn" class="red" onclick="alert(this.nodeName)">点击我试试看</button>

运行实例 »

点击 "运行实例" 按钮查看在线实例

留言板

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
</head>
<body>
<label for="comment">请留言</label>
<input type="text" id="comment" autofocus>
<ul id="list">
</ul>
<script>
    var comment = document.getElementById('comment');
    var list = document.getElementById('list');
    comment.addEventListener('keypress',addComment,false);
    function addComment(event) {
        if(event.key === 'Enter'){
            var item = document.createElement('li');
            item.innerText = comment.value;
             if (list.childElementCount === 0) {
                    list.appendChild(item);
                } else {
                    list.insertBefore(item, list.firstElementChild);
                }
                comment.value = null;
        }
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实



Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！