自定义数组查询

于 2024-01-30 13:29:55 发布
阅读量185 收藏
点赞数 2
分类专栏： JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sonichty/article/details/135930919
版权

WebSQL浏览器高版本已经不支持了，IndexedDB又不好用，我重新考虑自己来对数组进行查询。

门槛更低，不需要数据库支持了。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CPU列表</title>
<style>
h1 { text-align:center; }
button { margin: 5px; }
table { margin:10px auto; border-collapse:collapse; }
th, td { text-align:center; padding:10px; border:1px solid black; }
</style>
</head>
<body>
<h1>CPU</h1>
<div align="center"><input type="text" id="input_search"> <button id="button_search">搜索</button></div>
<div align="center">支持 core|thread 搜索</div>
<div id="nav1" align="center"></div>
<div id="nav2" align="center"></div>
<table id="table"></table>
<p align="center">参考：
<a href="https://www.ijrsoftware.com/cpu-l/" target="_blank">CPU-L</a>
<a href="https://www.mydrivers.com/zhuanti/tianti/cpu/index.html" target="_blank">桌面CPU性能天梯图</a>
<a href="https://www.cnblogs.com/kissdodog/p/3297894.html" target="_blank">树形数据库设计</a>
<a href="https://www.intel.com/" target="_blank">intel</a>
<a href="https://www.amd.com/" target="_blank">AMD</a>
</p>
<p align="center">&copy;&nbsp;Copyright 2024 海天鹰版权所有 sonichy@163.com</p>
<script>
var cpus = [['0/', 'CPU', '', '', '', '', '', '', '', ''],
    ['0/0', 'intel', '', '', '', '', '', '', '', ''],
    ['0/1', 'AMD', '', '', '', '', '', '', '', ''],
    ['0/0/0', 'Celeron', '', '', '', '', '', '', '', ''],
    ['0/0/1', 'Pentium', '', '', '', '', '', '', '', ''],
    ['0/0/2', 'i3', '', '', '', '', '', '', '', ''],
    ['0/0/3', 'i5', '', '', '', '', '', '', '', ''],
    ['0/0/4', 'i7', '', '', '', '', '', '', '', ''],
    ['0/0/5', 'i9', '', '', '', '', '', '', '', ''],
    ['0/0/6', 'XEON', '', '', '', '', '', '', '', ''],
    ['0/0/0/0', 'Celeron G530', 'Sandy Bridge', '2011', '32nm', '2', '2', 'HD Graphic', 'LGA1155', '65W'],
    ['0/0/0/0', 'Celeron G1610', 'Ivy Bridge', '2013 Q1', '22nm', '2', '2', 'HD Graphic', 'LGA1155', '55W'],
    ['0/0/1/0', 'Pentium G620', 'Sandy Bridge', '2011', '32nm', '2', '2', 'HD Graphic', 'LGA1155', '65W'],
    ['0/0/1/0', 'Pentium G2010', 'Ivy Bridge', '2013 Q1', '22nm', '2', '2', 'HD Graphic', 'LGA1155', '55W'],
    ['0/0/1/0', 'Pentium G3220', 'Haswell', '2013 Q3', '22nm', '2', '2', 'HD Graphic', 'LGA1150', '53W'],
    ['0/0/1/0', 'Pentium G4400', 'Skylake', '2015 Q3', '14nm', '2', '2', 'HD Graphic 510', 'LGA1151', '54W'],
    ['0/0/1/0', 'Pentium G4560', 'Kaby Lake', '2017 Q1', '14nm', '2', '4', 'HD Graphic 610', 'LGA1151', '54W'],
    ['0/0/2/0', 'i3 530', 'Westmere', '2009', '32nm', '2', '4', 'HD Graphic', 'LGA1156', '73W'],
    ['0/0/2/0', 'i3 2100', 'Sandy Bridge', '2011', '32nm', '2', '4', 'HD Graphic 2000', 'LGA1155', '65W'],
    ['0/0/2/0', 'i3 3210', 'Ivy Bridge', '2013 Q1', '22nm', '2', '4', 'HD Graphic 2500', 'LGA1155', '65W'],
    ['0/0/2/0', 'i3 4130', 'Haswell', '2013 Q3', '22nm', '2', '4', 'HD Graphic 4400', 'LGA1150', '54W'],
    ['0/0/2/0', 'i3 6100', 'Skylake', '2015 Q3', '14nm', '2', '4', 'HD Graphic 530', 'LGA1151', '51W'],
    ['0/0/3/0', 'i5 650', 'Westmere', '2010 Q1', '32nm', '2', '4', 'HD Graphic', 'LGA1156', '73W'],
    ['0/0/3/0', 'i5 750', 'Nehalem', '2010 Q1', '45nm', '4', '4', '-', 'LGA1156', '95W'],
    ['0/0/4/0', 'i7 860', 'Nehalem', '2009 Q3', '45nm', '4', '8', '-', 'LGA1156', '95W'],
    ['0/0/6/0', 'Xeon X3440', 'Nehalem', '2009 Q3', '45nm', '4', '8', '-', 'LGA1156', '95W'],
    ['0/0/6/0', 'Xeon E3-1260L', 'Sandy Bridge', '2011', '32nm', '4', '8', 'HD Graphic 2000', 'LGA1155', '45W'],
    ['0/1/0', 'Athlon', '', '', '', '', '', '', '', ''],
    ['0/1/1', 'A4', '', '', '', '', '', '', '', ''],
    ['0/1/2', 'A6', '', '', '', '', '', '', '', ''],
    ['0/1/3', 'A8', '', '', '', '', '', '', '', ''],
    ['0/1/4', 'A9', '', '', '', '', '', '', '', ''],
    ['0/1/5', 'A10', '', '', '', '', '', '', '', ''],
    ['0/1/6', 'A12', '', '', '', '', '', '', '', ''],
    ['0/1/0/0', 'Athlon II X4 600e', 'K10', '2009 Q4', '45nm', '4', '4', '-', 'AM3', '45W'],
    ['0/1/0/0', 'Athlon X4 740', 'Richland', '2012 Q4', '32nm', '4', '4', '-', 'Socket FM2', '65W'],
    ['0/1/0/0', 'Athlon 200GE', 'Zen', '2018/09/06', '14nm', '2', '4', 'Radeon Vega 3', 'AM4', '35W'],
    ['0/1/0/1', 'Athlon 3000G', 'Zen', '2019/11', '14nm', '2', '4', 'Radeon Vega 3', 'AM4', '35W'],
    ['0/1/0/1', 'Athlon Gold 3150G', 'Zen+', '2020 Q3', '12nm', '4', '4', 'Radeon Vega 3', 'AM4', '65W'],
    ['0/1/1/0', 'A4 5300', 'Trinity', '2013/06/05', '32nm', '2', '2', 'Radeon HD7480D', 'Socket FM2', '65W'],
    ['0/1/1/0', 'A4 6300', 'Richland', '2012 Q4', '32nm', '2', '2', 'Radeon HD8370D', 'Socket FM2', '65W'],
    ['0/1/3/0', 'A8 7500', 'Kaveri', '2016 Q2', '32nm', '4', '4', 'Radeon R7', 'Socket FM2+', '65W']];

button_search.onclick = function() { search(input_search.value); }

input_search.onkeypress = function(e) {
	if (e.keyCode == 13)
		search(input_search.value);
}

function class1() {
    for (i = 0; i < cpus.length; i++) {
        if (cpus[i][0].length == 3) {
            var button = document.createElement('button');
            button.className = "class1";
            button.textContent = cpus[i][1];
            button.value = cpus[i][0];
            button.onclick = function () {
                class2(this.value);
                var class1 = document.getElementsByClassName("class1");
                for (j = 0; j < class1.length; j++) {
                    class1[j].style.backgroundColor = "";
                }
                this.style.backgroundColor = "lightblue";
            };
            nav1.append(button);
        }
    }
}
class1();

function class2(path) {
    nav2.innerHTML = '';
    for (var i = 0; i < cpus.length; i++) {
        if (cpus[i][0].length == 5 && cpus[i][0].startsWith(path)) {
            var button = document.createElement('button');
            button.className = "class2";
            button.textContent = cpus[i][1];
            button.value = cpus[i][0];
            button.onclick = function () {
                search(this.value);
                var class2 = document.getElementsByClassName("class2");
                for (var j = 0; j < class2.length; j++) {
                    class2[j].style.backgroundColor = "";
                }
                this.style.backgroundColor = "lightblue";
            };
            nav2.append(button);
        }
    }
}

function tableHead() {
    var tr = document.createElement('tr');
    var th = document.createElement('th');
    th.textContent = 'id';
    tr.append(th);
    th = document.createElement('th');
    th.textContent = 'path';
    tr.append(th);
    th = document.createElement('th');
    th.textContent = 'model';
    tr.append(th);
    th = document.createElement('th');
    th.textContent = 'architecture';
    tr.append(th);
    th = document.createElement('th');
    th.textContent = 'release_date';
    tr.append(th);
    th = document.createElement('th');
    th.textContent = 'lithography';
    tr.append(th);
    th = document.createElement('th');
    th.textContent = 'core';
    tr.append(th);
    th = document.createElement('th');
    tr.append(th);
    th.textContent = 'thread';
    tr.append(th);
    th = document.createElement('th');
    th.textContent = 'GPU';
    tr.append(th);
    th = document.createElement('th');
    th.textContent = 'package';
    tr.append(th);
    th = document.createElement('th');
    th.textContent = 'TDP';
    tr.append(th);
    table.append(tr);
}

function search(s) {
    table.innerHTML = '';
    tableHead();

    var c = 1;
    for (i = 0; i < cpus.length; i++) {
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        td.textContent = c;
        tr.append(td);
        var isAppend = false;
        if (s.includes('|')) {
            var ct = s.split('|');
            if (cpus[i][5] == ct[0] && cpus[i][6] == ct[1])
                isAppend = true;
        } else if (s.includes('/')) {            
            if (cpus[i][0].length == 7 && cpus[i][0].startsWith(s))
                isAppend = true;
        }
        for (j = 0; j < cpus[i].length; j++) {
            td = document.createElement('td');
            td.textContent = cpus[i][j];
            tr.append(td);
            if (j > 0 && cpus[i][j].toLowerCase().includes(s.toLowerCase())) {
                isAppend = true;
            }
        }
        if (isAppend) {
            table.append(tr);
            c++;
        }
    }
}

search('');

</script>
</body>
</html>
海天鹰
关注
专栏目录
java自定义数组_Java自定义数组
weixin_34430692的博客
02-12 1770
前言今天有点无聊,写了一个自定义数组,里边主要实现很多js中数组的方法，例如：排序、数组连接、删除、剪切。算是加深对java的一些基础操作的印象。代码/*** @Auther dbc* @Date 2020/9/5 22:03* 自定义数组,数组元素为Object类* 构造方法：* MyArrayList() 初始化数组,长度为0* MyArrayList(int size) 创建长度...
Javascript remove 自定义数组删除方法
01-19
Javascript自定义数组删除方法remove()</title> [removed] Array.prototype.remove=function(dx){ if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++){ if(this[i]!=this...
oracle 自定义数组类型
SuperCrrazy的博客
06-08 102
CREATE OR REPLACE TYPE DW_ARRAY AS ARRAY(200) OF varchar2(1024)
php 自定义数组排序函数,PHP自定义数组排序
weixin_33164837的博客
03-24 696
/** 二维数组自定义排序函数* uasort($arr,function_name)***/$arr = array(array('a'=>1,'b'=>'c'),array('a'=>4,'b'=>'a'),array('a'=>5,'b'=>'g'),array('a'=>7,'b'=>'f'),array('a'=>6,'b'=>...
Java自定义数组排序
魔仙棒棒之主的博客
06-07 1390
Java自定义数组排序
php对自定义数组进行排序,按照自定义顺序对数组的php数组排序
weixin_39516865的博客
03-21 553
您可以使用usort()精确地指定数组的排序方式。在这种情况下，可以在比较函数中使用$ order数组。下面的例子使用closure使生活更容易。$order = array(3452342, 5867867, 7867867, 1231233);$array = array(array('id' => 7867867, 'title' => 'Some Title'),array('...
Typescript 之不会用到的技术 -自定义数组类型
northcastle的博客
10-24 181
typescript 自定义数组类型
自定义数组
小华gogo
12-25 2177
通过学习自定义数组，了解数组的数据结构。 package algorithm; public class Array&lt;E&gt; { private E[] data; private int size;//数组的实际大小 /** * 无参的构造函数，默认初始容量 */ public Array() { this(10);//默认初始容量为10 } /** ...
oracle自定义数组类型
u013272574的博客
02-25 2104
废话不多说，直接上代码 create type list_attrs as varray(10) of varchar2(80); --创建一个名为list_attrs的定长数组，元素个数最多为10 create table test_yiyu(id number,name list_attrs) --建表 insert into test_yiyu values(1,...
自定义数组类
思不凉
07-06 2340
在学习c++的过程中，我们经常使用到数组，那怎么去定义一个类去实现数组的功能呢？ 我们先列除一些经常对数组进行的一些操作， 1、 创建一个指定容量的数组 2、 用已有的数组初始化另一个数组 3、 用已有的数组给另一个数组赋值 4、 给数组添加元素/给数组元素赋值 5、 获取数组指定元素的值 6、 输入一定数量的值，将值赋给数组 7、 输出数组 …… 还有很多，本次只实现以上功能
自定义数组去重方法
mslmhl的博客
08-10 370
为数组原型添加一个自定义去重的方法 // 为数组添加一个自定义去重方法myDistinct Array.prototype.myDistinct=function () { var obj={}; // 这里的this就是你使用的数组 (arr、arr1) for(var i=0;i<this.length;i++){ var cur=this[i]; if(obj[cu
Js利用prototype自定义数组方法示例
11-29
而本文主要给大家介绍了关于Js利用prototype自定义数组方法的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 题目 如何实现下列代码： [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,...
java 创建自定义数组
09-02
在Java编程语言中，创建自定义数组意味着我们不使用基本数据类型（如int、double等）来创建数组，而是使用自定义的类实例。自定义类通常包含特定于业务逻辑的属性和方法。在这个例子中，`Student` 类被用作自定义...
易语言-挂号法-自定义数据数组排序
06-29
挂号法-自定义数据数组排序 ' 挂号法原理： ' 举例：自定义数据类型A，成员1：文本型 成员2：整数型 成员3：字节集型 成员4：文本型 等等... ' 变量B：A类型 零维数组 拥有n个成员 ' 假设要按成员2来排序 ' 1....
阻止某些网站打开调试就跳转
海天鹰
05-25 4303
https://91mjw.com/，我想把视频地址扒出来单独播放，但是一打开调试就跳转。 https://www.cnblogs.com/jinyuu/p/11590343.html 测试页面，原理我还是不懂： <html> <title>打开调试就跳转</title> <style> body { margin:0; } </style> <body> <iframe src="https://www.baidu.co
JS获取网页 ＜ 变成 /u003C
海天鹰
12-14 3831
安卓浏览器查看源码很久不能用了，今天想加一个保存网页功能，JS部分是一样的，发现了问题：一个字符多了双引号，< 变成了 \u003C。 这是为什么呢？ 修改js：return unescape(s) 无效。 修改js：return decodeURI(s) 返回null。 修改Java：String s = new String(value.getBytes(), StandardCharsets.UTF_8); 无效。 String js = "javascript:function
身份证水印
最新发布
海天鹰
11-22 3541
【代码】身份证水印。
Strava无法注册
海天鹰
05-15 2296
看到一个骑行小姐姐在用这个软件，无法注册，好像卡在 reCaptcha。
图片对比度算法
海天鹰
10-17 2188
对比度变大其实就等于R、G、B三个通道同时乘以一个比例，因为这样相近的颜色之间的差距就变大了，那么减小就是同时除以一个比例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值