精华内容
下载资源
问答
  • 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写的留言板功能 实现查看 增加 删除的功能 解决了上传中文乱码的情况
  • 简易留言板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>
    
    展开全文
  • 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

    展开全文
  • 本篇文章主要给大家介绍一个非常简单的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-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制作简易留言板,也可以看作是简易评论区。 要求在页面文本框中输入一些...
  • 微信留言板代码

    热门讨论 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...
  • 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留言板添加删除,页面漂亮简介,无刷新
  • 留言板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+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) 本程序由网络“飞虎”个人开发编写, 将之...
  • 从网上买的,自己用过的几个,感觉挺好用的,界面效果提升了N个档次。 3套模板分别为:扁平风格的p2p理财网站静态模板、红色的股票投资证券公司网站模板、宽屏大气的金融行业html网页模板。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,214
精华内容 12,485
关键字:

html留言板代码