精华内容
下载资源
问答
我要提问
  • html5实现留言板的代码实例分享
    2021-01-19 02:20:11

    html5实现留言板的代码实例分享

    HTML5--JS API-本地存储 Web留言板

    *{margin:0; padding:0;}

    body,input{font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva;}

    h1{margin-bottom:15px; height:100px; line-height:100px; text-align:center; font-size:24px; color:#fff; background:#0051a1;}

    #content #post,#comment p{zoom:1;}

    #content #post:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}

    .transition{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear;

    -o-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;}

    #content{margin:0 auto; width:960px; overflow:hidden;}

    #content #post{margin-bottom:15px; padding-bottom:15px; border-bottom:1px #d4d4d4 dashed;}

    #content #post textarea{display:block; margin-bottom:10px; padding:5px; width:948px; height:390px;

    border:1px #d1d1d1 solid; border-radius:5px; resize:none; outline:none;}

    #content #post textarea:hover{border:1px #9bdf70 solid; background:#f0fbeb;}

    #content #post #postBt,#content #post #clearBt{margin-left:5px; padding:3px; float:right;}

    #comment{overflow:hidden;}

    #comment p{margin-bottom:10px; padding:10px; border-radius:5px;}

    #comment p:nth-child(odd){border:1px solid #e3e197; background:#ffd;}

    #comment p:nth-child(even){border:1px solid #adcd3c; background:#f2fddb;}

    #comment p span{display:inline; float:left;}

    #comment p .msg{width:738px;}

    #comment p .datetime{width:200px; color:#999; text-align:right;}

    var Storage =

    {

    saveData:function()//保存数据

    {

    var data = document.querySelector("#post textarea");

    if(data.value != "")

    {

    var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数

    localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中，可以降低Key值重复率

    data.value = "";

    this.writeData();

    }

    else

    {

    alert("请填写您的留言！");

    }

    },

    writeData:function()//输出数据

    {

    var dataHtml = "", data = "";

    for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法

    {

    data = localStorage.getItem(localStorage.key(i)).split("|");

    dataHtml += "

    " + data[0] + "" + data[1] + "

    ";

    }

    document.getElementById("comment").innerHTML = dataHtml;

    },

    clearData:function()//清空数据

    {

    if(localStorage.length > 0)

    {

    if(window.confirm("清空后不可恢复，是否确认清空？"))

    {

    localStorage.clear();

    this.writeData();

    }

    }

    else

    {

    alert("没有需要清空的数据！");

    }

    },

    getDateTime:function()//获取日期时间，例如 2012-03-08 12:58:58

    {

    var isZero = function(num)//私有方法，自动补零

    {

    if(num < 10)

    {

    num = "0" + num;

    }

    return num;

    }

    var d = new Date();

    return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + "

    " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());

    }

    }

    window.onload = function()

    {

    Storage.writeData();//当打开页面的时候，先将localStorage中的数据输出一边，如果没有数据，则输出空

    document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件，作用是将localStorage中的数据输出

    document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据

    }

    HTML5--JS API-本地存储 Web留言板

    更多相关内容

  • html+php+mysql留言板功能的实现

     2017-06-08 09:27:11
    通过html+php+mysql写的留言板功能 实现查看 增加 删除的功能 解决了上传中文乱码的情况
    收起

  • 简易留言板HTML

     2018-04-03 15:48:54
    这是一套简易的前后台全套的留言模板html代码与css样式。可供新手学习和借鉴
    收起

  • 留言板，html+后台

     2015-08-22 09:23:04
    有前台和后台代码，完全分开，增删改查，留言管理
    收起

  • 留言板 HTML5代码

     万次阅读 多人点赞 2020-06-05 20:46:35
    代码如下： 首先是style： #di1{ border: 1px solid #D3D3D3; width: 700px; height: 500px; background-color: azure; } p{ font-size: 10px; color: #008000; } #di2{ border: 1px solid #FFFFFF; width: 400px; ...

    先看效果图：在这里插入图片描述
    代码如下：
    首先是style：
    #di1{
    border: 1px solid #D3D3D3;
    width: 700px;
    height: 500px;
    background-color: azure;
    }
    p{
    font-size: 10px;
    color: #008000;
    }
    #di2{
    border: 1px solid #FFFFFF;
    width: 400px;
    height: 400px;
    }
    #di3{
    border: 1px solid #FFFFFF;
    width: 400px;
    height: 40px;
    margin-left: 1.25rem;
    }
    #di4{
    border: 1px solid #FFFFFF;
    width: 400px;
    height: 100px;
    margin-left: 1.25rem;
    }
    .cla3{
    text-align: center;
    }
    .disc{list-style-type: disc;}

    下面是body代码：

    留言板                          科技工作建言者

    发表留言

    姓 名：

    电子邮件：

    分 类：科技工作者建言 不保密 保密   留言类型： 科技 生活 

    			</div>
			<div id="di4">
				<p>留 言:<textarea rows="5" cols="35" >
		请输入您的内容
	</textarea></p>
			</div>
			<div id="di3">
				<p style="color: #008000;">注：如果您的留言不便公开，请选择"保密"选项，提交后可凭系统反馈给您的留言编号、查询密码和您的姓名查询回复。</p>
			</div>
			<div id="di3" class="cla3">
				<input type="submit" name="submit"  value="提交" />&emsp;&emsp;
				<input type="reset" name="reset"  value="清空" />
			</div>
			<div id="di5">
				<ul class="disc" style="color: #008000;font-size: 10px;">
					<li>请遵守国家有关法律、法规，尊重网上道德，承担一切因您的行为而直接或间接引起的法律责任。</li>
					<li>本网站拥有管理笔名和留言的一切权利。</li>
					
				</ul>
			</div>
		</form>
		
			
			</p>
		</div>
	</div>
    收起
    展开全文
    css3

  • HTML静态网页留言板ASP自动代码

     2021-01-08 14:00:20
    HTML静态网页留言板ASP自动代码， 解压到你的网站根目录即可guestbook/index.html 本程序是html显示，提交，实现了很多人想要的“html留言板” 本程序没有做登陆验证，请用户自己添加
    收起

  • html5留言板

     热门讨论 2012-11-29 14:11:11
    html5留言板，在线留言板，可以改改，补全功能。大家自己看吧。
    收起

  • 留言板实例代码

     千次阅读 多人点赞 2019-11-25 14:43:03
    那么 它来了 它来了~~~此福利提供给初入互联网的小清新，是一整套代码，写的也比较简单，但是它是源码哦！！！是后端+前端+数据库+效果图 ~~~因此，如果你是大佬，想看看我写的，可以尽情浏览但是有一点不要说...

    今天又有一波技术福利来了。也是手把手教给各位,希望得到各位喜欢。那么 它来了 它来了~~~此福利提供给初入互联网的小清新，是一整套代码，写的也比较简单，但是它是源码哦！！！是后端+前端+数据库+效果图 

     

    ~~~因此，如果你是大佬，想看看我写的，可以尽情浏览但是有一点不要说什么代码lol啥的、因为看清楚我的标题，谢谢配合。

     

    你们知道这套代码，小清新们直接ctrl+c 以及 ctrl+v 就能使用了、想想爽不爽.....所以这里小编说喜欢的话就关注我一下，可以加文章底部微信，不懂问题可以提问哦。

     

    其余话不多说，开始吧~面对疾风吧......

     

    第一步：首先是登录页面：

    <!DOCTYPE html><html>     <head>         <meta charset="UTF-8">         <title>留言板登录</title>         <script src="bootstrap/js/jquery-1.11.2.min.js"></script>         <script src="bootstrap/js/bootstrap.min.js"></script>         <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>     </head>     <style>         .header{             margin-left: 550px;             margin-top: 150px;             height: 300px;             max-width: 300px;         }         .xiugai{             max-width: 200px;         }         .login{             margin-top: 10px;         }</style>     <body>         <form action="messloginchuli.php" method="post">         <div class="header">             <h2>开发部内部留言板</h2>             <div class="input-group xiugai">                 <span class="input-group-addon" style="margin-top: 20px;">用户名:</span>                 <input type="text" class="form-control" name="uid" placeholder="请输入用户名">             </div>             <div class="input-group xiugai" style="margin-top: 10px;">                 <span class="input-group-addon">口令：</span>                 <input type="text" class="form-control" name="pwd" placeholder="请输入口令">             </div>             <button type="submit" class="btn btn-success login">登录</button>        </div>    </form>     </body></html>

     

     

    第二步：登录页面完成后要进入登录处理页面了，也就是上面提交到的messloginchuli.php

    <?phpsession_start();　　// 登录之后要把所包含登录的页面连接起来，开启session$uid = $_POST["uid"];$pwd = $_POST["pwd"];require_once "./DBDA.class.php";$db = new DBDA();$sql = "select password from yuangong where username='{$uid}'";$arr = $db->query($sql,0);//var_dump($arr[0][0]);if($arr[0][0]=$pwd && !empty($pwd)){     $_SESSION["uid"]=$uid;     header("location:message.php");}?>​

     

     

    登录页面效果如图：

     

    第三步：登录完成后是进入主页面，也就是显示自己收到的对话内容，下面是设计的数据库的表格和主页面的代码：

     

    <!DOCTYPE html><html>     <head>         <meta charset="UTF-8">         <title></title>         <script src="bootstrap/js/jquery-1.11.2.min.js"></script>         <script src="bootstrap/js/bootstrap.min.js"></script>         <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>     </head>     <style>         .mess{             max-width: 800px;             margin-left: 250px;             margin-top: 150px;         }</style>     <body>         <?php         session_start();         $uid = $_SESSION["uid"];         if(empty($_SESSION["uid"])){             header("location:messlogin.php");             exit;         }         ?>         <div style="margin-left: 880px; margin-top: 50px;font-size: 20px;" >             <a href="publish_info.php" >发布信息</a>             <a href="tuichuchuli.php">退出系统</a>             </div>         <table class="table table-bordered mess" style="margin-top: -40px;">             <caption style="font-size: 20px;">                 留言信息：             </caption>                          <thead>                 <tr>                     <th>发送人</th>                     <th>发送时间</th>                     <th>接收人</th>                     <th>信息内容</th>                 </tr>             </thead>             <tbody>                 <?php                 require_once "./DBDA.class.php";                 $db = new DBDA();                 $sql = "select * from liuyan where recever='{$uid}' or recever='all'";                 $arr = $db->query($sql,0);                 foreach($arr as $v){                     echo "<tr>                     <td>{$v[1]}</td>                     <td>{$v[2]}</td>                     <td>{$v[3]}</td>                     <td>{$v[4]}</td>                 </tr>";                 }                 ?>                              </tbody>         </table>​     </body></html>​

     

    第四步：退出登录系统实现用户注销，返回登录页面功能代码如下：

     <?phpsession_start();$uid = $_SESSION["uid"];unset($uid);header("location:messlogin.php");？>

     

     

    代码写到这里，比较重要的部分就完成了，下面是要进入发布信息页面了，相当于之前写的添加的页面，其处理页面也是和之前没什么区别的，差别在于现在的处理页面是在用户登录的情况下操作的，需要用session把所有的登录情况下的页面连接起来

     

    主页面效果如下图：


    第五步：最后是信息发布页面，可以给任何人发送信息，代码如下：

    <!DOCTYPE html><html>     <head>         <meta charset="UTF-8">         <title>发布信息界面</title>         <script src="bootstrap/js/jquery-1.11.2.min.js"></script>         <script src="bootstrap/js/bootstrap.min.js"></script>         <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>     </head>     <style>         .mess{             max-width: 200px;             margin-top: 10px;         }         .mess1{             margin-top: 10px;         }         .opt{             max-width: 200px;             margin-left: 80px;         }         .txt{             max-width: 200px;         }</style>     <body><?phpsession_start();$uid = $_SESSION["uid"];if (empty($_SESSION["uid"])) {     header("location:messlogin.php");     exit ;}?>     <div  style="margin-left: 500px; margin-top: 150px;">         <div style="margin-left: 60px; margin-bottom: 20px;font-size: 20px;" >             <a href="message.php" >查看信息</a>             <a href="seemess.php" style="margin-left: 80px;" >查看发送信息</a>             </div>         <form class="form-horizontal" role="form" action="infochuli.php" method="post">                          <div class="form-group">                     <label for="firstname" class="col-sm-2 control-label mess1">接收人:</label>                     <div class="form-group ">                         <select class="form-control opt" name="recever">                             <option value="all">所有人</option>                         <?php                                                  require_once "./DBDA.class.php";                         $db = new DBDA();    　　　　　　　//这里可以给特定的朋友发送信息的sql语句                         //$sql = "select firend.firend,yuangong.name from firend,yuangong where firend.firend                       //= yuangong.username and firend.me = '{$uid}'";                         $sname = "select * from yuangong where username not in ('{$uid}')";                         $arr = $db->query($sname,0);                                                 //var_dump($arr[0][2]);                         foreach($arr as $v){                             echo "<option value='{$v[0]}'>{$v[2]}</option>";                         }                         ?>                         </select>                     </div>                 </div>                          <div class="form-group">                 <label for="lastname" class="col-sm-2 control-label mess1">信息内容:</label>                 <div class="col-sm-10">                     <textarea class="form-control txt" rows="3" name="content"></textarea>                 </div>             </div>             <div class="form-group">                 <div class="col-sm-offset-2 col-sm-10">                     <button type="submit" class="btn btn-default">                     发送                     </button>                 </div>             </div>         </form>     </div>​     </body></html>

    ​

     

    发信息页面如图：

     

     

     

    第六步：发布信息完成后要进入处理页面了，也就是提交到的infochuli.php，最后返回发送信息界面

    <?phpsession_start();$uid = $_SESSION["uid"];$recever = $_POST["recever"];$content = $_POST["content"];$arr = $_POST["recever"];$t = date("Y-m-d H:i:s");require_once "./DBDA.class.php";$db = new DBDA();$sql = "insert into liuyan values('','{$uid}','{$t}','{$recever}','{$content}',0)";$arr = $db->query($sql);if($arr && !empty($arr)){     header("location:publish_info.php");}else{     echo "发送失败!";}?>

    到这里也就完了~~~欢迎交流WeChat:xzzs730

    收起
    展开全文
    mysql php

  • html怎么操作来实现留言板样式？（代码示例）

     千次阅读 2021-06-08 16:34:11
    本篇文章主要给大家介绍一个非常简单的HTML留言板及html 留言列表样式的相关代码操作。留言板是一些门户网站或者论坛等等必不可少的一部分。HTML留言板具体代码示例如下：网页留言板版源码示例简易留言板function ...

    5268f80b9b1e01f982625ef6fac83ca1.png

    本篇文章主要给大家介绍一个非常简单的HTML留言板及html 留言列表样式的相关代码操作。留言板是一些门户网站或者论坛等等必不可少的一部分。

    HTML留言板具体代码示例如下：

    网页留言板版源码示例

    简易留言板

    function saveStorage(id) {

    var data = document.getElementById(id).value;

    var time = new Date().getTime();

    localStorage.setItem(time,data);

    console.log("数据已保存");

    loadStorage('msg');

    }

    function loadStorage(id) {

    var result = '

    for(var i = 0; i < localStorage.length; i++) {

    var kes = localStorage.key(i);

    var value = localStorage.getItem(kes);

    var date = new Date();

    date.setTime(kes);

    var datestr = date.toGMTString();

    result += '

    ' + value + '' + datestr + ''

    }

    result += '

    ';

    var target = document.getElementById(id);

    target.innerHTML = result;

    }

    function clearStorage() {

    localStorage.clear();

    console.log("清除完毕");

    }

    上述HTML留言板效果如下图：

    e3de2d19e56c108afb8053c974920bcb.png

    注：saveStorage() 获取textarea的value值

    getTime()获取当前时间戳、setItem()将时间戳作为键值，textarea的value值作为键值的内容保存在本地数据库

    localStorage:html5出现的新标签

    html5本地存储

    基本语句: window.localStorage;

    获取: localStorage.getItem(key);

    添加: localStorage.setItem(key,value);

    修改: localStorage.key = "";

    删除: localStorage.removeItem(key);

    清除: localStorage.clear();

    【相关文章推荐】

    如何用php简单制作留言板

    php实现留言板功能的代码详细介绍

    收起
    展开全文

  • html5 css3在线留言表单美化代码

     2019-11-05 21:16:29
    html5 css3在线留言表单美化代码
    收起

  • 留言板的动态网页

     2019-04-17 14:12:25
    留言板的动态网页，搭建好的直接就能用于网页，界面大方简洁
    收起

  • js+css+html制作简易留言板

     千次阅读 2021-11-21 15:56:26
    js+css+html制作简易留言板1 案例说明2 编写HTML代码3 编写css代码4 编写JavaScript代码5 全部代码 1 案例说明 利用JavaScript、css以及html制作简易留言板，也可以看作是简易评论区。 要求在页面文本框中输入一些...
    收起
    JavaScript 前端 css

  • 微信留言板代码

     热门讨论 2014-02-25 14:16:11
    微信留言板,用html5做成的手机端微网页 ，留言讨论区，前台显示代码
    收起

  • JavaScript实现动态留言板

     千次阅读 2021-06-12 18:40:20
    本文实例为大家分享了简单动态留言板的创建，供大家参考，具体内容如下效果图展示：思路html代码发表留言css代码* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px...
    收起

  • 怎么用html做一个显示留言板的框 留言成功马上显示 和留言板一样

     千次阅读 2021-06-09 04:47:56
    1.数据库先载入表单，里面包含留言信息名为text(名字自己起)，还要有一个num号，设置为不可重复，这是数据库要先准备的，因为留言需要存储，必须有一个可以存储的地方，光是html是不能完成的，所以需要掌握html、php...
    收起

  • JS实现简易留言板（节点操作）

     千次阅读 2021-06-12 17:50:49
    本文实例为大家分享了JS实现简易留言板的具体代码，供大家参考，具体内容如下今天的案例主要是对节点进行操作创建节点、添加节点、删除节点以及为节点添加内容的操作。就是一个简单的留言板功能，可以发布留言，删除...
    收起

  • 最简单的留言板代码

     2015-10-24 19:44:19
    最简单的留言板代码，想要的尽管拿去，最简单的留言板代码，想要的尽管拿去好了
    收起

  • javascript实现留言板功能

     千次阅读 2021-06-12 18:37:14
    本文实例为大家分享了javascript实现留言板功能的具体代码，供大家参考，具体内容如下Document*{margin: 0;padding: 0;}.box{ /*设置最外层盒子*/width: 600px;border: 1px solid #aaa;padding: 20px 10px;margin: ...
    收起

  • PHP 留言模板代码

     2018-09-29 16:08:36
    对于初学者学习PHP的留言模板方面有帮助，里面有详细的代码，效果图
    收起

  • 留言板代码

     2014-09-12 17:11:49
    留言板代码
    收起

  • JS留言板添加和删除代码，简单，漂亮

     2015-12-25 17:01:26
    简单的js留言板添加删除，页面漂亮简介，无刷新
    收起

  • 留言板html

     2012-12-16 20:52:47
    这是一个留言板
    收起

  • 简易留言板代码

     万次阅读 2018-01-02 22:25:06
    今天写了一个很简单的简易留言板，完成之后的样式大概就是这么简陋。 留言板 显示条数 计算条数 上面是html排版，样式如下图。 JS部分 //m=0;是为了统计留言条数，从0开始统计。 var m=0; function ...
    收起

  • 留言列表模板HTML代码

     千次阅读 2020-07-08 08:49:37
    <!DOCTYPE html> <html xmlns=...留言列表 -- HoverTree</title> <style> .keleyitable { width: 800px; } .keleyitable table, td, th { border: 1px solid green;marg...
    收起

  • asp留言板(asp留言板源代码)

     2021-04-28 07:07:13
    用ASP+access+FrontPage实现留言板有几种方法？？只需要写出简单思路，....这个是简单的留言板代码，数据库就要你自己设计了，网页代码是： 已经做得了大概~还有删除和修改没完成~请高手帮助~既然别的...
    收起

  • Vue实现简单的留言板

     2021-01-18 18:38:51
    本文实例为大家分享了Vue实现简单的留言板的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> <link rel=...
    收起

  • html静态留言板

     千次阅读 2021-06-12 17:13:54
    ---------------------------------------------------------------- “html留言板”程序说明： ━┅━┅━┅━┅━┅━┅━┅━┅━━┅━┅━┅━┅━┅━┅━┅━ 1) 本程序由网络“飞虎”个人开发编写, 将之...
    收起

  • 3套美观大气的Html静态模板

     2018-05-10 11:05:08
    从网上买的，自己用过的几个，感觉挺好用的，界面效果提升了N个档次。 3套模板分别为：扁平风格的p2p理财网站静态模板、红色的股票投资证券公司网站模板、宽屏大气的金融行业html网页模板。
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,214
精华内容 12,485
热门标签
关键字：

html留言板代码