当前位置：网站首页>Make a simple page with the websql database of HTML5:
Make a simple page with the websql database of HTML5:
2022-06-12 08:47:00 【Wu Yu】
Made a small shopping cart settlement page , Use webSQL, Realize local , An access procedure in the front end ., Product page elements are dynamically generated , In from dom There will be unexpected problems when getting elements !
For reference only, relevant use ideas :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="./shop.css" />
<link rel="stylesheet" href="index.css" />
<script type="text/javaScript " src="./jquery.min.js"></script>
<script type="text/javaScript" src="./jquery.mobile-1.4.5.min.js"></script>
<!-- <script type="text/javaScript" src="./shop.js"></script> -->
<!-- <script type="text/javaScript" src="./shop2.js"></script> -->
<title></title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Optional Bootstrap topic file （ Generally, it is not necessary to introduce ） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- Abreast of the times Bootstrap The core JavaScript file -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script type="text/javaScript " src="./jquery.min.js"></script>
<title> Amoy ! You like it </title>
</head>
<body>
<div data-role="header" style="background-color: white; color: black;">
<!-- <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left"> Sign in </a> -->
<h1><span><a href="https://www.taobao.com/" style="color:black ; text-decoration: none;" > subscribe </a></span>
<span><a href="https://www.taobao.com/" style="color:black ;text-decoration: none;"> recommend </a></span>
</h1>
<!-- <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left"> Membership code </a> -->
</div>
<!-- <div id="status" name="status">
<form action="">
<input type="button" value=" add to " />
</form>
</div> -->
<div id="double"> <span class="glyphicon glyphicon-chevron-right"></span> <span style="font-weight: 1200; font-style: oblique; color: rgb(48, 46, 46); "> double 12 The activity price is the first to see </span> </div>
<div id="car" class="car">
<div class="head_row hid">
<div class="check left"> <input type="checkbox" id="check" style="margin-top: 15px;" onclick="action()" ></div>
<div class="img left" style="font-size: 5%;"> Future generations </div>
<div class="name left" style="width: 10%; margin-left: 10%;font-size: 5%;"> Name of commodity </div>
<div class="price left" style="width: 10%; margin-left: 8%; font-size: 5%;"> The unit price </div>
<div class="number left" style="width: 10%; margin-left: 5%; font-size: 5%;"> Number </div>
<!-- <div class="subtotal left"style="width: 10%; margin-left: 5%; font-size: 5%;"> Subtotal </div> -->
<div class="ctrl left"style="width: 10%; margin-left: 10%; font-size: 5%;"> operation </div>
</div>
<div id="status" style="text-align: left;">
</div>
</div>
<div id="sum_area" style="height: 60px;">
<div id="pay"><a href="www.taobao.com"> To settle accounts </a></div>
<div id="pay_amout"> total ：<span id="price_num">0</span> element </div>
</div>
<div id="box">
<div class="box_head" style="text-align: center; font-size: 14px;"> People who buy goods in shopping carts also buy <div>
<ul style="display: flex;">
<div class="w_shop";>
<a href="#" style="text-decoration: none;">
<div class="w_img"><img src="./img/8.jpg" alt=""></div>
</a>
<div class="w_price">
<p> A shop that can't knock clothes </p>
<!-- <p style="color: red;">999 element <span style="color: rgb(160, 165, 170);">500+ Personal payment ...</span></p> -->
</div>
</div>
<div class="w_shop";>
<a href="#" style="text-decoration: none;">
<div class="w_img"><img src="./img/12.jpg" alt=""></div>
</a>
<div class="w_price">
<p> Korean sweater college style </p>
<!-- <p style="color: red;">999 element <span style="color: rgb(160, 165, 170);">500+ Personal payment ...</span></p> -->
</div>
</div>
</ul>
</div>
<div data-role="footer" id="foooter">
<div data-role="controlgroup" data-type="horizontal" id="tubiao">
<div class="footer_li"> <a href="index.html" class="glyphicon glyphicon-home" style="text-decoration: none;"> Home page </a></div>
<div class="footer_li"><a href="xiaoxi.html" class="glyphicon glyphicon-envelope" style="text-decoration: none;"> news </a></div>
<div class="footer_li"><a href="shop.html" style="text-decoration: none;" class="glyphicon glyphicon-shopping-cart"> The shopping cart </a></div>
<div class="footer_li" ><a href="my.html" style="text-decoration: none; " class="glyphicon glyphicon-unchecked"> My Taobao </a></div>
</div>
</div>
<script type="text/javaScript " src="./index.js" ></script>
<script type="text/javaScript " src="./lenster.js" ></script>
<script type="text/javaScript" src="./shop2.js"></script>
</body>
</html>
window.onload = function () {
var db = openDatabase("oneDB", "1.0", "Test DB", 10 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS oneDB(id , log,name,text)");
});
db.transaction(function (tx) {
// Fetch the contents of the database
tx.executeSql(
"select * from oneDB",
[],
function (tx, results) {
var len = results.rows.length;
var id;
var msg;
var pr;
var na;
for (var i = 0; i < len; i++) {
// Get the object , That is, the data stored in the database log Corresponding value
id = results.rows.item(i).id;
msg = results.rows.item(i).log;
pr = results.rows.item(i).name;
na = results.rows.item(i).text;
// var dic = document.createElement('div');
// dic.id="goods"
var tupian = document.createElement("img");
tupian.src = msg;
tupian.style.cssText =
"width:15%;height:100px; display: inline-block;";
var p1 = document.createElement("span");
p1.innerText = pr;
p1.style.cssText =
"font-size:5px;font-weight:50px;margin:5px 3%; width:10px";
var p2 = document.createElement("span");
p2.innerText = na;
p2.style.cssText =
"font-size:5px;font-weight:50px; 10px; width:19%;margin-right:3%";
var input = document.createElement("input");
input.type = "checkbox";
input.className = "input";
input.name = "option";
input.style.cssText = "margin-left:5px; width:5%";
var number = document.createElement("span");
number.innerText = "x1";
number.style.cssText =
"font-size:5%;font-weight:50px;margin-left:5%; width:9%";
var xioaji = document.createElement("input");
xioaji.type = "text";
xioaji.id = "a1";
xioaji.style.cssText =
"margin-left:10%;width:10%;height:50px; outline-style: none; ";
var butt = document.createElement("input");
butt.type = "button";
butt.className = "A";
butt.value = " Delete ";
butt.style.cssText =
"margin-left:10%;width:10%;height:20px; background-color: #FF4B00;color:#fff; border:0 none;";
var br = document.createElement("br");
var ty = document.getElementById("status");
ty.appendChild(input);
ty.appendChild(tupian);
ty.appendChild(p2);
ty.appendChild(p1);
ty.appendChild(number);
// ty.appendChild(xioaji);
ty.appendChild(butt);
ty.appendChild(br);
}
},
null
);
});
};
window.onload = function () {
initial();
count();
};
function initial() {
var db = openDatabase("oneDB", "1.0", "Test DB", 10 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS oneDB(id , log,name,text)");
});
db.transaction(function (tx) {
// Fetch the contents of the database
tx.executeSql(
"select * from oneDB",
[],
function (tx, results) {
var len = results.rows.length;
var id;
var msg;
var pr;
var na;
for (var i = 0; i < len; i++) {
// Get the object , That is, the data stored in the database log Corresponding value
id = results.rows.item(i).id;
msg = results.rows.item(i).log;
pr = results.rows.item(i).name;
na = results.rows.item(i).text;
// var dic = document.createElement('div');
// dic.id="goods"
var tupian = document.createElement("img");
tupian.src = msg;
tupian.style.cssText =
"width:15%;height:100px; display: inline-block;";
var p1 = document.createElement("span");
p1.innerText = pr;
p1.style.cssText =
"font-size:5px;font-weight:50px;margin:5px 3%; width:10px";
var p2 = document.createElement("span");
p2.innerText = na;
p2.style.cssText =
"font-size:5px;font-weight:50px; 10px; width:19%;margin-right:3%";
var input = document.createElement("input");
input.type = "checkbox";
input.className = "input";
input.name = "option";
input.style.cssText = "margin-left:5px; width:5%";
var number = document.createElement("span");
number.innerText = "x1";
number.style.cssText =
"font-size:5%;font-weight:50px;margin-left:5%; width:9%";
var xioaji = document.createElement("input");
xioaji.type = "text";
xioaji.id = "a1";
xioaji.style.cssText =
"margin-left:10%;width:10%;height:50px; outline-style: none; ";
var butt = document.createElement("input");
butt.type = "button";
butt.className = "A";
butt.value = " Delete ";
butt.style.cssText =
"margin-left:10%;width:10%;height:20px; background-color: #FF4B00;color:#fff; border:0 none;";
var br = document.createElement("br");
var ty = document.getElementById("status");
ty.appendChild(input);
ty.appendChild(tupian);
ty.appendChild(p2);
ty.appendChild(p1);
ty.appendChild(number);
// ty.appendChild(xioaji);
ty.appendChild(butt);
ty.appendChild(br);
}
},
null
);
});
}
function count() {
let check = document.querySelectorAll(".input");
console.log(check);
}
边栏推荐
- (P13) use of final keyword
- 动态线段树leetcode.699
- ctfshow web3
- Close asymmetric key
- Installation of Shengxin R package
- JVM学习笔记：三 本地方法接口、执行引擎
- Is it really expensive for enterprises to launch MES software?
- Application method of new version UI of idea + use method of non test qualification and related introduction
- Analysis of 43 cases of MATLAB neural network: Chapter 8 prediction of GRNN Network - Freight Volume Prediction Based on generalized regression neural network
- Shell basic syntax -- arithmetic operation
猜你喜欢
What is the quality traceability function of MES system pursuing?
The difference between deep copy and shallow copy
FDA reviewers say Moderna covid vaccine is safe and effective for children under 5 years of age
Py & go programming skills: logic control to avoid if else
QT realizes multi screen and multi-resolution adaptation
Regularization to limit the number of digits after the decimal point of an input number
Principle and configuration of MPLS
【字符集七】汉字的宽字符码和多字节码分别是多少
About weights exercise
MPLS的原理与配置
随机推荐
Difference between binary GB and gib
QT realizes multi screen and multi-resolution adaptation
The difference between deep copy and shallow copy
第四章-第一个程序
[data storage] storage of floating point data in memory
torch.logical_and()方法
(p15-p16) optimization of the right angle bracket of the template and the default template parameters of the function template
ctfshow web3
Close asymmetric key
Background location case 1
第六章-包含多个段的程序
Jump to an interface at a specified time. (Web Development)
【动态内存管理】malloc＆calloc和realloc和笔试题和柔性数组
正则校验用户名
(node:22344) [DEP0123] DeprecationWarning: Setting the TLS ServerName to an IP address is not permit
Dynamically create and submit forms
[GUI development] browsing function implementation model of image processing software
Knee joint
Shell basic syntax -- arithmetic operation
Background position - exact units