<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>留言板</title>

        <style>

            *{margin: 0;padding: 0;list-style: none;}

            .wapr{

                width: 300px;

                margin: 50px auto 0;

                color: white;

            }

            .wapr h2{

                            text-align: center;

                            height: 40px;font-size: 24px;font-weight: normal;line-height: 40px;background: #CD853F;}

            .wapr textarea{width: 298px;height: 60px;resize: none;}

            .wapr input{height: 40px;width: 300px;margin-bottom: 20px;}

            .wapr ul{

                width: 258px;

                padding: 0 20px;

                border-top: 1px solid #CD853F;

            }

            .wapr li{font-size: 14px;line-height: 28px;border-bottom: 1px solid #CD853F;color: black;}

            .wapr li:nth-of-type(2n){background: beige;}

        </style>

    </head>

    <body>

        <div class="wapr">

            <h2>留言板</h2>

            <textarea id="text"></textarea>

            <input type="button" value="发送" id="btn" />

            <ul id="list">

            </ul>

        </div>

    </body>

    <script type="text/javascript">

        window.onload=function(){

            var text=document.querySelector('#text')

            var btn=document.querySelector('#btn')

            var list=document.querySelector('#list')

            btn.onclick=function(){

                var val=text.value;

                if(text.value==""){

                    alert("请输入内容")

                }else{

                    list.innerHTML+='<li>'+val+'</li>';

                    text.value=""

                }

            }

        }

    </script>

</html>

javaScript简单的留言板的更多相关文章

  1. 用js做一个简单的留言板效果

    html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...

  2. NVelocity 实现简单的留言板

    留言版简单实现 -------------------------------------------------------------------------------------------- ...

  3. 用 Express4 写一个简单的留言板

    Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...

  4. JavaScript+IndexedDB实现留言板：客户端存储数据

    之前看到贴友有问:用js怎么实现留言板效果.当时也写了一个,但是没有实现数据存储:http://www.ido321.com/591.html 现在将之前的改写一下,原来的HTML布局不变,为了防止G ...

  5. php+mysql 最简单的留言板

    学完了记得动手操作. 測试地址(未过滤) <html> <body> <head><meta http-equiv="Content-Type&qu ...

  6. 简单的留言板（dom+正则练习）

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. vue2 简单的留言板

    没有写样式,只是写个功能 <template> <div class="headers"> <div class="form"&g ...

  8. 一个很简单的php留言板。。。。搭建在sae上的。。。

    我在sae上搭建了一个个人简历的页面: 有兴趣的可以访问  http://671coder.sinaapp.com/ 在做下面一个简单的留言板的时候,卡了我很久,虽然完全没用过php..但是还是最后勉 ...

  9. PHP实现简单留言板

    最近学习了下PHP基础,这里做一个简单的留言板,算是对PHP和MySQL的使用做一个整体的练习吧,不遇到问题总感觉学不到东西. 截图如下: 总结: 1>数据库的简单操作,数据库的增删改查: 2. ...

随机推荐

  1. 996.ICU与死亡因素

    昨天,我为996.ICU这场国际运动贡献了一颗星. 关于这件事,第一想到的就是我们工作的初心是为了更好的生活,工作扼杀生活的不良风气应该坚决抵制. 查了一下,近些年人类正常死亡原因中排名前三的原因为: ...

  2. Hadoop-Impala学习笔记之管理

    配置参数管理 待补充... 资源分配管理(Admission Control) Impala有资源池的概念,允许某些查询在特定的资源池执行,不过在白天不跑批/晚上不跑adhoc的DSS系统中,该机制并 ...

  3. 模板 RMQ问题ST表实现/单调队列

    RMQ (Range Minimum/Maximum Query)问题是指: 对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A中下标在i,j里的最小(大)值,R ...

  4. java解压多层目录中多个压缩文件和处理压缩文件中有内层目录的情况

    代码: package com.xiaobai; import java.io.File; import java.io.FileOutputStream; import java.io.IOExce ...

  5. week1总结

    week1总结 1. 开发上线工具流程以及规范类 规范: css注释:/* Comment Text*/ Css嵌套选择器:请不要让嵌套选择器的深度超过 3 层! 再说一遍: 永远不要嵌套 ID 选择 ...

  6. 必会SQL练习题

    ()表名:购物信息 购物人 商品名称 数量 A 甲 B 乙 C 丙 A 丁 B 丙 …… 给出所有购入商品为两种或两种以上的购物人记录 答:); ()表名:成绩表 姓名 课程 分数 张三 语文 张三 ...

  7. Manjaro安装后，应该做的操作，仅作为自己备份使用，如有参考不懂，请留言咨询，或Q609916691

    家目录下,通用文件夹名称中英文互转: --(1)中文->英文 export LANG=en_US.UTF-8 xdg-user-dirs-update --force --(2)英文->中 ...

  8. git 执行pull错误如何撤销

    比如你当前所在的空间是trunk,但是执行了git pull origin branches,这时需要回滚回去,可以用一下步骤: 1.运行git reflog命令查看你的历史变更记录,如下: 69fd ...

  9. vsphere client/web client 开启ESXi SSH服务

    ●vsphere client 开启ESXi SSH服务 1,从主机和群集列表选择主机esxi01.2,选择[配置]-->[软件]列表-->[安全配置文件]--> [服务],点击右上 ...

  10. LineRenderer实现一个画线组件

    using System; using UnityEngine; class UILine { GameObject targetObj; LineRenderer lineRenderer; //L ...