独书先生 Menu

All items for 4月, 2020

html解析<号>号出现字符实体< &gt: &如何转义

4月 18, 2020
分类:Web工具

问题:

在用wordpress的markdown插件写文章的时候,发现代码块偶尔无法正常解析 < 和 > 号

类似这样:

暴雨直下眼迷茫，
大风骤起飕脸庞。
雷声贯耳家中藏，
草香扑鼻思故乡。
&lt;/pre&gt;&lt;/div&gt;

分析:

说明在解析文章的时候,得到的字符串为字符实体,然后网上找了通过字符串替换的方法解决这个问题

以下为相互转换的js函数

//<转义为<
function escapeHTML(str){
    str = "" + str;
    return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "&apos;");
},
//<还原为<
function unescapeHTML(str){
    str = "" + str;
    return str.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/"/g, '"').replace(/&apos;/g, "'");
}

解决:

运用到wordpress博客中,可以在编辑主题中,修改function.php源码,加入一段插入页脚的方法,塞入你的js代码即可,以下为新加入的页脚代码,加在function.php的头部即可,后续有新的js代码也可以写在这里:

// 自定义脚本 ------------------------------------------start
function wpb_hook_javascript_footer() {
?>
<script>
function unescapeHTML(a){
    a = "" + a;
    return a.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/"/g, '"').replace(/&apos;/g, "'");
}
var codeContainers = document.querySelectorAll(".codecolorer-container");
if(codeContainers.length > 0){
    for(var i = 0; i < codeContainers.length; i++){
        codeContainers[i].innerText = unescapeHTML(codeContainers[i].innerText)
    }
}
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
// 自定义脚本 ------------------------------------------end

感谢:
https://www.cnblogs.com/LiuLiangXuan/p/5212155.html
https://boke112.com/post/5981.html

诗歌诗句垂直排版css

4月 16, 2020
分类:Web基础

需求:

上一篇小编写了首打油诗 暴风雨 ,很多小伙伴咨询如何排版的,其实很简单运用了一个css属性 writing-mode,这个属性在国际化中经常用到,因为有的海外国家的阅读和书写习惯跟我们不一样,嗯,跟我们古文的排版有点像,也算是巧合了,有了这个属性可以运用.

Continue reading…

今日不写文,作打油诗一首

4月 14, 2020
分类:随笔 
暴风雨

   独书先生

暴雨直下眼迷茫，
大风骤起飕脸庞。
雷声贯耳家中藏，
草香扑鼻思故乡。

Selenium+Python自动化测试(一)

4月 12, 2020
分类:软件测试

1.selenium安装

pip install selenium

2.下载chromedriver

下载得到的exe文件放到python的安装目录下

Continue reading…

VMware Workstation 与 Device/Credential Guard 不兼容

4月 10, 2020
分类:软件应用

问题:

VMware Workstation 与 Device/Credential Guard 不兼容。在禁用 Device/Credential Guard 后，可以运行 VMware Workstation

解决:

管理员CMD输入：

bcdedit /set hypervisorlaunchtype off

重新开启:

bcdedit /set hypervisorlaunchtype auto

参考自: https://www.zhihu.com/question/64511903/answer/260965170

Linux下运行shell脚本显示cd: $’ \r\r’: No such file or directory没有那个文件或目录

4月 8, 2020
分类:Web工具

问题:

本地写好一个 shell 脚本,传到服务器, 用 ./ 运行脚本文件出现 报错信息 cd: \$’ \r\r’: No such file or directory 或者是 /usr/bin/env: “bash\r”: 提示没有那个文件或目录

分析：

linux 环境下, \r 表示把光标移到行首,不显示任何内容. 猜测是自己写的脚本的格式不正确, 导致脚本在 linux 环境下解析出含有\r

解决办法：

用 vim 打开.sh 脚本文件， 重新设置文件的格式

：set ff 然后回车   再重新设置下文件格式：

：set ff=unix 然后保存退出

：wq! 回车
参考自: https://appsoftea.com/zh/linux-bash-no-such-file-or-directory/

gnvm切换node版本

4月 6, 2020
分类:Web工具

问题:

npm运行项目时,报错:

Found binding for the following environments:
- Windows 64-bit with Node.js 11.x

发现此项目的npm包需要11.x版本node,那么为了不影响其他项目,可以采取管理多个node版本的方法,跟多版本python类似

Continue reading…

js实现指定时间倒计时,带标题闪烁提示

4月 3, 2020
分类:Web基础

问题

  1. 经常需要设定一个活动倒计时提醒,指定一个时间进行倒计时
  2. 或者是自己做时间规划,做计时功能指定到几点完成任务,这时候还需要在网页标签上有提醒

解决

主要是时间的计算

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
      
    <meta charset="UTF-8">
      <title>倒计时</title>
      <style>
        * {
            margin: 0;
            padding: 0;
        }

        div,p {
            font-size: 80px;
            text-align: center;
        }

        #showTime span {
            color: red;
        }

        #showTime span.time {
            color: black
        }

        body {
            padding-top: 200px;
        }
    </style>
</head>

<body>
    <div>距离 <div id="timeSpan"></div> 还有</div>
    <p id="showTime"><span></span></p>
    <script>
        var timeSet = '2020/4/13 00:10:00';
        document.querySelector('#timeSpan').innerHTML = timeSet;
        var msg = {
            time: 0,
            title: document.title,
            timer: null,
            //显示新消息提示
            show: function () {
                var title = msg.title.replace("", "").replace("【时间到啦】", "");
                //定时器，此处产生闪烁
                //由于定时器无法清除，在此调用之前先主动清除一下定时器打到缓冲效果，否则定时器效果叠加标题闪烁频率越来越快
                clearTimeout(msg.timer);
                msg.timer = setTimeout(function () {
                    msg.time++;
                    msg.show();
                    if (msg.time % 2 == 0) {
                        document.title = "【时间到啦】" + title
                    } else {
                        document.title = title
                    };
                }, 300);
                return [msg.timer, msg.title];
            },
            //取消新消息提示
            //此处起名最好不要用clear，由于关键字问题有时可能会无效
            clears: function () {
                clearTimeout(msg.timer);
                document.title = "哈哈哈";
            }
        };
        var oSpan = document.getElementsByTagName('span')[0];
        function tow(n) {
            return n >= 0 && n < 10 ? '0' + n : '' + n;
        }
        function getDate() {
            var oDate = new Date();//获取日期对象
            var oldTime = oDate.getTime();//现在距离1970年的毫秒数
            var newDate = new Date(timeSet);
            var newTime = newDate.getTime();//2019年距离1970年的毫秒数
            var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
            var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
            second = second % 86400;//余数代表剩下的秒数；
            var hour = Math.floor(second / 3600);//整数部分代表小时；
            second %= 3600; //余数代表 剩下的秒数；
            var minute = Math.floor(second / 60);
            second %= 60;
            var str =
                tow(day) + '<span class="time">天</span>'
                + tow(hour) + '<span class="time">小时</span>'
                + tow(minute) + '<span class="time">分钟</span>'
                + tow(second) + '<span class="time">秒</span>';
            oSpan.innerHTML = str;
            if (tow(minute) == '00' && tow(second) == '00') {
                msg.show()
                alert('时间到啦!')
            }
        }
        getDate();
        setInterval(getDate, 1000);
    </script>
</body>

</html>

网页内拖动iframe避坑方法

4月 2, 2020
分类:Web基础

问题:

网页内拖动一个元素比较简单,但是如果是一个iframe,那么鼠标进入iframe内部后会失焦,因为是进入了另一个网页.失焦的结果就是拖动起来一闪一闪的.

解决:

这里采用了一个巧妙的遮罩来避免鼠标进入iframe内失焦问题,iframe用div包裹,iframe同级建一个空白div,初始时宽高为0,一旦mousedown则把宽高置为100%沾满父级的div遮住同级的iframe,这样鼠标拖动的时候就不会触发到iframe内部了, mouseup时再把div置为0,保持iframe内的正常监听.

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>drag</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #929292;
        }
        .move {
            position: absolute;
            /*设置绝对定位，脱离文档流，便于拖拽*/
            display: block;
            width: 320px;
            height: 486px;
            background-color: transparent;
            cursor: move;
            /*鼠标呈拖拽状*/
            border:10px solid transparent;
        }
        iframe{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .mask{
            position: absolute;
            cursor: move;
            user-select: none;
        }
    </style>
</head>

<body>
    <div id="drag" class="move">
        <iframe  src="https://m.baidu.com" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes">可拖动区域</iframe>
        <div class="mask"></div>
    </div>

    <script>
        // 拖拽功能(主要是触发三个事件：onmousedown\onmousemove\onmouseup)
        var drag = document.getElementById('drag');
        var divMask = document.querySelector('.mask');

        // 点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
        drag.onmousedown = function (e) {
            var e = e || window.event // 兼容ie浏览器
            var diffX = e.clientX - drag.offsetLeft // 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
            var diffY = e.clientY - drag.offsetTop

            /* 低版本ie bug:物体被拖出浏览器可是窗口外部时，还会出现滚动条，
                    解决方法是采用ie浏览器独有的2个方法setCapture()\releaseCapture(),这两个方法，
                    可以让鼠标滑动到浏览器外部也可以捕获到事件，而我们的bug就是当鼠标移出浏览器的时候，
                    限制超过的功能就失效了。用这个方法，即可解决这个问题。注：这两个方法用于onmousedown和onmouseup中 */
            if (typeof drag.setCapture !== 'undefined') {
                drag.setCapture()
            }

            divMask.style.width = '100%';
            divMask.style.height = '100%';
            document.onmousemove = function (e) {
                var e = e || window.event // 兼容ie浏览器
                var left = e.clientX - diffX
                var top = e.clientY - diffY

                // 控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条
                if (left < 0) {
                    left = 0
                } else if (left > window.innerWidth - drag.offsetWidth) {
                    left = window.innerWidth - drag.offsetWidth
                }
                if (top < 0) {
                    top = 0
                } else if (top > window.innerHeight - drag.offsetHeight) {
                    top = window.innerHeight - drag.offsetHeight
                }

                // 移动时重新得到物体的距离，解决拖动时出现晃动的现象
                drag.style.left = left + 'px'
                drag.style.top = top + 'px'
            }
            document.onmouseup = function (e) { // 当鼠标弹起来的时候不再移动
                console.log('this', this)
                this.onmousemove = null
                this.onmouseup = null // 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）

                // 修复低版本ie bug
                if (typeof drag.releaseCapture !== 'undefined') {
                    drag.releaseCapture()
                }

                divMask.style.width = '0';
                divMask.style.height = '0';
            }
        }
    </script>
</body>

</html>

网页内拖动iframe避坑方法