用HTML5的WebSQL Database 做一个简单页面:

最新推荐文章于 2024-07-22 15:42:11 发布

吴爃

最新推荐文章于 2024-07-22 15:42:11 发布

阅读量831

点赞数

文章标签： html5 数据库 javascript

本文链接：https://blog.csdn.net/qq_59369367/article/details/123167760

版权

做了一个小购物车的结算页面,使用webSQL,实现本地,前端的一个存取过程.,商品的页面元素是动态生成了,在从dom获取元素的时候会出现意想不到的问题!

仅供参考相关的使用思路:

<!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>
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <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">
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <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>淘!你喜欢 </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">签到</a> -->
        <h1><span><a href="https://www.taobao.com/"  style="color:black ; text-decoration: none;" >订阅</a></span>
          <span><a href="https://www.taobao.com/" style="color:black ;text-decoration: none;">推荐</a></span>
        </h1>
        <!-- <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">会员码</a> -->
      </div> 
      <!-- <div id="status" name="status">
         <form action="">
             <input type="button" value="添加" />
         </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); ">双12活动价格抢先看</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%;">&nbsp;&nbsp;全选</div>
        <div class="name left" style="width: 10%; margin-left: 10%;font-size: 5%;">商品名称</div>
        <div class="price left" style="width: 10%; margin-left: 8%; font-size: 5%;">单价</div>
        <div class="number left" style="width: 10%; margin-left: 5%; font-size: 5%;">数量</div>
        <!-- <div class="subtotal left"style="width: 10%; margin-left: 5%; font-size: 5%;">小计</div> -->
        <div class="ctrl left"style="width: 10%; margin-left: 10%; font-size: 5%;">操作</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">去结算</a></div>
    <div id="pay_amout">合计：<span id="price_num">0</span>元</div>
</div>



<div id="box">
    <div class="box_head" style="text-align: center; font-size: 14px;">买购物车中商品的人还买了<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>一家不会撞衫的店</p>
                <!-- <p style="color: red;">999元 <span style="color: rgb(160, 165, 170);">500+人付款...</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>韩系毛衣学院风</p>
                <!-- <p style="color: red;">999元 <span style="color: rgb(160, 165, 170);">500+人付款...</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;">主页</a></div>
        <div class="footer_li"><a href="xiaoxi.html" class="glyphicon glyphicon-envelope" style="text-decoration: none;">消息</a></div>
        <div class="footer_li"><a href="shop.html" style="text-decoration: none;" class="glyphicon glyphicon-shopping-cart">购物车</a></div>
        <div class="footer_li" ><a href="my.html"  style="text-decoration: none; " class="glyphicon glyphicon-unchecked">我的淘宝</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) {
    //取出数据库内容
    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++) {
          //拿到对象,也就是数据库中存的log对应的值
          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 = "删除";

          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) {
    //取出数据库内容
    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++) {
          //拿到对象,也就是数据库中存的log对应的值
          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 = "删除";

          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);
}