用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的使用不 ...
随机推荐
- 图解在Eclipse中如何上传项目到svn
方法/步骤 1.在Eclipse中新建project,如下图所示: 2.右键project --> team --> share project,如下图所示: 3.选择repository ...
- Django 模板中使用css, javascript
Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...
- python opencv3 运动检测
git:https://github.com/linyi0604/Computer-Vision 思路: 开启摄像头后 设置一个当前帧为背景, 在之后检测到的帧都与背景对比不同,对不同的地方进行检测 ...
- php最简单最基础入门笔记
偶然翻到之前刚学php时记录的笔记,特此分享给大家,希望对初学者有所帮助. php网页命名不支持中文 isset($abc) 判断变量是否被定义 empty($abc) 判断变量是否为空 u ...
- [BZOJ5292][BJOI2018]治疗之雨(概率DP+高斯消元)
https://blog.csdn.net/xyz32768/article/details/83217209 不难找到DP方程与辅助DP方程,发现DP方程具有后效性,于是高斯消元即可. 但朴素消元显 ...
- BZOJ 4066 简单题（KD树）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4066 [题目大意] 要求维护矩阵内格子加点和矩阵查询 [题解] 往KD树上加权值点,支 ...
- vijos p1768 数学
链接:点我 预处理:b[i][j]表示a[1] ... a[j]中比a[i]小的数的数量. 设 int get_lower_count(int b[], int l, int r) { return ...
- 你的C/C++程序为什么无法运行？揭秘Segmentation fault （1）
什么让你对C/C++如此恐惧? 晦涩的语法?还是优秀IDE的欠缺? 我想那都不是问题,最多的可能是一个类似这样的错误: 段错误(Segmentation fault) 这是新手无法避免的错误,也是老手 ...
- Spring源码解析 – @Configuration配置类及注解Bean的解析
在分析Spring 容器创建过程时,我们知道容器默认会加载一些后置处理器PostPRocessor,以AnnotationConfigApplicationContext为例,在构造函数中初始化rea ...
- VC获取屏幕分辨率及大小相关(转)
vc得到屏幕的当前分辨率方法: 1.Windows API调用 int width = GetSystemMetrics ( SM_CXSCREEN ); int height= GetSystem ...