misswell – 第 13 页

百度浏览器点击图片放大不触发 onClick 的 BUG

12 6 月, 201921 6 月, 2019 学习笔记

屏蔽默认事件

$(document).on('click', 'img', e => { 
  e.preventDefault(); 
})

或

img{ 
  pointer-events: none; 
}

图片触发事件需要在 img 标签上包裹一层 div

SpiderKeeper 上传找不到 Spider 的问题

06 6 月, 201921 6 月, 2019 学习笔记

1、使用命令行上传，查看提示错误信息，可能服务端缺少某些库

scrapyd-deploy <target> -p <project>

2、setting 中注释掉 log

# LOG_FILE = LOG_DIR + time.strftime("%Y-%m-%d") + '.log'
# LOG_STDOUT = True

一道题

06 6 月, 201921 6 月, 2019 学习笔记

一个二维数组，如何循环遍历将第一个数组作为下一级数组的父级，然后生成一个树型结构

<?php
$a = [['a'],['b'],['c'],['d'],['e']];
function getTree($list) {
    static $tree = array();
    static $i=0;
    $i++;
    $len = count($list);
    foreach($list as $k => $row) {
        if($i+$k == $len) {
            $tmp[] = $row[0];
            $tmp['child'] = isset($tree[count($tree)-1])?$tree[count($tree)-1]:$tree;
            $tree[] = $tmp;
            getTree($list);
        }
    }
    return end($tree);
}
$c  = getTree($a);
var_export($c);

结果

array (
  0 => 'a',
  'child' => 
  array (
    0 => 'b',
    'child' => 
    array (
      0 => 'c',
      'child' => 
      array (
        0 => 'd',
        'child' => 
        array (
          0 => 'e',
          'child' => 
          array (
          ),
        ),
      ),
    ),
  ),
)

OA 办公小程序展示

05 6 月, 201928 4 月, 2020 个人作品

PHP 使用 BerryChat 倍洽

04 6 月, 201921 6 月, 2019 学习笔记

$postUrl = 'https://hook.bearychat.com/=bwGFg/incoming/70e24a628680e77277fa35be7a11017x';
$curlPost = array("text" => json_encode($branch_data, JSON_UNESCAPED_UNICODE));

$curlPost = json_encode($curlPost);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $postUrl);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);

curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $curlPost);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_HTTPHEADER, array(
	'Content-Type: application/json; charset=utf-8',
	'Content-Length:' . strlen($curlPost),
	'Cache-Control: no-cache',
	'Pragma: no-cache'
));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_exec($curl);
curl_close($curl);

iOS 微信浏览器 input 输入框BUG

31 5 月, 201921 6 月, 2019 学习笔记

iOS 微信浏览器调起收起键盘 input 输入框失去焦点后无法点击的BUG

解决如下

$("input").blur(function () {
	setTimeout(() => {
		const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
		window.scrollTo(0, Math.max(scrollHeight - 1, 0));
	}, 100);
})

还有可能是有些 display none 里面的元素有占位，特别是使用了全屏 fixed 元素后，全屏无法点击

CSS 长文本跑马灯

30 5 月, 201921 6 月, 2019 学习笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1</title>
</head>
<body>
    <div id="marquee_left" class="marquee">
        <div id="marquee_left1" class="content">
测试文本1测试文本2测试文本3测试文本4测试文本5测试文本6测试文本7测试文本8测试文本9测试文本8测试文本7测试文本6测试文本5测试文本4测试文本3测试文本2
        </div>
    </div>
</body>
<script type="text/javascript">
    function run_marquee() {
        var speed = 30;
        //速度数值越大速度越慢
        var marquee_left1 = document.getElementById("marquee_left1");
        var marquee_left = document.getElementById("marquee_left");
        marquee_left1.innerHTML = marquee_left1.innerHTML  + '';
        function Marquee3() {
            if(!marquee_left1.innerHTML){
                return ;
            }
            if (marquee_left1.offsetWidth - marquee_left.offsetWidth <= marquee_left.scrollLeft) {
                if(marquee_left1.offsetWidth<5000){
                    marquee_left1.innerHTML = marquee_left1.innerHTML + ' ' + marquee_left1.innerHTML;
                }else{
                    marquee_left.scrollLeft -= marquee_left1.offsetWidth //scrollWidth 是对象的实际内容的宽，不包边线宽度
                }
            } else {
                marquee_left.scrollLeft++;
            }
        }
        setInterval(Marquee3, speed);
    }
    run_marquee();
</script>
<style>
  .marquee {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 35px;
	line-height: 35px;
	background: rgba(0, 0, 0, 0.3);
	color: #FFF;
	display: block;
	margin: 0 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: clip;
	z-index: 23;
  }
  .marquee .content {
	display: inline-block;
	position: relative;
	padding-right: 0px;
	/*white-space: nowrap;*/
	/*animation: kf-marque-animation 2s infinite linear;*/
  }
</style>
</html>

marquee1 下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1</title>
</head>   
<div class="marquee">
	<span class="content">
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111111
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本12222223
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111133
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111433
	<span class="content-space"></span>
  </span>
</div>	
	<style>
		/*滚动播放*/
        @keyframes kf-marque-animation {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-33.3%);
            }
        }
        .marquee {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 35px;
            line-height: 35px;
            background: rgba(0, 0, 0, 0.3);
            color: #FFF;
            display: block;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
            z-index: 23;
        }
        .marquee .content {
            display: inline-block;
            position: relative;
            padding-right: 0px;
            white-space: nowrap;
            animation: kf-marque-animation 2s infinite linear;
        }
        .marquee .content-space {
            display: inline-block;
            width: 5em;
        }
    </style>
	<script>
    //滚动
    function run_marquee() {
        var speed = 50; // 速度 -- px每秒
        var $marquee = document.querySelector('.marquee');
        var $marqueeContent = $marquee.querySelector('.content');
        // 内容复制3份好有连续性
        $marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML
        var contentWidth = $marqueeContent.getBoundingClientRect().width;
        if (contentWidth <= 0) {
            return;
        }
        // 内容复制了3份，宽度也要除以3
        contentWidth = contentWidth / 3;
        // 计算一次动画应该要花费多少时间
        var onceTime = contentWidth / speed * 1000; //ms
        $marqueeContent.style.animationDuration = onceTime + "ms";
    }
	run_marquee();
</script>

marquee2 下载

保存 Chrome 插件扩展 Crx 文件

25 5 月, 201921 6 月, 2019 学习笔记

保存 Chrome 插件扩展 Crx 文件，并手动添加未登录的 Chrome 浏览器中

首先下载扩展 GET CRX

Get CRX
https://chrome.google.com/webstore/detail/get-crx/dijpllakibenlejkbajahncialkbdkjc?hl=zh-CN

然后打开你想保存成文件的插件页面，点击右键，会出现 Get CRX of this extension，点击即可保存

然后打开浏览器扩展页 chrome://extensions 打开开发者模式，然后将扩展拖到改页面，即可安装

安装完成可以将开发者模式关闭掉

CSS3 长文字跑马灯效果

24 5 月, 201921 6 月, 2019 学习笔记

<div class="marquee">
  <span class="content">
    raw js + css3 transition 跑马灯测试。跑马灯测试。跑马灯测试。 <span class="content-space"></span>
  </span>
</div>

<style>
    @keyframes kf-marque-animation {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-33.3%);
        }
    }
    .marquee {
        width: 100%;
        height: 44px;
        line-height: 44px;
        background: #e9eaea;
        display: block;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: clip;
        position: relative;
    }
    .marquee .content {
        display: inline-block;
        position: relative;
        padding-right: 0px;
        white-space: nowrap;
        animation: kf-marque-animation 12s infinite linear;
    }
    .marquee .content-space {
        display: inline-block;
        width: 5em;
    }
</style>

<script>
    //滚动
    (function () {
        var speed = 50; // 速度 -- px每秒
        var $marquee = document.querySelector('.marquee');
        var $marqueeContent = $marquee.querySelector('.content');
        // 内容复制3份好有连续性
        $marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML
        var contentWidth = $marqueeContent.getBoundingClientRect().width;
        if (contentWidth <= 0) { // 没有内容搞什么动画
            return;
        }
        // 内容复制了3份，宽度也要除以3
        contentWidth = contentWidth / 3
        // 计算一次动画应该要花费多少时间
        var onceTime = contentWidth / speed * 1000; //ms
        $marqueeContent.style.animationDuration = onceTime + "ms"
    })()
</script>

小程序可用 CSS3 animation 实现的跑马灯
https://segmentfault.com/a/1190000009571886

预览地址

https://jsfiddle.net/650spwen/

PHP RSA 长字符串分段加密解密

23 5 月, 201921 6 月, 2019 学习笔记

private $private_key = "-----BEGIN RSA PRIVATE KEY-----
MIICXAIBAAKBgQDvluFNiF8IrIsddK0OXBAvVBJH11OKvy9er1tRGn9yEJoHCJY3
EU/xz2LasCK8AwgRIqGJbvDBgRa70c3QT9j+wPqNqqJCSoSEKifnDUk1RgUReJT6
iqWaJyfM+WM3aHnKl61RZL4NV5qKe4CHMtaH/JtBCC/JzpuFER1P1IhCtQIDAQAB
AoGAaFYQb68/k4twWbeB1YsKEVJPU7HV08pGWrmKztr3PTk1mnKG2BxV8DwcFJg3
yCCZ1rx6FFuXxOzudYR8WIctO4wdsEbFky/cEGsfc6JJjiktmZaQ7MvobGNwnoFJ
QvRxDd+5uD87JE19iBSgUpLVtXbv+pZxSpD70vitnMdSctECQQD66Z5HsuC8DUPu
OLQHNN4ra5Op179Xlq7LiEFW4GaVgonw24kiLX23c7CK7295Rgxct1fwQKyuU9br
n2uj8toDAkEA9HJ85BWlm2OfUm6VI3Q99rjlpCnhRyz70+sEtf7if1SpctVxNTkX
UOnXlpPTohjAHNhzh9fa1hh/ySH9sRMu5wJAa//8uh3br/YBxFsx2lw+OPBQGe4c
lSXtzPu0LCHg5f/PQhYs28I696jbV6IiGFA3Z/0e4/HiohLCUp9HJMWWYwJACE53
pfyCUyRwfomZccn6bQ7dZtWxfQyvRgU/dLvDkJYc5/UO0sMs4qf/lnNRhrmWlaRZ
UK1qF0pf1ULdbw360wJBAObrYopW2kvIlE09j9SEgNtgVsmfZlf85c4EAZrFJP/T
8nMNKQGo92Gd3HvbjJ+ZBOP1IFt+FDAsXeSLWLAwJrg=
-----END RSA PRIVATE KEY-----";

private $public_key = "-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDvluFNiF8IrIsddK0OXBAvVBJH
11OKvy9er1tRGn9yEJoHCJY3EU/xz2LasCK8AwgRIqGJbvDBgRa70c3QT9j+wPqN
qqJCSoSEKifnDUk1RgUReJT6iqWaJyfM+WM3aHnKl61RZL4NV5qKe4CHMtaH/JtB
CC/JzpuFER1P1IhCtQIDAQAB
-----END PUBLIC KEY-----
";

public function rsa(){

	$content = "这是一段文字";
	$res = $this->superLongPublicKeyEncrypt($content,$this->public_key,false,true);
	var_dump($res);
	$content = "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";
	$res = $this->superLongPrivateKeyEncrypt($content,$this->private_key,false,true);
	var_dump($res);
}

public function superLongPublicKeyEncrypt($content, $rsaPublicKey, $choicePath = true, $withBase64 = false)
{
	if ($choicePath) {
		$pubKeyId = openssl_pkey_get_public($rsaPublicKey);//绝对路径读取
	} else {
		$pubKeyId = $rsaPublicKey;//公钥
	}

	$RSA_ENCRYPT_BLOCK_SIZE = 117;

	$result = '';
	$data = str_split($content, $RSA_ENCRYPT_BLOCK_SIZE);
	foreach ($data as $block) {
		openssl_public_encrypt($block, $dataEncrypt, $pubKeyId, OPENSSL_PKCS1_PADDING);
		$result .= $dataEncrypt;
	}

	if ($withBase64) {
		return base64_encode($result);
	} else {
		return $result;
	}
}

public static function superLongPrivateKeyEncrypt($content, $rsaPrivateKey, $choicePath = true, $withBase64 = false)
{
	if ($choicePath) {
		$priKeyId = openssl_pkey_get_private($rsaPrivateKey);//绝对路径
	} else {
		$priKeyId = $rsaPrivateKey;//私钥
	}

	if ($withBase64) {
		$data = base64_decode($content);
	}

	$RSA_DECRYPT_BLOCK_SIZE = 128;

	$result = '';
	$data = str_split($data, $RSA_DECRYPT_BLOCK_SIZE);
	foreach ($data as $block) {
		openssl_private_decrypt($block, $dataDecrypt, $priKeyId, OPENSSL_PKCS1_PADDING);
		$result .= $dataDecrypt;
	}

	if ($result) {
		return $result;
	} else {
		return false;
	}
}