單版發布留言
分析:
1. 核心思路:點擊按鈕之后,就動態創建一個li,添加到ul里面。
2. 創建li的同時,把文本域里面的值通過li.innerHTML賦值給li
3. 如果想要新的留言后面顯示就用appendChild如果想要前面顯示就用insertBefore
刪除留言
分析:
1. 當我們把文本域里面的值賦值給li的時候,多添加一個刪除的鏈接
2. 需要把所有的鏈接獲取過來,當我們點擊當前的鏈接的時候,刪除當前鏈接所在的li
3.阻止鏈接跳轉需要添加JavaScript:void(0);或者JavaScript;
源碼如下
tml源碼:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>訪問數據庫</title>
<style>
#name{width: 180px;
}#msg{width: 180px;height: 180px;font-size: 20px;
}#save{width: 80px;line-height: 30px;background-color: cornflowerblue;border: 0px;
}</style>
</head>
<body>
<h1>使用數據庫實現留言簿</h1>
<label for="name">姓名:</label>
<input id="name" type="text" placeholder="請輸入姓名:"/><br/>
<label for="msg">留言:</label>
<textarea id="msg" placeholder="請輸入留言信息" ></textarea>
<br/>
<button id="save" >保存</button>
<hr />
<table border="1" id="datatable" cellspacing="0" cellpadding="0"></table>
<p id="msgs"></p>
<script type="text/javascript" src="js/db.js"></script>
</body>
</html>db.js源碼:window.onload=init;
var datatable=null;
//創建數據庫,獲取數據庫訪問對象。var db=openDatabase('mydb','','mydatabase',102400);
//初始化function init() {
datatable=document.querySelector("#datatable");
碼可以做很多很有趣的事情,有些很簡短的代碼,會讓人印象深刻,而且可以從中學到一些東西。有人發起了這樣一個話題稱“有哪些短小卻令人驚嘆的 JavaScript 代碼?”
百度美女程序員
這個話題,引起很多很多人的關注,大家也都非常踴躍的分享代碼,下面,W3Cschool小師妹就為大家分享其中三段代碼。
代碼片段一:
分享者分享了這樣一段代碼,也沒有說什么。但是網友中還是有很多大牛的,看看這些大牛是怎么評論這段代碼的:
網友一:很有趣呀!
網友二:打開了新世界。
網友三:實現簡單,腦洞很大啊。
網友四:這個迷宮能走得通嗎?能不能寫一段代碼,顯示能連通的路徑。
代碼片段二:
分享者稱,真的可以執行的,還把我嚇壞了。網友是怎么看待這段代碼的呢?
網友一:驚呆了,為啥這都能執行啊?
網友二:我對自己的孤陋寡聞而慚愧。。。刷新我對代碼的認知。
網友三:簡直喪心病狂!
網友四:運行結果竟然是alert("Hello, JavaScript")。
網友五:很強勢。
代碼片段3:
分享者稱,這個正則表達式可以測質數,道理就是構造一個 1111111,強行讓正則引擎實現一個除法。
網友對這段代碼有什么看法呢?
網友一:相當驚艷!!!只是執行效率有點低啊,而且n的位數多了會越界。
網友二:想了好一會兒才明白。
網友三:stack上搜了下才理解。
上面分享的三段代碼,看起來非常精簡。就是這樣精簡的代碼,竟然是可運行的,著實令人驚嘆。不知道各位大俠,上面的三段代碼,你覺得怎樣,可以在下面留言哦。
學編程技術,就到W3Cschool,如果你喜歡我們的文章,可以點擊右上角關注我們;如果你想看到更多IT界的資訊,可以加我們的公眾號。
公眾號:w3cschoolcn
*請認真填寫需求信息,我們會在24小時內與您取得聯系。