JS数据库：手机处理器列表

海天鹰

已于 2022-10-28 18:38:31 修改

阅读量835

点赞数

分类专栏： JS 文章标签： js

于 2022-10-28 11:51:41 首次发布

本文链接：https://blog.csdn.net/sonichty/article/details/127568563

版权

JS 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

参考

树形数据库设计：https://www.cnblogs.com/kissdodog/p/3297894.html

按型号过滤：

搜索：

improt.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SOC_import</title>    
</head>
<body>
<h1 align="center">导入数据</h1>
<hr>
<div id="msg"></div>

<script>
    var msg = document.getElementById('msg');
    if (!window.openDatabase) {
        msg.textContent = 'Databases are not supported by your browser !';
    } else {
        //创建一个数据库对象，4个参数分别是数据库名，版本号，数据库的描述，数据库大小 
        var db = openDatabase('SOC', '1.0', 'SOC parameters', 102400);
        if (!db) {
            msg.textContent = '数据库创建失败！';
        } else {
            msg.textContent = '数据库创建成功！';
            //开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句
            db.transaction(function (tx) {
                var sql = 'DROP TABLE IF EXISTS SOC';
                tx.executeSql(sql, [],
                    function (tx, result) {
                        var p = document.createElement('p');
                        p.textContent = sql;
                        p.appendChild(document.createElement('br'));
                        p.appendChild(document.createTextNode('成功！'));
                        msg.appendChild(p);
                    },
                    function (tx, error) {
                        var p = document.createElement('p');
                        p.textContent = sql;
                        p.appendChild(document.createElement('br'));
                        p.appendChild(document.createTextNode('失败：' + error.message));
                        msg.appendChild(p);
                    }
                );
            })

            db.transaction(function (tx) {
                //创建数据库表和字段
                var sql = 'CREATE TABLE SOC(id INTEGER PRIMARY KEY, path TEXT, name TEXT, model TEXT, release_date TEXT, lithography TEXT, cores TEXT, GPU TEXT, resolution TEXT, camera TEXT, phones TEXT)';
                tx.executeSql(sql, [],
                    function (tx, result) {
                        var p = document.createElement('p');
                        p.textContent = sql;
                        p.appendChild(document.createElement('br'));
                        p.appendChild(document.createTextNode('成功！'));
                        msg.appendChild(p);
                    },
                    function (tx, error) {
                        var p = document.createElement('p');
                        p.textContent = sql;
                        p.appendChild(document.createElement('br'));
                        p.appendChild(document.createTextNode('失败：' + error.message));
                        msg.appendChild(p);
                    }
                );
            })
            //批量插入数据
            db.transaction(function (tx) {
                sql = "INSERT INTO SOC(path, name, model, release_date, lithography, cores, GPU, resolution, camera, phones) VALUES \
                                      ('0/', 'SOC', '', '', '', '', '', '', '', ''),\
                                      ('0/0', 'Apple', '', '', '', '', '', '', '', ''),\
                                      ('0/1', 'Qualcomm', '', '', '', '', '', '', '', ''),\
                                      ('0/2', 'MediaTek', '', '', '', '', '', '', '', ''),\
                                      ('0/3', 'HiSilicon', '', '', '', '', '', '', '', ''),\
                                      ('0/4', 'UNISOC', '', '', '', '', '', '', '', ''),\
                                      ('0/5', 'Samsung', '', '', '', '', '', '', '', ''),\
                                      ('0/0/0', 'A', '', '', '', '', '', '', '', ''),\
                                      ('0/1/0', 'Snapdragon 8xx', '', '', '', '', '', '', '', ''),\
                                      ('0/1/1', 'Snapdragon 7xx', '', '', '', '', '', '', '', ''),\
                                      ('0/1/2', 'Snapdragon 6xx', '', '', '', '', '', '', '', ''),\
                                      ('0/1/3', 'Snapdragon 4xx', '', '', '', '', '', '', '', ''),\
                                      ('0/2/0', 'Dimensity', '', '', '', '', '', '', '', ''),\
                                      ('0/2/1', 'Helio', '', '', '', '', '', '', '', ''),\
                                      ('0/2/2', 'MT XXXX', '', '', '', '', '', '', '', ''),\
                                      ('0/3/0', 'Kirin 9XX', '', '', '', '', '', '', '', ''),\
                                      ('0/3/1', 'Kirin 6XX', '', '', '', '', '', '', '', ''),\
                                      ('0/3/2', 'K3VX', '', '', '', '', '', '', '', ''),\
                                      ('0/4/0', 'TXXX', '', '', '', '', '', '', '', ''),\
                                      ('0/5/0', 'Exynos', '', '', '', '', '', '', '', ''),\
                                      ('0/0/0/0', 'A8', 'APL1011', '2014/09', '20nm', '2', 'Power VR G6450 MP4', '1920 x 1080', '8MP', 'iPhone 6, iPhone 6 Plus, iPod touch 6, iPad mini 4, Apple TV 4'),\
                                      ('0/0/0/0', 'A7', 'APL0698', '2013/09', '28nm', '2', 'Power VR G6430 MP4', '1336 x 640', '8MP', 'iPhone 5S, iPad mini 2/3, iPad Air'),\
                                      ('0/0/0/0', 'A6', 'APL0598', '2012/09', '32nm', '2', 'PowerVR SGX543 MP3', '1336 x 640', '8MP', 'iPhone 5, iPhone 5C'),\
                                      ('0/0/0/0', 'A5', 'APL0498', '2011/03', '45nm', '2', 'PowerVR SGX543 MP2', '960 x 640', '8MP', 'iPhone 4S, iPad 2'),\
                                      ('0/0/0/0', 'A4', 'APL0398', '2010/03', '45nm', '1', 'PowerVR SGX535', '960 x 640', '5MP', 'iPhone 4, iPad'),\
                                      ('0/1/0/0', 'Snapdragon 845', 'SDM845', '2018 Q1', '10nm', '8', 'Adreno 630', '3840 x 2160', '32MP', 'MI 8'),\
                                      ('0/1/0/0', 'Snapdragon 835', 'MSM8998', '2017 Q1', '10nm', '8', 'Adreno 540', '3840 x 2160', '32MP', 'MI 6'),\
                                      ('0/1/0/0', 'Snapdragon 835', 'MSM8998', '2017 Q1', '10nm', '8', 'Adreno 540', '3840 x 2160', '32MP', 'MI 6'),\
                                      ('0/1/0/0', 'Snapdragon 820', 'MSM8996', '2015 Q4', '14nm', '4', 'Adreno 530', '3840 x 2160', '28MP', 'MI 5'),\
                                      ('0/1/0/0', 'Snapdragon 801', 'APQ8074AC', '2014 Q2', '28nm', '4', 'Adreno 330', '2560 x 2048', '21MP', 'MI 4'),\
                                      ('0/1/0/0', 'Snapdragon 800', 'APQ8074AA', '2013 Q2', '28nm', '4', 'Adreno 330', '2560 x 2048', '21MP', 'Samsung GALAXY S4 LTE-A'),\
                                      ('0/1/1/0', 'Snapdragon 750G', 'SM7225', '2022 Q1', '8nm', '8', 'Adreno 619', '2520 × 1080', '50MP', 'Samsung Galaxy F52, realme Q3, Redmi Note 9 Pro, MI 10i'),\
                                      ('0/1/2/0', 'Snapdragon 695', 'SM6375', '2022 Q1', '6nm', '8', 'Adreno 619', '2520 × 1080', '50MP', 'realme Q5, iQOO U5'),\
                                      ('0/1/2/0', 'Snapdragon 680', 'SM6225', '2013 Q1', '6nm', '8', 'Adreno 610', '2520 × 1080', '64MP', 'iQOO U5x 4G'),\
                                      ('0/1/2/0', 'Snapdragon 600', 'APQ8074AA', '2013 Q1', '28nm', '4', 'Adreno 320', '2048 × 1536', '21MP', 'MI 2S'),\
                                      ('0/1/3/0', 'Snapdragon 4 Gen1', '', '2022 Q3', '6nm', '8', 'Adreno 619', '2408 × 1080', '64MP', 'Redmi Note 12'),\
                                      ('0/1/3/0', 'Snapdragon 480', '', '2022 Q1', '8nm', '8', 'Adreno 619', '2408 × 1080', '64MP', 'vivo Y53s'),\
                                      ('0/1/3/0', 'Snapdragon 460', 'SM4250-AA', '2019 Q4', '11nm', '8', 'Adreno 610', '2520 × 1080', '48MP', 'OPPO A32, 联想乐檬K12'),\
                                      ('0/1/3/0', 'Snapdragon 410', 'MSM8916', '2014 Q1', '28nm', '4', 'Adreno 306', '1280 × 720', '13MP', 'Redmi 2'),\
                                      ('0/2/0/0', 'Dimensity 900', '', '2020 Q2', '6nm', '8', 'Mali-G68 MC4', '2520 × 1080', '108MP', 'iQOO Z5x'),\
                                      ('0/2/0/0', 'Dimensity 810', '', '2021 Q3', '7nm', '8', 'Mali-G57 MC2', '2520 × 1080', '64MP', 'Redmi Note 11'),\
                                      ('0/2/0/0', 'Dimensity 800U', '', '2020 Q3', '7nm', '8', 'Mali-G57 MC3', '2520 × 1080', '64MP', 'Redmi Note 9'),\
                                      ('0/2/0/0', 'Dimensity 800', 'MT6873V', '2020 Q1', '7nm', '8', 'Mali-G57 MC4', '2520 × 1080', '80MP', 'OPPO A92s, 华为畅享Z/畅享20 Pro、华为麦芒9, 荣耀Play4, 荣耀30青春版, 荣耀X10 Max, 中兴AXON 11 SE'),\
                                      ('0/2/0/0', 'Dimensity 700', '', '2020 Q4', '7nm', '8', 'Mali-G57 MC2', '2048 × 1536', '48MP', 'realme V11/V13/Q3i, Redmi Note 10, Honor X20 SE, Honor 30 Plus, Honor Play6T, vivo Y55s'),\
                                      ('0/2/1/0', 'Helio G85', 'MT6769Z', '2020 Q2', '12nm', '8', 'Mali-G52 MC2', '2340 × 1080', '48MP', 'Redmi 10X 4G'),\
                                      ('0/2/1/0', 'Helio G80', 'MT', '2020 Q1', '12nm', '8', 'Mali-G52 MC2', '2340 × 1080', '48MP', 'Cool 20, Redmi 9'),\
                                      ('0/2/1/0', 'Helio G25', 'MT6762G', '2020 Q3', '12nm', '8', 'PowerVR GE8320', '1280 × 720', '13MP', 'Redmi 9A, Redmi 9i, Redmi 10A'),\
                                      ('0/2/1/0', 'Helio X20', 'MT6797', '2016 Q1', '20nm', '10', 'Mali-T880 MP4', '1920 × 1080', '16MP', 'Redmi Note 4, 360 N4S'),\
                                      ('0/2/1/0', 'Helio X10', 'MT6795', '2014 Q4', '28nm', '10', 'PowerVR G6200', '1920 × 1080', '13MP', 'Redmi Note 2/3, Le 1S, mblu metal'),\
                                      ('0/3/0/0', 'Kirin 960', '', '2016 Q4', '16nm', '8', 'Mali-G71 MP8', '2560 × 1600', '32MP', 'Huawei Mate 9'),\
                                      ('0/3/0/0', 'Kirin 950', '', '2015 Q4', '16nm', '8', 'Mali-T880 MP4', '2560 × 1600', '32MP', 'Huawei Mate 8'),\
                                      ('0/3/0/0', 'Kirin 925', '', '2015 Q1', '28nm', '8', 'Mali-450 MP4', '2560 × 1600', '32MP', 'Huawei Mate 7'),\
                                      ('0/3/1/0', 'Kirin 620', '', '2014 Q3', '28nm', '8', 'Mali-T628', '1280 × 720', '13MP', 'Honor 4C/4X'),\
                                      ('0/4/0/0', 'T610', '', '2019 Q4', '12nm', '8', 'Mali-G52 3EE MC2', '1280 × 720', '13MP', 'Honor Play 20, Honor Play 5T'),\
                                      ('0/4/0/0', 'T310', '', '2019 Q4', '12nm', '4', 'PowerVR GE8300', '1280 × 720', '13MP', 'mblu 10'),\
                                      ('0/5/0/0', 'Exynos 4412', '', '2012', '32nm', '4', 'Mali-400 MP4', '1280 × 720', '13MP', 'Samsung Galaxy S III')";
                tx.executeSql(sql, [],
                    function (tx, result) {
                        var p = document.createElement('p');
                        p.textContent = sql;
                        p.appendChild(document.createElement('br'));
                        p.appendChild(document.createTextNode('成功！'));
                        msg.appendChild(p);
                    },
                    function (tx, error) {
                        var p = document.createElement('p');
                        p.textContent = sql;
                        p.appendChild(document.createElement('br'));
                        p.appendChild(document.createTextNode('失败：' + error.message));
                        msg.appendChild(p);
                    }
                );
            });

        }
    }
</script>
</body>
</html>

index.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SOC</title>
<style>
h1 { text-align: center; }
a { text-decoration: none; padding: 5px; }
span { padding: 5px; }
table { margin: 0 auto; }
button { margin: 10px 5px; }
.class:focus { background-color: lightblue; }
#datatable { border-collapse: collapse; }
#datatable td { padding: 3px; }
#datatable td, th { border: 1px solid black; padding: 5px; }
#datatable tr:hover { background: lightblue; }
</style>
</head>
<body>
<div id="msg"></div>
<h1>SOC</h1>
<div align="center"><input type="text" id="text" size=6> <button id="btnSearch">搜索</button> <button id="button_clear">清除</button></div>
<div id="nav1" align="center"></div>
<div id="nav2" align="center"></div>
<table id="datatable"></table>
<p align="center">参考：
<a href="https://www.ijrsoftware.com/soc-l/" target="_blank">SoC-L</a>
<a href="https://www.mydrivers.com/zhuanti/tianti/01/index.html" target="_blank">手机CPU性能天梯图</a>
<a href="https://www.cnblogs.com/kissdodog/p/3297894.html" target="_blank">树形数据库设计</a>
<a href="https://www.qualcomm.com/" target="_blank">Qualcomm</a>
<a href="https://www.mediatek.com/" target="_blank">MediaTek</a>
</p>
<p align="center">&copy;&nbsp;Copyright 2022 版权所有 海天鹰出品 sonichy@163.com</p>
<script>
        function $id(s) { return document.getElementById(s); }

        var datatable = document.getElementById('datatable');

        function tablehead() {
            var tr = document.createElement('tr');
            var th = document.createElement('th');
            th.innerHTML = 'id';
            tr.appendChild(th);
            th = document.createElement('th');
            th.innerHTML = 'path';
            tr.appendChild(th);
            th = document.createElement('th');
            th.innerHTML = 'name';
            tr.appendChild(th);
            th = document.createElement('th');
            th.innerHTML = 'model';
            tr.appendChild(th);
            th = document.createElement('th');
            th.innerHTML = 'release_date';
            tr.appendChild(th);
            th = document.createElement('th');
            th.innerHTML = 'lithography';
            tr.appendChild(th);
            th = document.createElement('th');
            th.innerHTML = 'cores';
            tr.appendChild(th);
            th = document.createElement('th');
            th.innerHTML = 'GPU';
            tr.appendChild(th);
            th = document.createElement('th');
            th.innerHTML = 'resolution';
            tr.appendChild(th);
            th = document.createElement('th');
            th.innerHTML = 'camera';
            tr.appendChild(th);
            th = document.createElement('th');
            th.innerHTML = 'phones';
            tr.appendChild(th);
            datatable.appendChild(tr);
        }

        //创建一个数据库对象，4个参数分别是数据库名，版本号，数据库的描述，数据库大小 
        var db = openDatabase('SOC', '', 'SOC parameters', 102400);

        //构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录 
        function showData(row, i) {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            td.innerHTML = i + 1;
            tr.appendChild(td);
            td = document.createElement('td');
            td.innerHTML = row.path;
            tr.appendChild(td);
            td = document.createElement('td');
            td.innerHTML = row.name;
            tr.appendChild(td);
            td = document.createElement('td');
            td.innerHTML = row.model;
            tr.appendChild(td);
            td = document.createElement('td');
            td.innerHTML = row.release_date;
            tr.appendChild(td);
            td = document.createElement('td');
            td.innerHTML = row.lithography;
            tr.appendChild(td);
            td = document.createElement('td');
            td.innerHTML = row.cores;
            tr.appendChild(td);
            td = document.createElement('td');
            td.innerHTML = row.GPU;
            tr.appendChild(td);
            td = document.createElement('td');
            td.innerHTML = row.resolution;
            tr.appendChild(td);
            td = document.createElement('td');
            td.innerHTML = row.camera;
            tr.appendChild(td);
            td = document.createElement('td');
            td.innerHTML = row.phones;
            tr.appendChild(td);
            datatable.appendChild(tr);
        }

        //这个函数用于显示所有的行到表格中，这些行是从数据库中拿出来的 
        function showAllData(where, order) {
            datatable.innerHTML = '';
            //开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句 
            if (order == '')
                order = ' order by id';
            db.transaction(function (tx) {
                var sql = 'select * from SOC' + where + order;
                console.log(sql);
                tx.executeSql(sql, [], function (tx, rs) {                    
                    tablehead();
                    //遍历结果集，对于每一行，依次调用showData来在table上创建对于的html文本 
                    for (var i = 0; i < rs.rows.length; i++) {
                        //对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断） 
                        showData(rs.rows.item(i), i);
                    }
                });
            });
        }

        showAllData('', '');

        function class1() {
            db.transaction(function (tx) {
                var sql = "select * from SOC where path like '0/_' order by name asc";
                console.log(sql);
                tx.executeSql(sql, [],
                    function (tx, rs) {
                        for (var i = 0; i < rs.rows.length; i++) {                     
                            var button = document.createElement('button');
                            button.className = "class1";
                            button.textContent = rs.rows.item(i).name;
                            button.value = rs.rows.item(i).path;
                            button.onclick = function () {
                                 class2(this.value);
                                 var class1 = document.getElementsByClassName("class1");
                                 for (var j=0; j<class1.length; j++) {
                                    class1[j].style.backgroundColor = "";
                                 }
                                 this.style.backgroundColor = "lightblue";
                            };
                            $id('nav1').appendChild(button);
                        }                            
                    });
            })
        }
        class1();

        function class2(path) {
            datatable.innerHTML = '';
            db.transaction(function (tx) {
                var sql = "select * from SOC where path like '" + path + "/_'";
                console.log(sql);
                tx.executeSql(sql, [],
                    function (tx, rs) {
                        $id('nav2').innerHTML = '';
                        for (var i = 0; i < rs.rows.length; i++) {
                            var button = document.createElement('button');
                            button.className = "class2";
                            button.textContent = rs.rows.item(i).name;
                            button.value = rs.rows.item(i).path;
                            button.onclick = function () {
                                 showAllData(' where path like "' + this.value + '/_"', '');
                                 var class2 = document.getElementsByClassName("class2");
                                 for (var j=0; j<class2.length; j++) {
                                    class2[j].style.backgroundColor = "";
                                 }
                                 this.style.backgroundColor = "lightblue";
                            };
                            $id('nav2').appendChild(button);
                        }
                    });
            })
        }

        function search(s) {
            $id('nav2').innerHTML = "";
            var text = $id('text').value;
            var where = " where name like '%" + text + "%' or phones like '%" + text + "%' or GPU like '%" + text + "%'";
            showAllData(where, '');
        }
        
        $id('text').addEventListener('keydown', function (e) {
            if (e.keyCode == 13) {
                search($id('text').value);
            }
        });
        
        $id('btnSearch').addEventListener('click', function () {
            search($id('text').value);
        });

        $id('button_clear').addEventListener('click', function () {
            $id('text').value = '';
            search('');
        });
</script>
</body>
</html>