<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品评价系统</title>
</head>
<body>
<div id="inputDiv">
商品名称：<input type="text" id="goodsName" style="width:200px;"/><br/>
商品评价：<textarea id="goodsComment" style="width:200px;heigth:50px;" ></textarea><br/>
商品星级：<select id="goodsGrade">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>☆<br/>
<input type="button" id="inputButton" value="提交评价" onclick="saveData()"/><hr/>
<input type="button" id="showButton" value="显示所有评价" onClick="showData()"/>
<input type="button" id="clearButton" value="删除所有评价" onClick="deleteData('goodsDB')"/>
</div>
<div id="resultDiv">
<table border="1" >
<tr><td>商品名称</td><td>商品评价</td><td>评价星级</td><td>销售时间</td></tr>
<tbody id="showBody">
</tbody>
</table>
</div>
<script type="text/javascript">
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var dbName="goodsDB";//数据库名
var dbVersion=1;//版本号
var storeName="commentStore";//数据仓库名称
var idb=null;
init();
//代码初始化
function init(){
var dbRequest=indexedDB.open(dbName,dbVersion);
dbRequest.onsuccess=function(e){
idb=e.target.result;//获取连接成功时的数据库对象
alert("数据库连接成功。");
};
dbRequest.onerror=function(e){
alert('数据库连接失败！');
};
dbRequest.onupgradeneeded=function(e){
idb=e.target.result;
if(!idb.objectStoreNames.contains(storeName)){
var optionalParameters={
keyPath:"id",
autoIncrement:true
};
var objectStore=idb.createObjectStore(storeName,optionalParameters);
alert("对象仓库创建成功！");
}
var tx=e.target.transaction;
alert("数据库版本更新成功！版本"+e.oldVersion+"=>版本"+e.newVersion);
};
}
//定义保存数据函数
function saveData(){
//获得表单数据及当前日期
var goodsName=document.getElementById("goodsName");
var goodsComment=document.getElementById("goodsComment");
var goodsGrade=document.getElementById("goodsGrade");
var time=new Date().getTime();
var comment={
goodsName:goodsName.value,
goodsComment:goodsComment.value,
goodsGrade:goodsGrade.value,
time:time
};
/* var comment=[{
goodsName:goodsName.value,
goodsComment:goodsComment.value,
goodsGrade:goodsGrade.value,
time:time
}];*/
var tx=idb.transaction(storeName,'readwrite');
tx.oncomplete=function(){
alert("数据保存成功");
};
tx.onabort = function() {
alert("数据保存失败");
};
var objectStore = tx.objectStore(storeName);
objectStore.add(comment);
}
function showData(){
//清空数据表格
var showBody=document.getElementById("showBody");
showBody.innerHTML="";
var tx=idb.transaction(storeName,'readonly');
var objectStore= tx.objectStore(storeName);
var request=objectStore.openCursor();
request.onsuccess = function(e) {
var cursor = e.target.result;
if (cursor) {
var tableRow=showBody.insertRow(0);
tableRow.insertCell(0).innerHTML=cursor.value.goodsName;
tableRow.insertCell(1).innerHTML=cursor.value.goodsComment;
tableRow.insertCell(2).innerHTML=createStar(cursor.value.goodsGrade);
tableRow.insertCell(3).innerHTML=getFormatTime(cursor.value.time);
/* tableRow.insertCell(0).innerHTML=cursor.value[0].goodsName;
tableRow.insertCell(1).innerHTML=cursor.value[0].goodsComment;
tableRow.insertCell(2).innerHTML=cursor.value[0].goodsGrade;
tableRow.insertCell(3).innerHTML=getFormatTime(cursor.value[0].time);*/
cursor.continue();
} else {
console.log("检索结束!");
}
};
request.onerror=function(e){
console.log("检索失败!");
};
}
function deleteData(databaseName){
var request=indexedDB.deleteDatabase(databaseName);
//清空数据表格
var showBody=document.getElementById("showBody");
showBody.innerHTML="";
}
function createStar(goodsGrade){
var stars="";
for(var i=0;i<goodsGrade;i++){
stars+="☆";
};
return stars;
}
//将长整形日期数据格式化显示
function getFormatTime(myDateTime){
var myDate=new Date(myDateTime);
var dateStr="";
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
var date=myDate.getDate();
var hour=myDate.getHours();
var minute=myDate.getMinutes();
var second=myDate.getSeconds();
dateStr=dateStr+year+"年"+month+"月"+date+"日 "+hour+":"+minute+":"+second+"<br/>";
return dateStr;
}
</script>
</body>
</html>
html5案例大全.zip
5星 · 超过95%的资源 需积分: 0 14 浏览量
2023-03-29
22:25:38
上传
评论 1
收藏 169.73MB ZIP 举报 
html5案例大全.zip （516个子文件） 
iceage4.avi 6.87MB
HTML5Structure.css 711B style.css 244B outerStyle.css 91B hander3.cur 7KB hander4.cur 7KB hander1.cur 7KB hander2.cur 7KB 梦死醉生.eot 1000KB borderImage.EPS 695KB
myIcon.gif 6KB eg_arrow.gif 59B
indexedDB.html 5KB sqlite.html 4KB form.html 3KB documentCookie.html 3KB eventObject.html 3KB positionAttribute.html 3KB formEventDemo.html 3KB buttonDemo.html 3KB regExpString.html 3KB formMethod.html 3KB formSelector.html 3KB HTML5Structure.html 3KB bindEvent.html 3KB Element&NodeList.html 3KB childrenNode.html 3KB unBindEvent.html 2KB arrayMethod.html 2KB keyEventDemo.html 2KB tableMethod.html 2KB drag&drop2.html 2KB drawTransformGraphics.html 2KB tableColor.html 2KB drag&drop.html 2KB pixelProcess.html 2KB mouseEventDemo.html 2KB parentNode.html 2KB outerInsertNode.html 2KB videoPlayer.html 2KB cloneNode.html 2KB prototypeObject.html 2KB deleteNode.html 2KB localStorage.html 2KB structureDemo.html 2KB innerInsertNode.html 2KB fadeIn&Out.html 2KB subElementFilterSelector.html 2KB hyperLink.html 2KB JSONObject.html 2KB filterNode.html 2KB regExp.html 2KB animate.html 2KB dateMethod.html 2KB contentOperator.html 2KB dealString.html 2KB setInterval.html 2KB formAttributeFilterSelector.html 2KB tableCSS.html 2KB borderImageDemo.html 2KB pseudoClass.html 2KB show&hide.html 2KB test.html 2KB siblingNode.html 2KB attributeOperator.html 2KB delay&stop.html 2KB classReplaceOperator.html 2KB fontAttribute.html 2KB navigator.html 2KB twoDimensionArray.html 2KB locationProperty.html 2KB attributeSelector.html 2KB sessionStorage.html 2KB mathMathod.html 1KB onEvent.html 1KB drawPath.html 1KB classOperator.html 1KB documentEventDemo.html 1KB borderStyleDemo.html 1KB formElementOperator.html 1KB cursorAttribute.html 1KB simpleFilterSelector.html 1KB merge&unique.html 1KB predefinedFunction1.html 1KB jqueryChart.html 1KB windowMethod.html 1KB paddingDemo.html 1KB background.html 1KB jqueryTable.html 1KB documentMethod.html 1KB salary.html 1KB each.html 1KB documentMethod1.html 1KB arrayConstructor.html 1KB subString.html 1KB textAttribute.html 1KB slideUp&Down.html 1KB EventMethod.html 1KB listDemo.html 1KB dateConstructor.html 1KB共 516 条
- 1
- 2
- 3
- 4
- 5
- 6
资源评论
god4king2023-03-30不错不错 #运行顺畅 #注释完整
