首页 > 其他分享 >统计同名数据基于html js

统计同名数据基于html js

时间:2023-05-29 22:00:48浏览次数:46  
标签:球铁 同名 js item html dict key var datas

# 1.教程

1将数据逐行复制到excell
2.新建txt文件,将excell中的全部数据复制到txt文件中
3.使用edge打开统计同名数据.html,右击网页打开控制台
4.选择txt文件,确认,会在控制台展示结果
点击

# 2.数据示例

可以有空格,回车,形式为:

名称 数量

```
DN150球铁平插 9
DN150*90°球铁双平弯头 11
DN150*50球铁双平短管 9
DN150阀门 2

DN150伸缩节 2
DN150止回阀 1

DN150*100球铁双平大小头 2
DN100*90°球铁双平弯头 33
DN150止回阀 1
```

 

# 3.代码

```html
<!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">
<title>Document</title>
</head>
<body>
<input type="file" name="file" id="file" />

</body>
<script>
document.getElementById('file').onchange = function(){
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent){
var fileContentArray = this.result.split(/\r\n|\n/);
var datas=[];
for(var n = 0; n < fileContentArray.length; n++){
var line=fileContentArray[n];
var item={
name:"",
num:0
}
if(line!=='\t'&&line.length>0){
var it=line.split(/\t/);
item.name=it[0];item.num= +it[1];
datas.push(item)
}
}
var dict = {};
for(var n=0;n<datas.length;n++){
dict[datas[n].name]=0;
}
for(var n=0;n<datas.length;n++){
dict[datas[n].name]+=datas[n].num;
}
var result="";
for (var key in dict) {
result+=key+"\t" +dict[key]+'\n'
//   console.log(key+"\t" +dict[key])

}
console.log(result)
};
reader.readAsText(file);
};
</script>
</html>
```

 

标签:球铁,同名,js,item,html,dict,key,var,datas
From: https://www.cnblogs.com/chaoanquan/p/17441778.html

相关文章

  • [NextJS] getStaticProps
    Continue... Ref: Next.js产品级的React框架-中文开发入门教学-编写静态页面属性getStaticProps  为了爬虫,所以这么写。importHeadfrom'next/head'exportdefaultfunctionHome(props){const{datalist}=props;return(<div>......
  • Vue3 ,html 修改滚动条样式
    /*滚动条*/body*::-webkit-scrollbar{width:5px;height:10px;}body*::-webkit-scrollbar-track{background:#fff;border-radius:2px;}body*::-webkit-scrollbar-thumb{background:rgb(205,206,206);border-radius:10px;}body*::-webk......
  • tailwindcss在使用cdn引入静态html的时候,使用vscode代码提示
    原文:Hey!TheIntellisenseextensiondoesneedaconfigfiletoworktoday.Iwouldsuggestcreatingoneinyourprojectroottoenabletheextension.Anemptyfilewillworkjustfineforthiscaseifthedefaultssuityourneeds.Ifyouwanttocustomiz......
  • js-01_数组
    数组的常用方法数组常用方法之pushpush是用来在数组的末尾追加一个元素vararr=[1,2,3]//使用push方法追加一个元素在末尾arr.push(4)console.log(arr)//[1,2,3,4]数组常用方法之poppop是用来删除数组末尾的一个元素vararr=[1,2,3]//使......
  • can't not find Node.js binary ''path",make sure Node.js is installed and in your
    vscode中node执行debug报错报错信息如下 思路1:检查node是否安装成功win+R输入cmd  能够正常显示版本号,则证明没有问题,接着换个思路 思路2:根据提示打开图示的'launch.json'文件,在页面补充 runtimeExecutable具体补充什么内容呢?在overflow中找到了nginx中需要补......
  • lifecycle in react.js
    摘抄自reactinaction,seechapter4:直接上图: DEFINITIONMountingistheprocessofReactinsertingyourcomponentsintotherealDOM.Oncedone,yourcomponentis“ready,”andit’softenagoodtimetodothingslikeperformHTTPcallsorreadcookies.......
  • 最常见JS加密保护代码的方法
    当谈到JavaScript(简称JS)代码的保护时,加密是一种常见的策略。加密可以帮助保护你的JS代码,防止未经授权的访问、修改和复制。在本文中,我将向你介绍一些常用的js加密保护方法,并提供一些通俗易懂的示例代码,帮助你入门。压缩和混淆:压缩和混淆是最简单的JS代码保护方法之一。压缩可以减......
  • 三种隐藏 HTML 元素的方式 ----记录
    在网页应用中,显示/隐藏某个元素或组件是一件经常要做的事情,尤其是在目前比较流行的单页应用中。总体而言,有3种方式来实现CSS的display:none;CSS的visibility:hidden;HTML5的hidden属性(boolean)它们之间有相同点和不同点。相同点很简单,都能使添加了这个属性的元......
  • axios 或 @nestjs/axios 错误地应用 npm config proxy
    npmproxy$npmconfiggetproxyhttp://127.0.0.1:25378/如果你的npm设置了如上代理,那么当请求本地服务时,应该会出现代理错误(通常是502响应):import{HttpService}from'@nestjs/axios';@Injectable()exportclassForwardService{@Inject()privatereadonlyhtt......
  • web基础漏洞-json劫持
    1、定义json劫持,有时也被称为jsonp劫持,或者划分为csrf的一种类型,说的是同一个对象。一般csrf,是借用用户登录后的cookie凭证身份,结果是攻击者伪造提交操作类型的请求,即增删改,而几乎无法获取数据。受害者用户登录目标网站,cookie作为登录凭证,不包含token网站下存在jsonp机制,即允......