用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);
效果：
缺点是没有保存数据，之后会考虑用js+WebSql实现数据保存，但是目前只有chrome支持WebSql
关于js设置默认值，可以参考：http://www.ido321.com/555.html
用js做一个简单的留言板效果的更多相关文章
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 用 Express4 写一个简单的留言板
Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...
- css3加js做一个简单的3D行星运转效果
前几天在园子里看到一篇关于CSS3D行星运转的文章,原文在这里,感觉这个效果也太酷炫了,于是自己也就心血来潮的来尝试的做了一下.因为懒得去用什么插件了,于是就原生的JS写,效果有点粗超,还有一些地方处 ...
- D3.js 做一个简单的图表（条形图）
柱形图是一种最简单的可视化图标,主要有矩形.文字标签.坐标轴组成. 本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图. 一. 画布是什么 前几章的处理对象都是 HTML ...
- 用JS,做一个简单的计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 【 D3.js 入门系列 — 3 】 做一个简单的图表！
图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- .Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器
目标:使用.net core最新的3.0版本,借助httpclient和本机的host域名代理,实现网络请求转发和内容获取,最终显示到目标客户端! 背景:本人在core领域是个新手,对core的使用不 ...
随机推荐
- PHP接入支付宝支付
创建应用 使用支付宝账号登录开放平台创建应用,应用创建成功之后可以得到APPID等相关信息 接着需要设置RSA密钥,可以使用蚂蚁金服开放平台提供的生成工具,生成完密钥需在开放平台中填写. 代码接入 引 ...
- HDU - 1716 排列2 水题
排列2 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- 导出Excel超过65535条限制解决方案
使用poi导出excel的时候如果数据过多,超过65535条会报错,因为excel2003一个sheet表最多导出65535条,excel2007是10万4000多条限制. 因此遇到这种excel导出 ...
- MySQL服务器 IO 100%的案例分析
[问题] 有台MySQL 5.6.21的数据库实例以写入为主,IO %util接近100% 写入IOPS很高 [分析过程] 1.通过iotop工具可以看到当前IO消耗最高的mysql线程 2.查看线程 ...
- Swift2.0语言教程之闭包
Swift2.0语言教程之闭包 Swift2.0语言闭包 闭包是自包含的函数代码块,可以在代码中被传递和使用.Swift中的闭包与C和Objective-C中的代码块(blocks)以及其他一些编程语 ...
- [BZOJ4487][JSOI2015]染色问题(容斥)
一开始写了7个DP方程,然后意识到这种DP应该都会有一个通式. 三个条件:有色行数为n,有色列数为m,颜色数p,三维容斥原理仍然成立. 于是就是求:$\sum_{i=0}^{n}\sum_{j=0}^ ...
- 51Nod 快速傅里叶变换题集选刷
打开51Nod全部问题页面,在右边题目分类中找到快速傅里叶变换,然后按分值排序,就是本文的题目顺序. 1.大数乘法问题 这个……板子就算了吧. 2.美妙的序列问题 长度为n的排列,且满足从中间任意位置 ...
- 【10.17校内测试】【二进制数位DP】【博弈论/预处理】【玄学（？）DP】
Solution 几乎是秒想到的水题叻! 异或很容易想到每一位单独做贡献,所以我们需要统计的是区间内每一位上做的贡献,就是统计区间内每一位是1的数的数量. 所以就写数位dp辣!(昨天才做了数字统计不要 ...
- bzoj 1875: [SDOI2009]HH去散步 -- 矩阵乘法
1875: [SDOI2009]HH去散步 Time Limit: 20 Sec Memory Limit: 64 MB Description HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走, ...
- brainfuck 解释器
#include <cstdio>#include <cmath>#include <cstring>#include <ctime>#include ...