js实现数字滚动

2022-01-08

#js

最近做年度奋斗轨迹项目的时候，用到了数字滚动效果，记录一下~
学习参考：https://blog.csdn.net/weixin_53259688/article/details/113659936

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>snow</title>
    <script src="./js/jquery.js"></script>
    <script src="./js/numScroll.js"></script>
    <style>
        .box {
        line-height: 24px;
        height: 24px;
        overflow: hidden;
        display: inline-block;
        position: relative;
        margin-top: 2px;
        }

        /* 该样式必须有 */
        .mt-number-animate .mt-number-animate-dom {
        width: 11px;
        text-align: center;
        float: left;
        position: relative;
        top: 0;
        }

        /* 该样式必须有 */
        .mt-number-animate .mt-number-animate-dom .mt-number-animate-span {
        width: 100%;
        float: left;
        }
    </style>

</head>
<body>
    <div class="box"></div>
    <script>
        var plnum = 368; //幸运数字(不要直接写在页面上)
        //调用numberAnimate方法，传入num（数字）、speed（动画执行时间）
        $('.box').numberAnimate({ num: plnum, speed: 1000 });
    </script>
</body>
</html>

js实现雪花效果

2022-01-08

#js

最近做年度奋斗轨迹项目的时候，用到了雪花飘落效果，记录一下~
学习参考：https://blog.csdn.net/hhzzcc_/article/details/79867154

改编完的实例：

实例1（效果较好）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>snow</title>
    <style>
        body,html{
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            background: black;
        }
        .snow{
            //background: white;
            position: absolute;
            color:#FFF;
            font-size:20px;
            //width: 20px;
            //height: 20px;
            //border-radius: 50%;
        }
    </style>

</head>
<body>
    <script>
        //获取屏幕宽高
        var windowWidth = window.screen.width;
        var windowHeight = window.screen.height;

        //创建雪花
        function createSnow(){
            var left = 0;
            var top = 0;

            //定义一个初始化随机数,使雪花在屏幕中
            var left_random = Math.random() * windowWidth;
            var top_random = Math.random()* windowHeight;
            var div = document.createElement('div');
            div.innerHTML="✽";   //div的内容
            div.className = 'snow';
            div.style.transform = 'scale('+(Math.random())+')'

            document.body.appendChild(div);

            //雪花飘落
            setInterval(function () {

                div.style.left = left_random + left +'px';
                div.style.top = top_random + top +'px'
                left += 0.2;
                top += 0.2;

                //如果雪花跑到屏幕外面了,让雪花重新返回屏幕顶部
                if(left_random + left >= windowWidth){
                    left_random = Math.random();
                    left = 0;
                }

                if(top_random + top >= windowHeight){
                    top_random = Math.random();
                    top = 0;
                }
            },10)

        }
        for(var i = 0 ; i < 200 ; i++){
            createSnow()
        }
    </script>
</body>
</html>

H5视频、音频不能自动播放

2022-01-06

#HTML #H5

H5视频、音频不能自动播放,Uncaught (in promise) DOMException: play() failed because the user didn’t

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document

未捕获(承诺中)DOMException: play()失败，因为用户没有首先与文档交互。

错误原因：Chrome的autoplay政策在2018年4月做了更改。
在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。

几种页面滑动插件（swiper、fullPage、hammer）

2022-01-05

#swiper #fullPage #hammer

最近做年度奋斗轨迹项目的时候，需要引用页面滑动插件，刚开始用的fullPage插件，做的差不多了才发现引用fullPage在ios机上滑动会出现卡顿的现象，于是乎又含泪重新换成swiper插件，因此记录一下几个滑动插件的差别~
学习参考：https://www.cnblogs.com/rachelch/p/9331054.html

Echarts-地图-各城市经纬度总结

2021-12-22

#Echarts

学习参考：https://zhuanlan.zhihu.com/p/28653697

province 吉林

通化 [125.94265, 41.736397]
吉林市 [126.564544, 43.871988]
白山 [126.435798, 41.945859]
辽源 [125.133686, 42.923303]
白城 [122.840777, 45.621086]
长春 [125.313642, 43.898338]
延边 [129.485902, 42.896414]
四平 [124.391382, 43.175525]
松原 [124.832995, 45.136049]

Echarts-引入地图实例

2021-12-22

#Echarts

最近做年度奋斗轨迹项目的时候，需要做一个功能，展示个人的出差轨迹，这里就要引入地图，选择Echarts插件来实现该功能，记录一下Echarts地图的引入方法与实例操作~
学习参考（Echarts官网）：https://echarts.apache.org/zh/index.html

Vue事件符.stop .self的含义用法

2021-12-18

#Vue事件符 #Vue

今天我们来学习一下Vue事件符.stop .self的含义用法，跟着我一起来学习吧~
学习参考：
https://www.jianshu.com/p/012c97c67560

.self 和 .stop 区别:

self只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。
stop是从自身开始不向外部发射冒泡信号

Vue事件符.capture的含义用法

2021-12-18

#Vue事件符 #Vue

今天我们来学习一下Vue事件符.capture的含义用法，跟着我一起来学习吧~
学习参考：
https://blog.csdn.net/catascdd/article/details/108273931

一、.capture的含义

vue事件符的.capture用法，含义是捕获。
先看一个4层结构的div盒子：div(最外层) > div(爷爷) > div(父亲) > div(儿子)

点击最里层儿子,则会冒泡打印输出，输出为:

现在给@click添加.capture修饰符

CSS Hack是什么？

2021-09-06

#CSS #CSS Hack

学习参考:https://blog.csdn.net/qq_31635733/article/details/81660897

第一部分：什么是CSS Hack？

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

CSS Hack常见的有三种形式：

CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
1、属性级Hack：比如IE6能识别下划线“_”和星号“*”，IE7能识别星号“*”，但不能识别下划线”_”，而firefox两个都不能认识。
2、选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
3、IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

第二部分：CSS hack的实际应用

解释一下：上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:
div{background:green} ,
于是理所当然这个div的背景是绿色的。在IE6中呢，它两个background都能识别出来，它解析得到的结果是:
div{background:green;*background:red;},
于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。CSS hack:区分IE6，IE7，firefox区别不同浏览器，CSS hack写法：

区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green!important;background:blue;
区别IE7与FF：
background:orange;*background:green;
区别FF，IE7，IE6：
background:orange;background:green;_background:blue;
background:orange;background:green!important;*background:blue;

注：IE都能识别;标准浏览器(如FF)不能识别\；IE6能识别*；不能识别 !important ;IE7能识别*，能识别!important;FF不能识别*，但能识别!important;

第三部分：为什么不推荐

使用CSS hack来解决兼容性问题 CSS hack是因为现有浏览器对标准的解析不同，为了兼容各浏览器，所采用的一种补救方法。CSS hack是一种类似作弊的手段，以欺骗浏览器的方式达到兼容的目的，是用浏览器的兼容性差异来解决浏览器的兼容性问题。因此，在设计之初，写CSS hack需要遵循以下三条原则：有效：能够通过 Web 标准的验证只针对太古老的/不再开发的/已被抛弃的浏览器，而不是目前的主流浏览器代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。

SVN实现Web服务器自动更新（Windows平台）

2021-09-05

#SVN

很多人都把SVN服务器搭建在正式服务器上，commit后，需要在测试服务器先测试一下，这时候，就需要在测试环境进行update操作。问题是，commit后，测试环境如何实现自动更新呢？研究了一天，终于有了结果

网上有很多中实现SVN自动更新的方法，这里记录了两种Windows平台下，实现SVN上传代码，自动更新web服务器内容的方法，供大家学习~

1. 设置钩子，使得VisualSVN Server可以自动发布配置部署svn代码到web目录服务器上线

SVN钩子有很多种：

post-commit 在提交完成成功创建版本之后执行该钩子，提交已经完成，不可更改。

pre-commit 提交完成前触发执行该脚本

start-commit 在客户端还没有想服务器提交数据之前，及没有建立Subversion transaction 之前。