站长笔记 - 第 5 页

2022-08-152022-09-14

百度文库中文档的纯文字版免费获取方法

很多网站，针对搜索引擎蜘蛛都有专门的页面处理，百度文库针对谷歌蜘蛛也做了类似的处理，可以直接显示成纯文字版，我们用这种方法来查找到蜘蛛访问的URL，获取纯文字。

默认的文档URL是这样的：

https://wenku.baidu.com/view/015c692b31d4b14e852458fb770bf78a64293a9f.html

https://wenku.baidu.com/view/bc88e79e588102d276a20029bd64783e08127dca.html

其中比较长的那串英文字母和数字组成的字符串(bc88e79e588102d276a20029bd64783e08127dca)就是文档的ID

通过蜘蛛访问，可以获取到蜘蛛专门的URL是这样的：

https://wenku.baidu.com/spider/doc/view?doc_id=4652085fbb4ae45c3b3567ec102de2bd9605de27

我们只需要把URL中的ID值替换一下：

https://wenku.baidu.com/spider/doc/view?doc_id=015c692b31d4b14e852458fb770bf78a64293a9f

https://wenku.baidu.com/spider/doc/view?doc_id=bc88e79e588102d276a20029bd64783e08127dca

就能获取到纯文字版的文档，当然，排版有点乱，需要自行处理。

通过这样的替换ID，我们就可以免费获取百度文库的纯文字版了。

针对word和PDF的文字可以很好的处理。如果是PPT和表格就不能很好处理了，毕竟纯文字不能表现表格的效果。

2022-07-07

商品规格属性(SKU)笛卡尔积算法

笛卡尔积算法JavaScript，php实现

JavaScript

    var list=[]
    list[0] = ['金色','银色'];
    list[1] = ['32G','64G'];
    list[2] = ['联通','移动','电信']
    console.log(descartes(list))
    // 笛卡尔积算法
    function descartes(  list )
    {
        //parent上一级索引;count指针计数
        var point  = {};

        var result = [];
        var pIndex = null;
        var tempCount = 0;
        var temp   = [];

        //根据参数列生成指针对象
        for(var index in list)
        {
            if(typeof list[index] == 'object')
            {
                point[index] = {'parent':pIndex,'count':0}
                pIndex = index;
            }
        }

        //单维度数据结构直接返回
        if(pIndex == null)
        {
            return list;
        }

        //动态生成笛卡尔积
        while(true)
        {
            for(var index in list)
            {
                tempCount = point[index]['count'];
                temp.push(list[index][tempCount]);
            }

            //压入结果数组
            result.push(temp);
            temp = [];

            //检查指针最大值问题
            while(true)
            {
                if(point[index]['count']+1 >= list[index].length)
                {
                    point[index]['count'] = 0;
                    pIndex = point[index]['parent'];
                    if(pIndex == null)
                    {
                        return result;
                    }

                    //赋值parent进行再次检查
                    index = pIndex;
                }
                else
                {
                    point[index]['count']++;
                    break;
                }
            }
        }
    }

php

<?php
$arr = array(array(1,3,4,5),array(3,5,7,9),array(76,6,1,0));
/**
** 实现二维数组的笛卡尔积组合
** $arr 要进行笛卡尔积的二维数组
** $str 最终实现的笛卡尔积组合,可不写
** @return array
**/
function cartesian($arr,$str = array()){
  //去除第一个元素
  $first = array_shift($arr);
  //判断是否是第一次进行拼接
  if(count($str) > 1) {
    foreach ($str as $k => $val) {
      foreach ($first as $key => $value) {
        //最终实现的格式 1,3,76
        //可根据具体需求进行变更
        $str2[] = $val.','.$value;
      }
    }
  }else{
    foreach ($first as $key => $value) {
      //最终实现的格式 1,3,76
      //可根据具体需求进行变更
      $str2[] = $value;
    }
  }
  //递归进行拼接
  if(count($arr) > 0){
    $str2 = cartesian($arr,$str2);
  }
  //返回最终笛卡尔积
  return $str2;
}
$cartesian_product = cartesian($arr);
print_r($cartesian_product);
?>

来源：http://www.soolco.com/post/18013_1_1.html

2022-06-14

原生JS模拟Bootstrap中的折叠(Collapse)插件

来源：https://github.com/HelloLeeChan/Exercise-Demo/tree/master/Collapse%20By%20Native%20JS

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Collapse By Native JS</title>
<style>
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
  margin: 2px;
}

a {
  text-decoration: underline;
  color: #666666;
}

a:hover {
  text-decoration: none;
}

.collapseDiv {
  color: #333;
  border-radius: 4px;
  background-color: #f5f5f5;
  border: 1px solid transparent;
  border-color: #ddd;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  margin-top: 5px;
  margin-bottom: 0;
}

.collapseDiv h3 {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  border-color: #ddd;
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-left: 15px;
  background-color: #f5f5f5;
  margin: 0;
}

.collapse_body {
  background-color: #fff;
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: .35s;
  -o-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-property: height, visibility;
  -o-transition-property: height, visibility;
  transition-property: height, visibility
}

.collapse_content {
  border-top: 1px solid #ddd;
  background-color: #fff;
  padding: 15px;
}
</style>
</head>

<body>
<div class="collapseDiv"> 
	  <h3>Title1</h3> 	  
	 <div class="collapse_body">
        <div class="collapse_content">
             content1<br />content1<br />content1<br />content1<br />
            </div>
       </div>
	</div>

	<div class="collapseDiv"> 
	  <h3>Title2</h3> 
	 <div class="collapse_body">
       <div class="collapse_content">
            content2<br />content2<br />content2<br />content2<br />
            </div>
       </div>
	</div>

	<div class="collapseDiv"> 
	  <h3>Title3</h3> 
	 <div class="collapse_body">
       <div class="collapse_content">
           content3<br />content3<br />content3<br />content3
           </div>
       </div>
	</div>

	<div class="collapseDiv"> 
	  <h3>Title4</h3> 
	 <div class="collapse_body">
         <div class="collapse_content">
          content4<br />content4<br />content4<br />content4<br />content4<br />
           </div>
       </div>
	</div>

</body>
<script>

//接受三个参数，分别是折叠菜单的外包div名称，是否关闭之前的折叠，默认开启的折叠内容
        function Collapse(className,close_prev,default_open){        
        this._elements = [];
        this._className = String(className);
        this._previous = Boolean(close_prev)
        this._default = typeof(default_open)==="number" ? default_open: -1
        this.getCurrent  
        this.init();
    }

    //收集所有折叠菜单的div
    Collapse.prototype.collectElementbyClass = function(){
        this._elements = [];
        var allelements = document.getElementsByTagName("div");

        for(var i=0;i<allelements.length;i++){
            var collapse_div = allelements[i];
            if (typeof collapse_div.className === "string" && collapse_div.className === this._className){

                var h3s = collapse_div.getElementsByTagName("h3");
                var collapse_body = collapse_div.getElementsByClassName("collapse_body");
                if(h3s.length === 1 && collapse_body.length === 1){
                    h3s[0].style.cursor = "pointer";    
                    
                    if(this._default === this._elements.length){
                        collapse_body[0].style.visibility = "visible";
                      collapse_body[0].style.height = collapse_body[0].scrollHeight+"px"
                    }else{
                        collapse_body[0].style.height = "0px";
                      collapse_body[0].style.visibility = "hidden";    
                    }
                    this._elements[this._elements.length] = collapse_div;
                }                
            }
        }
    }
    Collapse.prototype.open = function(elm){
        elm.style.visibility = "visible";
        elm.style.height = elm.scrollHeight + "px"
        
    }
    Collapse.prototype.close = function(elm){
      elm.style.height = "0px";
      elm.style.visibility = "hidden";
    }
    Collapse.prototype.isOpen = function(elm){    
    
      return elm.style.visibility === "visible"
    }
    
    Collapse.prototype.getCurrent = function(header){
        var cur ;
        if(window.addEventListener){
            cur = header.parentNode
        }else{
            cur = header.parentElement
        }
        return cur.getElementsByClassName("collapse_body")[0]
        }
    
    Collapse.prototype.toggleDisplay = function(header){
        
        var cur = this.getCurrent(header)
        //console.log(cur)
        if(this.isOpen(cur)){
            this.close(cur);
        }else{
            this.open(cur);
        }        
        if(this._previous){
            for(var i=0;i<this._elements.length;i++){
                if(this._elements[i] !== (cur.parentNode||cur.parentElement)){                
                    var collapse_body = this._elements[i].getElementsByClassName("collapse_body");
                    collapse_body[0].style.height = "0px";
                    collapse_body[0].style.visibility = "hidden";
                            
                }
            }
        }
    }    
    
    Collapse.prototype.init = function(){        
        var instance = this;
        this.collectElementbyClass();
        if(this._elements.length === 0){
            return;
        }
        
        for(var i=0;i<this._elements.length;i++){
            var h3s = this._elements[i].getElementsByTagName("h3");            
            if(window.addEventListener){
                h3s[0].addEventListener("click",function(){ instance.toggleDisplay(this);},false); 
            }else{
                h3s[0].onclick = function(){instance.toggleDisplay(this);}
            }
        }
    }
    
//传参
 var myCollapse = new Collapse("collapseDiv",true);
 
</script>
</html>

2022-06-01

flex 布局

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

flexbox 的区域就叫做 flex 容器。为了创建 flex 容器，我们把一个容器的 display 属性值改为 flex 或者 inline-flex。完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
flex-basis 属性为 auto。
flex-wrap 属性为 nowrap。

以下6个属性设置在 flex 容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性决定主轴的方向（即项目的排列方向）
flex-direction有4个值。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

参考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://developer.mozilla.org/zh-CN/docs/Glossary/Flex

2022-05-142022-05-14

PhpSpreadsheet导入数据例子

使用预先写好的类文件phpoffice.inc.php来直接引入

<?php
require('phpoffice.inc.php');

function import($file)
{
  date_default_timezone_set("Asia/Shanghai");
  $starttime = microtime(1);
  global $conn, $slng;
  $ndatabase='';
  $nidfield='';
  $nfpre='';
  $phpexcel = new Excel();
  $tfile = $phpexcel->import($file, $start_line = 1, $end_line = null, $start_column = 1, $end_column = null);
    $num = count($tfile);
    $long = ceil($num/50);//单次数据导入长度;
    for($i=0;$i<$long;$i++){
      $tsqlstr = '';
      $sql_sub = '';
      for($j=0;$j<50;$j++){
        $num_sub = $i*50 + $j;
        $ttopic = $tfile[$num_sub][0];
        $tcontent = $tfile[$num_sub][1];
        //拼接mysql语句
        if($j==50 - 1) $sql_plus = ';';
        else $sql_plus = ',';
        // && !mm_search_field($ngenre,$ttopic,'topic') 判断是否标题重复,会耗费大量资源,不建议使用.
        if(!ii_isnull($ttopic)) $sql_sub .= "('" . $ttopic . "','".$tcontent."','". ii_now() . "','" . ii_now() . "','0','0','$slng')".$sql_plus;
      }
      //拼接后的mysql语句进行入库
      $tsqlstr = "insert into $ndatabase (topic,content,time,update,hidden,good,lng) values ".$sql_sub;
      ii_conn_query($tsqlstr, $conn);
    }
    $endtime = microtime(1);
    $protime = number_format((($endtime - $starttime) * 1000), 3, '.', '');
    eco $num.'条数据,耗时'.$protime.'ms';

}

整个代码压缩包网盘下载：(访问密码wdja)

http://share.menglei.net/f/16922972-579986429-925042

备注：此压缩包内文件可直接使用，无需使用composer进行导入操作，非常方便。

2022-04-142022-04-14

JTBC5.0中编辑器TinyMCE启用或禁用上下文菜单的方法

JTBC5.0适用

\Public\common\assets\js\components\jtbc\jtbcEditor\jtbcEditor.js

添加禁用代码即可

禁用只需添加代码

contextmenu: false,

启用需要2步操作

配置菜单功能
contextmenu: "paste copy cut| link inserttable | cell row column deletetable",

如果无效，需要进行添加插件操作

调用右键菜单插件

plugins: ['contextmenu'],

2022-04-12

js原生tab切换代码

适用于无序的内容，当调用ID无序的内容时，可以使用。

js部分


<script>
window.onload=function(){
  var title=document.getElementById('tab_title');
  var li_title = title.getElementsByTagName('li');
   for(var i = 0; i<li_title.length; i++){
        if(i == 0) li_title[i].className = 'menu_con on';
        else li_title[i].className = 'menu_con';
    }
  var con=document.getElementById('tab_con');
  var li_con = con.getElementsByTagName('li');
   for(var j = 0; j<li_con.length; j++){
        if(j == 0) li_con[j].style.display = 'block';
        else li_con[j].style.display = 'none';
    }
}
function tab_on(id){
  var title=document.getElementById('tab_title');
  var li_title = title.getElementsByTagName('li');
   for(var i = 0; i<li_title.length; i++){
        if(li_title[i].id == id) li_title[i].className = 'menu_con on';
        else li_title[i].className = 'menu_con';
    }
}
function tab(id,n){
  tab_on(id);
  var con=document.getElementById('tab_con');
  var li_con = con.getElementsByTagName('li');
   for(var i = 0; i<li_con.length; i++){
        if(li_con[i].id == 'con_'+n) li_con[i].style.display = 'block';
        else li_con[i].style.display = 'none';
    }
}
</script>

html部分

<ul id="tab_title">
    <li class="menu_con" id="title_18" onclick="tab('title_18','18')"><a class="menu_a"><span>电商客服</span></a></li>
    <li class="menu_con" id="title_26" onclick="tab('title_26','26')"><a class="menu_a"><span>测试技术员</span></a></li>
    <li class="menu_con" id="title_28" onclick="tab('title_28','28')"><a class="menu_a"><span>结构工程师</span></a></li>
</ul>
<ul id="tab_con">
    <li style="display:none;" id="con_18"><div class="video_list_right_title">电商客服</div></li>
    <li style="display:none;" id="con_26"><div class="video_list_right_title">测试技术员</div></li>
    <li style="display:none;" id="con_28"><div class="video_list_right_title">结构工程师</div></li>
</ul>

分类：站长笔记