


Teilen von Codebeispielen für die Implementierung eines Message Boards in HTML5
Teilen von Codebeispielen für die Implementierung von Message Boards in HTML5
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>HTML5--JS API-本地存储 Web留言板</title> <style type="text/css"> *{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;} </style> <script type="text/javascript"> 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 += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>"; } 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();}//清空所有已保存的数据 } </script> </head> <body> <h1>HTML5--JS API-本地存储 Web留言板</h1> <div id="content"> <div id="post"> <textarea class="transition"></textarea> <input id="postBt" type="button" value="发表评论"/> <input id="clearBt" type="button" value="清空所有已保存的数据"/> </div> <div id="comment"></div> </div> </body> </html>
Das obige ist der detaillierte Inhalt vonTeilen von Codebeispielen für die Implementierung eines Message Boards in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen





Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
