问题：关于一个贴友的js留言板的实现
需求：用js做一个简单的留言板效果
html部分：
1: <!DOCTYPE>
2: <html lang="zh-en">
3: <head>
4: <title>js实现简单留言板</title>
5: <meta http-equiv="content-type" content="text/html;charset=utf-8">
6: <link rel="stylesheet" type="text/css" href="./forum.css">
7: <script type="text/javascript" src="./forum.js"></script>
8: </head>
9: <body>
10: <div class="container">
11: <div class="content">
12: <!-- <form action="?" method="?"> -->
13: <div class="text">
14: <label for="message">js简单留言板(置空可以查看默认的留言内容)</label>
15: </div>
16: <div class="text" style="margin-left:-75px">
17: <label for="name">昵称：</label>
18: <input type="text" id="name" value="昵称(默认是dwqs)" class="txt">
19: </div>
20: <div class="text">
21: <textarea rows="5" cols="30" id="message" value="" class="txt">给我留言(默认留言内容：我的小站：www.ido321.com)</textarea>
22: </div>
23: <div class="btn">
24: <!-- <input type="submit" id="submit" value="提交留言"> -->
25: <button id="btn1">提交留言</button>
26: </div>
27: <!-- </form> -->
28: </div>
29: <h3 style="clear:right">留言列表</h3>
30: <hr/>
31: <div class="messageList" id="messageList">
32: </div>
33: </div>
34: </body>
35: </html>
css:
1: *{
2: margin: 0 auto;
3: padding: 0;
4: font-family: "Microsoft YaHei","sans-serif";
5: }
6: .container{
7: width: 400px;
8: height: auto;
9: }
10: .text{
11: text-align: center;
12: margin-bottom: 15px;
13: }
14: .btn{
15: margin-right: 30px;
16: float: right;
17: }
18: #messageList{
19: width: 100%;
20: height: 100%;
21: }
22: .txt{
23: color: gray;
24: opacity: 0.8;
25: filter:alpha(opacity=0.8);
26: }
js:
1: /**
2: *文档加载完后，运行名为func的函数
3: *@param func 需要运行的函数的名
4: *说明：window.onload事件处理函数的值存入变量oldonload;如果函数上没有绑定任何函数，则正常添
5: *加；若已经绑定有函数，则添加到指令末尾。
6: */
7: function addLoadEvent(func)
8: {
9: var oldonload = window.onload; //得到上一个onload事件的函数
10: if(typeof window.onload != 'function')
11: {
12: window.onload = func;
13: }
14: else
15: {
16: window.onload = function()
17: {
18: oldonload(); //调用之前覆盖的onload事件的函数
19: func(); //调用当前事件函数
20: }
21: }
22: }
23: function getMessage(){
24: var btn = document.getElementById("btn1");
25: var message = document.getElementById("message");
26: var name = document.getElementById("name");
27: var nameValue = "";
28: var messageValue = "";
29:
30: name.onfocus = function(){
31: name.value="";
32: }
33: message.onfocus = function(){
34: message.value="";
35: }
36:
37: btn.onclick = function(){
38: messageValue = message.value || "我的小站：www.ido321.com" ; //设置默认值
39: nameValue = name.value || "dwqs";
40: var msgList = document.getElementById("messageList");
41: var msgDiv = document.createElement("div");
42: var msgTxt = document.createTextNode(nameValue+"说："+messageValue);
43: msgDiv.appendChild(msgTxt);
44: msgList.appendChild(msgDiv);
45: }
46: }
47: addLoadEvent(getMessage);
效果：
来源：http://www.ido321.com/591.html
问题：关于一个贴友的js留言板的实现的更多相关文章
- 一个超级简单php的留言板
第一步:配置好测试环境:(详细略了) 第二部:新建一个数据库,命名为guestbook(名字可以随便改),可以直接在phpmyadmin里面操作,在数据库里面新建一张表‘content’,表里面有4个 ...
- 一个很简单的php留言板。。。。搭建在sae上的。。。
我在sae上搭建了一个个人简历的页面: 有兴趣的可以访问 http://671coder.sinaapp.com/ 在做下面一个简单的留言板的时候,卡了我很久,虽然完全没用过php..但是还是最后勉 ...
- JS 留言板案例
css代码 ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; widt ...
- JavaScript学习笔记（三）——留言板知操纵DOM节点
用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...
- Python 每日一练 | Flask 实现半成品留言板
留言板Flask实现 引言 看了几天网上的代码,终于写出来一个半成品的Flask的留言板项目,为什么说是半成品呢?因为没能实现留言板那种及时评论刷新的效果,可能还是在重定向上有问题 或者渲染写的存在问 ...
- 用js做一个简单的留言板效果
html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...
- vue+egg.js+mysql一个前后端分离留言板项目
一.前序 我相信每个人前端搬运工和我想法都是一样的,都有一个做全栈的梦,无奈面对众多的后台语言,却不从下手,今天由我来带你们潜入全栈的门槛,注意是门槛.能不能学的会后面的内容全靠坚持了. 我今天主要做 ...
- 用 Express4 写一个简单的留言板
Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...
- [js高手之路] vue系列教程 - 实现留言板todolist(3)
通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...
随机推荐
- 1053: [HAOI2007]反素数ant - BZOJ
Description 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数 ...
- eclipse/MyEclipse 日期格式、注释日期格式、时区问题
eclipse/MyEclipse 日期格式.注释日期格式.时区问题 在eclipse/MyEclipse中,如果你的注释或是运行System.out.print(new java.util.Date ...
- Hibernate关系级别注解
最近在学习Hibernate的相关知识,这一站学习的是Hibernate的注解相关的操作和知识.在这里标注以下为以后查阅和需要帮助的朋友提供便利. 一. 开发环境的搭建: 1. 需要的jar包配置: ...
- SQL Server 2008 设计与实现笔记（一）
Chart5 create database MovieRental; select name, SUSER_SNAME(sid) as [login] from sys.database_princ ...
- Monad学习
这是观看Cousera上的课程<Principles of Reactive Programming>中week1里的Monad一节所做的笔记. What is a Monad? What ...
- CF 369 B. Valera and Contest
http://codeforces.com/contest/369/problem/B 题意 :n, k, l, r, sall, sk,n代表的是n个人,这n个人的总分是sall,每个人的得分大于 ...
- Android 图片缩放
以下演示将一个ImageView的高度设置为两倍: 布局文件main.xml <?xml version="1.0" encoding="utf-8"?& ...
- ANDROID_MARS学习笔记_S01_008Linear_layout例子
1.netstone_layout.xml <?xml version="1.0" encoding="utf-8"?> <LinearLay ...
- 配置SQL Server 2008服务器
怎么配置SQL Server 2008服务器_百度经验 http://jingyan.baidu.com/article/9faa7231a922c1473c28cb23.html 1.验证安装是否成 ...
- Android Editext监听光标位置
因为项目需要,需要实时监听光标的位置变化,网上提出的用TextWatcher和onTouchListener中调用contentText.getSelectionStart()都是获取的上一次位置. ...