用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的使用不 ...
随机推荐
- 九大工具助你玩转Java性能优化
在这篇文章中,我会带着大家一起看一下9个可以帮助我们优化Java性能的工具.有一些我们已经在IDR Solutions中使用了,而另外一些有可能在个人项目中使用. NetBeans Profiler ...
- 富文本插件KindEditor
具体用法查看官网http://kindeditor.net/doc.php {% load staticfiles %} <!DOCTYPE html> <html lang=&qu ...
- 「JSOI2018」战争
「JSOI2018」战争 解题思路 我们需要每次求给一个凸包加上一个向量后是否与另外一个凸包相交,也就是说是否存在 \[ b\in B,(b+w)\in A \] 这里 \(A, B\) 表示凸包内部 ...
- [WC2018]州区划分(状压DP+FWT/FMT)
很裸的子集反演模板题,套上一些莫名其妙的外衣. 先预处理每个集合是否合法,再作显然的状压DP.然后发现可以写成子集反演的形式,直接套模板即可. 子集反演可以看这里. 子集反演的过程就是多设一维代表集合 ...
- [BZOJ4567][SCOI2016]背单词(Trie+贪心)
1.题意表述十分难以理解,简单说就是:有n个单词,确定一个背的顺序,使总代价最小. 2.因为第(1)种情况的代价是n*n,这个代价比任何一种不出现第(1)种情况的方案都要大,所以最后肯定不会出现“背某 ...
- BZOJ 3963 HDU3842 [WF2011]MachineWorks cdq分治 斜率优化 dp
http://acm.hdu.edu.cn/showproblem.php?pid=3842 写的check函数里写的<但是应该是<=,调了一下午,我是个zz. 就是普通的斜率优化因为有两 ...
- bzoj 3669 lct维护最小生成树
大概题意:给一个无向图,有a,b两种边权,找一条从1到n的路径,使得max(a[i])+max(b[i])最小a[i],b[i]表示该路径上的边的对应权. 如果用类似最短路的DP来做,显然每个点的状态 ...
- python开发_tkinter_菜单选项中英文切换_菜单选项不可用操作_博主推荐
我使用的python版本为:3.3.2 如果你对python中tkinter模块的菜单操作不是很了解,你可以看看: python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推 ...
- Codeforces Round #279 (Div. 2) B - Queue 水题
#include<iostream> #include<mem.h> using namespace std; ],q[]; int main() { int n,x,y; m ...
- Polly简介 — 1. 故障处理策略
Polly 是 .Net 下的一套瞬时故障处理及恢复的函式库,可让开发者以fluent及线程安全的方式来应用诸如Retry.Circuit Breaker.Timeout.Bulkhead Isola ...