<!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. mysql配置外部允许外部连接

    1. 登录到mysql mysql -u root -p 2.进入到mysql 库中 use mysql 3.执行语句 update user set host=‘%’ where user=‘roo ...

  2. list,tuple,dict,set的增删改查

    数据结构 list tuple dict set 增 append insert    d['key']=value  add 删 pop pop(0)    d.pop('name') pop re ...

  3. Java基础语法(二)之流程控制语句

    流程控制语句是用来控制程序中各语句执行顺序的语句,可以把语句组合成能完成一定功能的小逻辑模块 .控制语句分为三类:顺序,选择和循环. “顺序结构”代表”先执行a,再执行b”的逻辑.比如,先找个女朋友, ...

  4. 自动化pip安装

    其实正确安装python3.6后,在安装目录里就有pip.exe文件,只不过用的时候,要进入pip的安装目录下进行安装numpy等. 如进入这个目录, D:\Program Files\Python\ ...

  5. 读书笔记--《编写高质量代码：改善Python程序的91个建议》

      第一章 引论 建议写Pythonic式的代码,我理解为充分利用pythonAPI,用最简洁方式写出代码 1.两个变量交换: a, b = b, a 2.翻转list: a = [1, 2, 3, ...

  6. OpenVPN部署，实现访问云服务器的内网

    本教程不描述如何FQ 一.OpenVPN服务端部署 $ yum -y install net-tools lzo lzo-devel openssl-devel pam-devel gcc gcc-c ...

  7. css浮动与清除浮动

    css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...

  8. windows主用python3 个别程序使用python2的方法

    原始需求: 平时执行命令都默认用python3,遇到个别程序需要python2的时候也能用python2. 实现: 1.先装python3,添加环境变量,这时在cmd里输入python可以显示出是版本 ...

  9. Windows下安装Anaconda

    Windows下安装Anaconda   Anaconda介绍 Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.因为包含了大量的科学 ...

  10. vmstat命令参数介绍

    vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...