js实现

滚动条到指定位置执行0到指定数字的动态变化

原文链接：CDN

  1. <script src="http://www.zzwtqx.com/index/js/jquery-1.4.2.min.js"></script>
  2. <div style="margin-top=2000px;background="#ccc"></div>
  3. <p><span id="num1">0</span>+</p>
  4. <p><span id="num2">0</span>+</p>
  5. <script>
  6.     //startNum为起始值
  7.       // endNum为结束值
  8.         // id为显示位置
  9.         //addNu每次加几
  10.         // t 时间
  11.        function number_plus(startNum,endNum, id,addNum,t) {
  12.             $().ready(function () {
  13.                 $(window).scroll(function () {
  14.                     var topp = $(document).scrollTop();
  15.                     if (topp > 1500) {
  16.                     //上面判断滚动条到达1500时候开始执行
  17.                         for (var j = 0; j <= 1; j++) {
  18.                             var int = setInterval(function () {
  19.                                 $(id).html(startNum);
  20.                                 // console.log(i)
  21.                                 if (startNum < endNum) {
  22.                                 startNum+=addNum;
  23.                                 } else {
  24.                                     $(id).html(endNum);
  25.                                     clearInterval(int);
  26.                                     return false;
  27.                                 }
  28.                             }, t);
  29.                         }
  30.                     }
  31.                 })
  32.             })
  33.         }//封装结束
  34.         number_plus(300, 1000,'#num1',1,10);
  35.         number_plus(500, 1800,'#num2',10,1);
  36. </script>

切换路由时滚动条自动回到顶部

原文链接：CDN

  1. router.beforeEach((to, from, next) => {
  2.   document.body.scrollTop = 0
  3.   // firefox
  4.   document.documentElement.scrollTop = 0
  5.   next()
  6. })

分辨率的适配问题

一个解决方法：
原文链接👉🏻CSDN：强制缩放

  1. var s;
  2. function resize() {
  3.   s = window.screen.width / 1920;
  4.   document.body.style.transformOrigin = '0 0';
  5.   document.body.style.transform = 'scale(' + s + ',' + s + ')';
  6.   document.body.style.width = window.innerWidth / s + 'px';
  7.   document.body.style.height = window.innerHeight / s + 'px';
  8. }
  9. window.onresize = function () {
  10.   resize();
  11. }
  12. resize();

↑这个方法现在不适用

媒体查询的方法

传参与形参

形参是他规定好的，传参是自己设定的参数