<!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. 【题解】Luogu P5313 僕たちはひとつの光（[Ynoi2012]D2T2）

    原题传送门 lovelive好评 比赛时只拿到了60pts,还是自己太菜了 这题的思想实际有点像Luogu P3674 小清新人渣的本愿与Luogu P5071 [Ynoi2015]此时此刻的光辉 这 ...

  2. 【题解】Luogu P4121 [WC2005]双面棋盘

    原题传送门 这道题肥肠毒瘤qwqwq,我被卡了qwqwq 这题的正解好像是线段树+并查集,但由于我人丑常数大被卡成了70 #include <bits/stdc++.h> #define ...

  3. Vue 旅游网首页开发3 - Ajax获取首页数据

    之前的首页数据都是写死在页面上的,现在修改项目,使得数据通过ajax动态获取. 死胎了 ... 不想写了····

  4. 自制操作系统Antz(12)——承上启下

    我已经规范了系统代码风格,类似于按照linux分包,把各部分功能区分开了 Antz系统更新地址 Linux内核源码分析地址 Github项目地址 在之前的工作中,AntzOS已经从单调的界面,变得逐渐 ...

  5. 富文本编辑,xss攻击

    富文本编辑 KindEditor 在线HTML编辑器 http://kindeditor.net/doc.php 下载成功,解压放到项目中去 查看官方文档进行操作 xss攻击 XSS攻击全称跨站脚本攻 ...

  6. 工作流Activiti入门教程

    https://blog.csdn.net/chenweifu365/article/details/79032758/

  7. VFIO PF SRIOV IOMMU UIO概念解释、关联

    1.UIO出现的原因 第一,硬件设备可以根据功能分为网络设备,块设备,字符设备,或者根据与CPU相连的方式分为PCI设备,USB设备等.它们被不同的内核子系统支持.这些标准的设备的驱动编写较为容易而且 ...

  8. IISExpress配置使其能通过IP访问方法

    环境说明: 本机IP:192.168.2.100:Web端口:11843 步骤一 打开[我的文档]\IISExpress\config\applicationhost.config,找到下面的代码块 ...

  9. 【Core】当前 .NET SDK 不支持将 .NET Core 2.2 设置为目标。请将 .NET Core 2.1 或更低版本设置

    问题起因: 新的电脑,打开core2.2的项目时,因为没有安装2.2 sdk,项目编译失败 所以在选择目标框架下拉框选择安装其他目标框架 会跳转到官网下载sdk:https://dotnet.micr ...

  10. 如何只安装Postgresql client（以9.4 为例）

    Install the repository RPM: yum install https://download.postgresql.org/pub/repos/yum/9.4/redhat/rhe ...