最近给自己玩了个新坑:flask实现一个计算固定开销的小网站。

环境

  • chrome 70.0.3538.110
  • IDE Pycharm

实现

假设现在网页上有两个表——一个小表和一个大表,需要在浏览器窗口大于某个值时显示大表,小于某个值时显示小表。

之前没有更多接触过JS,被坑了一下午。

  1. 在网页head部分引用jquery
    • # 使用Jinja 2模板
      <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.3.1.min.js') }}"></script>
    • 熟悉JS的同学可能不以为然,但就是这个坑了我一个多小时。写好的JS就是没效果,最后通过Developer Tools的报错“$没有定义”查到自定义的js代码需要写在(加载)jQuery之后。
  2. 实现代码
    • $(window).resize(function() {
          var BigTable = document.getElementById('bigTbl');
          var SmallTable = document.getElementById('smallTbl');
      
          if (window.innerWidth < 1424) {
              BigTable.style.display = "none";
              SmallTable.style.display = "";
          } else {
              BigTable.style.display = "";
              SmallTable.style.display = "none";
          }
      });
    • 实现并不难,通过向window.resize()事件添加判断窗口大小的代码,再根据元素id获取页面元素,修改其display属性即可。
  3. 网页载入js
    • <script type="text/javascript" src="{{ url_for('static', filename='js/display-control.js') }}"></script>

效果

Continue reading “JS 根据浏览器大小动态显示隐藏元素”