집 > 기사 > 웹 프론트엔드 > HTML을 사용하여 게시판 스타일을 구현하는 방법은 무엇입니까? (코드 예)

HTML을 사용하여 게시판 스타일을 구현하는 방법은 무엇입니까? (코드 예)

藏色散人원래의: 2018-08-11 15:52:3720595검색

이 글에서는 주로 HTML 메시지 목록 스타일의 매우 간단한 HTML 메시지 보드와 관련 코드 작업을 소개합니다. 게시판은 일부 포털이나 포럼 등에서 필수적인 부분입니다.

HTML 메시지판의 구체적인 코드 예는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页留言板版源码示例</title>
</head>
<body>
<h1>简易留言板</h1>
<textarea id="memo" cols="60" rows="10"></textarea>
<input type="button" value="追加内容" onclick="saveStorage(&#39;memo&#39;)" />
<input type="button" value="初始化" onclick="clearStorage(&#39;msg&#39;)" />
<hr />
<p id="msg"></p>
<script type="text/javascript">
    function saveStorage(id) {
        var data = document.getElementById(id).value;
        var time = new Date().getTime();
        localStorage.setItem(time,data);
        console.log("数据已保存");
        loadStorage(&#39;msg&#39;);
    }

    function loadStorage(id) {
        var result = &#39;<table border="1">&#39;;
        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 += &#39;<tr><td>&#39; + value + &#39;</td><td>&#39; + datestr + &#39;</td></tr>&#39;
        }
        result += &#39;</table>&#39;;
var target = document.getElementById(id);
        target.innerHTML = result;
    }

    function clearStorage() {
        localStorage.clear();
        console.log("清除完毕");
    }
</script>
</body>
</html>

위 HTML 메시지판의 효과는 다음과 같습니다.

HTML을 사용하여 게시판 스타일을 구현하는 방법은 무엇입니까? (코드 예)

참고: saveStorage()는 텍스트 영역의 값을 가져옵니다.
getTime()은 현재 타임스탬프를 가져오고, setItem() 타임스탬프를 키 값으로 저장하고 텍스트 영역 값을 키 값 콘텐츠로 로컬 데이터베이스에 저장합니다

localStorage: html5

html5 로컬 저장소에 나타나는 새 태그

Basic 명령문: window.localStorage;

Get: localStorage.getItem(key);

Add: localStorage.setItem(key,value);

Modify: localStorage.key = "";

Delete: localStorage.removeItem( key);

Clear: localStorage.clear() ;

【관련 추천 글】

php로 간단하게 게시판 만드는 법

메시지판 기능을 구현하기 위한 php 코드 상세 소개

위 내용은 HTML을 사용하여 게시판 스타일을 구현하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML 비디오 삽입을 구현하고 페이지에 표시하는 방법은 무엇입니까? (예)다음 기사：HTML 비디오 삽입을 구현하고 페이지에 표시하는 방법은 무엇입니까? (예)