当前位置：网站首页>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);
}
边栏推荐
- What is the difference between ERP production management and MES management system?
- Close asymmetric key
- Application method of new version UI of idea + use method of non test qualification and related introduction
- MES helps enterprises to transform intelligently and improve the transparency of enterprise production
- Error: clear the history in the search box in the website?
- Wechat applet image saving function
- Background color translucent
- What should be paid attention to when establishing MES system? What benefits can it bring to the enterprise?
- [open source project] easycmd command graphical software
- Specify 404 and 500 error reporting pages.
猜你喜欢
【字符集九】gbk拷贝到Unicode会乱码？
Loading font component loading effect
![[advanced pointer III] implement C language quick sorting function qsort & callback function](/img/f0/3729db83ba3eb15c7df0958858ece9.png)
[advanced pointer III] implement C language quick sorting function qsort & callback function
Regular expressions in JS
Build personal blog and web.
![[new planning]](/img/8e/0e15e0f3ee08002eaceea1fe8948ec.jpg)
[new planning]
Engineers learn music theory (I) try to understand music
Box model border
ip、DNS、域名、URL、hosts
【数据存储】浮点型数据在内存中的存储
随机推荐
Shell基本语法--数组
Error: clear the history in the search box in the website?
Wechat applet image saving function
第三章 寄存器 （内存访问）
The era of post MES system has come gradually
Error: ER_ NOT_ SUPPORTED_ AUTH_ MODE: Client does not support authentication protocol requested ... ...
What is the MES system? What is the operation process of MES system?
【新规划】
Knee joint
When the uniapp page jumps with complex data parameters.
判断对象是否为空
[advanced pointer 2] array parameter transfer & pointer parameter transfer & function pointer & function pointer array & callback function
Is it really expensive for enterprises to launch MES software?
The difference between deep copy and shallow copy
Engineers learn music theory (III) interval mode and chord
POI library update excel picture
Never use MES as a tool, or you will miss the most important thing
报错：文件夹在另一个程序中打开无法删除怎么办
分库分表会带来读扩散问题？怎么解决？
第六章-包含多个段的程序