<!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. JZ2440学习笔记之第一个裸机程序(Keil-MDK)

    CPU:S3C2440, ARM920T, Internal 4KB RAM, Support boot from NAND flash, 128MB for each bank. JZ2440:Me ...

  2. Django模板语言

    day66 2018-05-08 1. 内容回顾 1. 模板系统(字符串替换) 1. 语法 1. 变量相关: {{ name }},{{name|length}},{{name|default:&qu ...

  3. HDU 1560 DNA sequence（DNA序列）

    HDU 1560 DNA sequence(DNA序列) Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K  ...

  4. MapReduce实现PageRank算法（稀疏图法）

    前言 本文用Python编写代码,并通过hadoop streaming框架运行. 算法思想 下图是一个网络: 考虑转移矩阵是一个很多的稀疏矩阵,我们可以用稀疏矩阵的形式表示,我们把web图中的每一个 ...

  5. python cookbook 小结

    最近一直在看python cookbook.这本书主要讲的是python 语言的一些编程素材.正如它的名字一样,烹饪书.就好像再讲如何处理食材(各种类型的数据),然后再煮菜(算法).打个比方,煮菜随便 ...

  6. Django 应用程序 + 模型 + 基本数据访问

    如果你只是建造一个简单的web站点,那么可能你只需要一个app就可以了.如果是复杂的象 电子商务之类的Web站点,你可能需要把这些功能划分成不同的app,以便以后重用. 确实,你还可以不用创建app, ...

  7. UNDO -- Concept

     Undo data Records of the actions of transactions, primarily before they are committed. The database ...

  8. restful接口定义的几种方式

    GET (SELECT): Retrieve a specific Resource from the Server, or a listing of Resources.        #从服务器检 ...

  9. photoKit使用笔记

    @主要用到的类 1PHAssetCollection:图片资源数组(代表着相簿数组) 作用:获取相簿资源数组 示例代码: //获取相簿资源 PHFetchResult<PHAssetCollec ...

  10. 【Code Tools】Java微基准测试工具JMH之入门篇

    一.JMH是什么 JMH是一个Java工具,用于构建.运行和分析用Java和其他语言编写的以JVM为目标的 nano/micro/milli/macro 基准测试. 二.基本注意事项 1)运行JMH基 ...