做一个下载分享

Rat-Chen · 发表于 2021-3-7 12:53

jasonzxhan 发表于 2021-3-7 02:07
试试这个可以么，不过就是你的数据库本来也没有WIN7。。。

大佬牛批，牛批大佬，很nice，感谢感谢~请收下我的膝盖~

Rat-Chen · 发表于 2021-3-7 12:54

meskyer 发表于 2021-3-6 22:41
是这样吗？很基础啊，想加几个自己再加呗

这样也可以的，还是大佬们给力！

请收下我的膝盖！

Rat-Chen · 发表于 2021-3-7 12:58

jasonzxhan 发表于 2021-3-7 02:07
试试这个可以么，不过就是你的数据库本来也没有WIN7。。。

大佬，请问一下，管理员模式，我如何自己加入新的数据呀，有教程吗？我纯小白一个，感谢理解！~

Rat-Chen · 发表于 2021-3-7 13:39

jasonzxhan 发表于 2021-3-7 02:07
试试这个可以么，不过就是你的数据库本来也没有WIN7。。。

大佬，可以加你好友交流吗~

jasonzxhan · 发表于 2021-3-8 00:51

Rat-Chen 发表于 2021-3-7 12:58
大佬，请问一下，管理员模式，我如何自己加入新的数据呀，有教程吗？我纯小白一个，感谢理解！~

我把这个表格调整了一下，方便你自己随时更新数据库，
1. 管理员密码是123
2. 如果你要自己添加其他系统的下载，请在sheet1.g列最下面按照你自己上面的形式添加即可

zpy2 · 发表于 2021-3-8 06:39

本帖最后由 zpy2 于 2021-3-8 07:14 编辑

也来凑个热闹。。。

zpy2 · 发表于 2021-3-8 07:32

zpy2 发表于 2021-3-8 06:39
也来凑个热闹。。。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下载windows</title>

<script src="onerror.js">
</script>
<style>
      /*sku选择样式*/
      li {list-style: none;
         margin-right: 10px;
      }

         li label {
            cursor: pointer;
         }

      li {
         float: left;
         line-height: 30px;
      }

      .clear {
         clear: both;
      }

      .AttributeValue {
/*          border: 1px solid #808080;*/
border-color:gray;
         padding: 5px 10px;
      }

      .choices {
         border-color: #e01313
      }

      .disabled {
         display:none;
         border: 1px dashed #b1abab;
         background-color: #f1f1f1;

      }

.hide{
display:none;
}

.disabled label {
            cursor: not-allowed;
         }
.selected
{
/*
background-color:blue;
color:white;
*/
border-style:solid;
border-color: #e01313
}
#log{
display:none;
}
</style>
</head>

<body>
<h2>下载windows</h2>
<div id="show" style="width:100%;">
<ul><li><b>系统</b>:</li></ul><ul><li  class="AttributeValue 系统  Win10" field="系统" field-value="Win10" onclick="clickfield(this)"><label>Win10</label></li><li  class="AttributeValue 系统  Win7" field="系统" field-value="Win7" onclick="clickfield(this)"><label>Win7</label></li></ul>
<div class="clear"></div>
<ul><li><b>版本</b>:</li></ul><ul><li  class="AttributeValue 版本  1903" field="版本" field-value="1903" onclick="clickfield(this)"><label>1903</label></li><li  class="AttributeValue 版本  1909" field="版本" field-value="1909" onclick="clickfield(this)"><label>1909</label></li><li  class="AttributeValue 版本  2004" field="版本" field-value="2004" onclick="clickfield(this)"><label>2004</label></li><li  class="AttributeValue 版本  20H2" field="版本" field-value="20H2" onclick="clickfield(this)"><label>20H2</label></li></ul>
<div class="clear"></div>
<ul><li><b>链接</b>:</li></ul><ul><li  class="AttributeValue hide 链接" field="rowid" field-value="5"><label>链接：https://pan.baidu.com/s/1 提取码：1314</label></li><li  class="AttributeValue hide 链接" field="rowid" field-value="4"><label>链接：https://pan.baidu.com/s/1Eox2r7NJ53a8T03ph9rTDg 提取码：1314</label></li><li  class="AttributeValue hide 链接" field="rowid" field-value="3"><label>链接：https://pan.baidu.com/s/1XdFccINieeKF_sGkS8unmA 提取码：1314</label></li><li  class="AttributeValue hide 链接" field="rowid" field-value="1"><label>链接：https://pan.baidu.com/s/1aAVqpWg4jMRmXIYtmez5dg 提取码：1314</label></li><li  class="AttributeValue hide 链接" field="rowid" field-value="2"><label>链接：https://pan.baidu.com/s/1wmkfOTs5y0l4JauEf8ZnAQ 提取码：1314</label></li></ul>
<div class="clear"></div>
</div>
<div id="log" style="width:100%;">
</div>
<script>
//显示版本

</script>

<script>
function getFilter(){
var filter={};
var el=document.querySelector(".系统.selected");

filter["系统"]=el.getAttribute("field-value").toString();
el=document.querySelector(".版本.selected");

filter["版本"]=el.getAttribute("field-value").toString();

//addLog(filter);
return filter;
}
function filterVersion(){
var filter=getFilter();
var arrList=allData;
var arr_result=filterByMultiFields(filter,arrList);
//addLog(arr_result,'arr_result');
displayLink(arr_result);
}
setTimeout("filterVersion()",100);
function displayLink(arr_display)
{
var className=".链接";
var els=document.querySelectorAll(className);
var key="";
var seaech="";
var arr=arr_display;
//addLog(arr,'arr');
for(var i=0;i<els.length;i++){
      el=els;
      key=el.getAttribute("field");
      search=el.getAttribute("field-value");

      //addLog(log,'search;key');
      if(!in_array(search,arr,key)){
         if(!el.classList.contains('hide')){

            el.classList.add("hide");
         }
      }else{
         if(el.classList.contains('hide')){

            el.classList.remove("hide");
         }

      }
}
}

</script>
<script>
function displayVersion(arr_display)
{
var className=".版本";
var els=document.querySelectorAll(className);
var arr=arr_display;
for(var i=0;i<els.length;i++){
      el=els;
      key=el.getAttribute("field");
      search=el.getAttribute("field-value");
      if(!in_array(search,arr,key)){
         if(!el.classList.contains('hide')){

            el.classList.add("hide");
         }
      }else{
         if(el.classList.contains('hide')){

            el.classList.remove("hide");
         }

      }
}
}

</script>
<script>
function in_array(search,arr,key){

for(var i=0;i<arr.length;i++){
      //addLog(search,'search');
      //addLog(arr,'arr');
      //addLog(key,'key');
      if(arr[key]==search){
         //addLog(arr[key]==search,'arr[key]==search');
         return true;
      }
}
return false;
}
function filterByField(key,search){
var arr_filtered=allData.filter(function(item){

//       res=item[key]==search;
      return item[key]==search;
});
return arr_filtered;
}

</script>
<script>
function filterByMultiFields(filter,arrList){
var tempFilter={};

for(key in filter){
      if(typeof(filter[key])!="undefined" && typeof(filter[key])!="null" && filter[key]!=null && filter[key]!=""){
         tempFilter[key]=filter[key];
      }
}

//addLog(JSON.stringify(tempFilter));
//筛选列表
var resultArr=arrList.filter(function(item){
      var flag=false;
      for(key in tempFilter){
         if(item[key].toString().indexOf(tempFilter[key].toString())>=0){
            flag=true;
         }else{
            flag=false;
            break;
         }
      }

      if(flag){
         return item;
      }

});
return resultArr;
}

</script>
<script>
function clickfield(e){
//alert(e.getAttribute("field-value"));
// alert(e.getAttribute("field"));
var cls_remove_selected='.'+e.getAttribute("field");
removeSelected(cls_remove_selected);
var cls_add_selected=e.getAttribute("field-value");

// alert(e.getAttribute("field-value"));
addSelected(cls_remove_selected,cls_add_selected);
if(e.getAttribute("field")=='系统'){
   var  system=e.getAttribute("field-value");

   var arr_result=filterByField('系统',system);
      displayVersion(arr_result);
      filterVersion();
}else if(e.getAttribute("field")=='版本'){

      filterVersion();
}
}
</script>
<script>

var allData=[{"rowid":"1","系统":"Win10","版本":"20H2","链接":"链接：https:\/\/pan.baidu.com\/s\/1aAVqpWg4jMRmXIYtmez5dg 提取码：1314"},{"rowid":"2","系统":"Win10","版本":"2004","链接":"链接：https:\/\/pan.baidu.com\/s\/1wmkfOTs5y0l4JauEf8ZnAQ 提取码：1314"},{"rowid":"3","系统":"Win10","版本":"1909","链接":"链接：https:\/\/pan.baidu.com\/s\/1XdFccINieeKF_sGkS8unmA 提取码：1314"},{"rowid":"4","系统":"Win10","版本":"1903","链接":"链接：https:\/\/pan.baidu.com\/s\/1Eox2r7NJ53a8T03ph9rTDg 提取码：1314"},{"rowid":"5","系统":"Win7","版本":"1903","链接":"链接：https:\/\/pan.baidu.com\/s\/1 提取码：1314"}];
/*
function filterBySystem(system){
arr_filtered=allData.filter(function(item){

      res=item["系统"]==system;
      return res;
});
return arr_filtered;
}
*/
</script>
<script>
//默认第一个
function defaultSelected(){
className=".系统";
els=document.querySelectorAll(className);
els[0].classList.add("selected");
className=".版本";
els=document.querySelectorAll(className);
els[0].classList.add("selected");

//alert(els[0].className);
}
defaultSelected();
</script>
<script>
function removeHide(className){
els=document.querySelectorAll(className);
for(i=0;i<els.length;i++){
      el=els;
      if(el.classList.contains('selected')){

         el.classList.remove("selected");
      }

}
}

function removeSelected(className){
els=document.querySelectorAll(className);
for(i=0;i<els.length;i++){
      el=els;
      if(el.classList.contains('selected')){

         el.classList.remove("selected");
      }

}
}

function addSelected(allEls,selectedClassName){
els=document.querySelectorAll(allEls);

for(i=0;i<els.length;i++){
      el=els;
      // alert(el.className)
      //    alert(selectedClassName);
      if(el.classList.contains(selectedClassName)){
         el.classList.add("selected");
      }
}
}

</script>
<script>
function hide(className){
els=document.querySelectorAll(className);
for(i=0;i<els.length;i++){
      el=els;
      if(!el.classList.contains('hide')){

         el.classList.add("hide");
      }
}

}

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

Rat-Chen · 发表于 2021-3-8 10:50

zpy2 发表于 2021-3-8 07:32
下载windows

你的这个，是网页版的吗？不是通过Excel的对吧？

Rat-Chen · 发表于 2021-3-8 10:53

jasonzxhan 发表于 2021-3-8 00:51
我把这个表格调整了一下，方便你自己随时更新数据库，
1. 管理员密码是123
2. 如果你要自己添加其他系 ...

感谢大佬，nice~

zpy2 · 发表于 2021-3-8 11:23

Rat-Chen 发表于 2021-3-8 10:50
你的这个，是网页版的吗？不是通过Excel的对吧？

演示地址

是的。。

		自动登录	找回密码
密码			免费注册

[求助] 做一个下载分享

评分

评分