<!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. Java 新建excle文件并填充模版内容

    Java 新建excle文件并填充模版内容 一.JAR import java.io.BufferedReader; import java.io.File; import java.io.FileI ...

  2. 自定义控件之SegmentControlView

    SegmentControlView配合PageView使用 效果图 核心代码 package com.example.segmentcontrolview; import android.conte ...

  3. Oracle基础体系浅析

    不论是开发.管理.优化还是设计,对Oracle的基本原理的了解都是必不可少的,于是对自己最近关于Oracle的学习作出一点点的总结. 庖丁解牛之所以能做到"合于桑林之舞,乃中经首之会&quo ...

  4. ECS之Git服务器搭建

    最简教程 ### . 安装Git 安装Git服务,命令如下: ```Shell $ yum install curl-devel expat-devel gettext-devel openssl-d ...

  5. Android系统应用Mms之短信会话列表加载流程一

    1. ConversationList短息会话列表界面 1. 开始进行加载 ConversationList: protected void onStart(){ ... // 进行异步查询 star ...

  6. C# 如何获取可执行文件路径的上上级目录

    1. DirectoryInfo di = new DirectoryInfo(string.Format(@"{0}..\..\", Application.StartupPat ...

  7. ArcGIS Pro开发Web3D应用（2）——地图分屏对比（多屏对比）思路

    很多应用中都需要用到地图联动.多屏对比.二三维分屏.大屏显示,有图形可视化的地方就有事件响应触发:鼠标按下.移动.鼠标滚轮,由此触发了地图上坐标或范围的变化,将这些变化发送给另一个地图并响应这些变化, ...

  8. js查找、自组织数据

    function search(arr, data) { ; i < arr.length; ++i) { if (arr[i] == data) { return true; } } retu ...

  9. 2 - Binary Search & LogN Algorithm - Apr 18

    38. Search a 2D Matrix II https://www.lintcode.com/problem/search-a-2d-matrix-ii/description?_from=l ...

  10. jmeter实践之数据库参数传递

    一.需求: 1.业务需求:根据手机号到数据库中查看用户id,再根据用户id查看该注册用户下关联的健康成员. 2.参数化分析 1)需要根据不同的手机号进行查询,所以手机号需要进行参数化 2)用户id要作 ...