1、table表格（含固定栏和滑动栏）、嵌套的数据结构变平级、js根据表达式画曲线、现在时间、倒计时、10行实现不重复验证码 、8行实现发电报效果

2024-01-28 22:31:28

jQuery的offset()方法：获取或设置匹配元素相对于文档的偏移。其中“获取”借助于getBoundingClientRect来实现，“设置”通过给元素设置定位属性来实现。
一、table表格

<!DOCTYPE html>
<html lang="en">
<head>
  <title>左侧固定宽，右侧占满剩余宽</title>
  <meta charset="utf-8"/>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
      width: 17px;
    }

    /* 滚动槽 */
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      border-top-left-radius: 0
    }

    /* 滚动条滑块*/
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.1);
      box-shadow: inset 0 0 6px gray;
    }

    table {
      border: 1px solid black;
      width: 1000px;
      color: #000000;
      text-align: center;
      border-collapse: collapse;
    }

    table thead tr th,
    table tbody tr td {
      border: 1px solid black;
      min-width: 100px;
      white-space: nowrap;
      padding: 5px 20px;
    }

    .leftDiv{
      width:300px;
      padding:20px;
      border-radius: 10px;
      border:1px solid gray
    }

    .leftDiv p{
      padding:10px;
      font-size: 20px;
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      //原生js中的offset，相对于父级元素
      //jquery中的offset，相对于文档元素
      init();
      function init() {
        var str = makeTableBodyString();
        var width = document.body.clientWidth-300;
        $("tbody").html(str);
        fixColumnTable("myTable", 4, width, 600);
      }
      window.onresize = function () {
        init();
      }
      function fixColumnTable(tableID, fixColumnNumber, width, height) {
        //1、以下"弟弟表格"是否存在，存在就清空，不存在就添加
        if ($("#" + tableID + "sibling").length != 0) {
          $("#" + tableID + "sibling").before($("#" + tableID)).empty().width(width+"px");
        } else {
          var tableIDSibling = "";
          tableIDSibling += "<div id='" + tableID + "sibling' style='overflow:hidden;height:" + height + "px;";
          tableIDSibling += " width:" + width + "px;border:1px solid gray;border-radius:10px;'></div>";
          $("#" + tableID).after(tableIDSibling);
        }
        //2、在"弟弟表格"内，插入4个div
        var tableIDSiblingInner = "";
        tableIDSiblingInner += '<div id="' + tableID + 'HeadFix"></div>';
        tableIDSiblingInner += '<div id="' + tableID + 'HeadMove"></div>';
        tableIDSiblingInner += '<div id="' + tableID + 'BodyFix"></div>';
        tableIDSiblingInner += '<div id="' + tableID + 'BodyMove"></div>';
        $(tableIDSiblingInner).appendTo("#" + tableID + "sibling");
        $("#" + tableID + "HeadFix").css({ "overflow": "hidden",  "z-index": "50", "background-color": "silver" });
        $("#" + tableID + "HeadMove").css({ "overflow": "hidden",  "z-index": "45", "background-color": "silver", "width": width - 17 });
        $("#" + tableID + "BodyFix").css({ "overflow": "hidden",  "z-index": "40", "background-color": "silver", "height": height - 17 });
        $("#" + tableID + "BodyMove").css({ "overflow": "scroll",  "z-index": "35", "width": width, "height": height });
        //3、以下获取"哥哥表格"，然后分别复制并插入到上面的4个div中，成为4个儿子表格
        var oldTable = $("#" + tableID);
        var headFix = oldTable.clone(true);
        var headMove = oldTable.clone(true);
        var bodyFix = oldTable.clone(true);
        headFix.attr("id", tableID + "HeadFixClone");
        headMove.attr("id", tableID + "HeadMoveClone");
        bodyFix.attr("id", tableID + "BodyFixClone");
        $("#" + tableID + "HeadFix").append(headFix);
        $("#" + tableID + "HeadMove").append(headMove);
        $("#" + tableID + "BodyFix").append(bodyFix);
        $("#" + tableID + "BodyMove").append(oldTable);
        //4、以下获取"儿子表格"头部固定栏的高和左侧固定栏的宽
        var headHeight = $("#" + tableID + "HeadMove thead").height();
        var columnsWidth = 0;
        var columnsNumber = 0;
        headHeight += 2;
        $("#" + tableID + "BodyFix tr:last td:lt(" + fixColumnNumber + ")").each(function () {
          columnsWidth += $(this).outerWidth(true);
          columnsNumber++;
        });
        columnsWidth += 2;
        //5、以下设置儿子表格的大小
        $("#" + tableID + "HeadFix").css("height", headHeight);//设置第1个"儿子表格"（左上方表格）的高
        $("#" + tableID + "HeadFix").css("width", columnsWidth);//设置第1个"儿子表格"（左上方表格）的宽
        $("#" + tableID + "HeadMove").css("height", headHeight);//设置第2个"儿子表格"（上方表格）的高
        $("#" + tableID + "BodyFix").css("width", columnsWidth);//设置第3个"儿子表格"（左侧表格）的宽
        //6、以下将4个"儿子表格"定位到"弟弟表格"的正上方
        $("#" + tableID + "HeadFix").offset($("#" + tableID + "sibling").offset());
        $("#" + tableID + "HeadMove").offset($("#" + tableID + "sibling").offset());
        $("#" + tableID + "BodyFix").offset($("#" + tableID + "sibling").offset());
        $("#" + tableID + "BodyMove").offset($("#" + tableID + "sibling").offset());
        //7、以下当第4个"儿子表格"的滑动时，表体滑动多少，表头就滑动多少
        $("#" + tableID + "BodyMove").scroll(function () {
          $("#" + tableID + "HeadMove").scrollLeft($("#" + tableID + "BodyMove").scrollLeft());
          $("#" + tableID + "BodyFix").scrollTop($("#" + tableID + "BodyMove").scrollTop());
        });
      }
      function randomMath(n, m) {
        return Math.round(Math.random() * (m - n) + n);
      }
      function makeTableBodyString() {
        var firstName = '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶江';
        var lastName = '枯藤老树昏鸦小桥流水人家古道西风瘦马夕阳西下断肠人在天涯马致远天净沙秋思';
        var ary = [];
        for (var i = 1; i <= 60; i++) {
          var obj = {
            name: firstName[randomMath(0, 31)] + lastName[randomMath(0, 35)] + lastName[randomMath(0, 35)],
            yuwenScore: randomMath(60, 100) + "分",
            shuxueScore: randomMath(60, 100) + "分",
            yingyuScore: randomMath(60, 100) + "分",
            zhengzhiScore: randomMath(60, 100) + "分",
            lishiScore: randomMath(60, 100) + "分",
            diliScore: randomMath(60, 100) + "分",
            wuliScore: randomMath(60, 100) + "分",
            huaxueScore: randomMath(60, 100) + "分",
            shengwuScore: randomMath(60, 100) + "分",
            tiyuScore: randomMath(60, 100) + "分",
            yingyueScore: randomMath(60, 100) + "分",
            meishuScore: randomMath(60, 100) + "分"
          };
          ary.push(obj);
        }
        var str = ""
        $.each(ary, function (index, item) {
          str += "<tr>";
          str += "<td>" + item.name + "</td>";
          str += "<td>" + item.yuwenScore + "</td>";
          str += "<td>" + item.shuxueScore + "</td>";
          str += "<td>" + item.yingyuScore + "</td>";
          str += "<td>" + item.zhengzhiScore + "</td>";
          str += "<td>" + item.lishiScore + "</td>";
          str += "<td>" + item.diliScore + "</td>";
          str += "<td>" + item.wuliScore + "</td>";
          str += "<td>" + item.huaxueScore + "</td>";
          str += "<td>" + item.shengwuScore + "</td>";
          str += "<td>" + item.tiyuScore + "</td>";
          str += "<td>" + item.tiyuScore + "</td>";
          str += "<td>" + item.meishuScore + "</td>";
          str += "<td>" + "作者钱成=============================" + "</td>";
          str += "</tr>";
        })
        return str;
      }
    });
  </script>
</head>

<body>
  <div style="display: flex;">
    <div class="leftDiv">
      <p>效果说明：</p>
      <p>左侧固定宽，</p>
      <p>右侧表格占满余下宽，</p>
      <p>窗口宽度变化时，</p>
      <p>依然保持这个效果。</p>    
    </div>
    <div style="flex:1;height:600px">
      <table id="myTable">
        <thead>
          <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>政治</th>
            <th>历史</th>
            <th>地理</th>
            <th>物理</th>
            <th>化学</th>
            <th>生物</th>
            <th>体育</th>
            <th>音乐</th>
            <th>美术</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>    
    </div>
  </div>
  <!-- 模仿来源https://blog.csdn.net/qq_29170981/article/details/79221644 -->
</body>
</html>
二、嵌套的数据结构变平级
var allDatas = res.data[0];
var fourMenuLast = [];
var repeatA = '';
var repeatB = '';
angular.forEach(allDatas.children, function (item1) {//步骤1,40
  var fourMenu = {//步骤2,
    myMenu1: {},
    myMenu2: {},
    myMenu3: {}
  };
  fourMenu.myMenu1.name = item1.name;//步骤3,
  fourMenu.myMenu1.id = item1.id;//步骤4,
  fourMenu.myMenu1.showname = item1.name;//步骤5,
  angular.forEach(item1.children, function (item2) {//步骤6,20,
    fourMenu.myMenu2.name = item2.name;//步骤7,21,
    fourMenu.myMenu2.id = item2.id;//步骤8,22,
    fourMenu.myMenu2.showname = item2.name;//步骤9,23,
    angular.forEach(item2.children, function (item3) {//步骤10,15，24,30,35，
      fourMenu.myMenu3.name = item3.name;//步骤11，16，25,31,36，
      fourMenu.myMenu3.id = item3.id;//步骤12，17，26,27,32,37，
      fourMenu.myMenu3.showname = item3.name;//步骤13，18，28,33,38，
      fourMenuLast.push(angular.copy(fourMenu));//步骤14，19，29,34，39，
    });
  });
  //fourMenuLast=[fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu];
  $scope.rowSpan1 = {}; //某个一级导航合并的行数
  angular.forEach(fourMenuLast, function (item) {
    if ($scope.rowSpan1[item.myMenu1.id]) {
      $scope.rowSpan1[item.myMenu1.id] += 1;
    } else {
      $scope.rowSpan1[item.myMenu1.id] = 1;
    }
    if (item.myMenu1.id === repeatA) {
      item.myMenu1.name = '';
    } else {
      repeatA = item.myMenu1.id;
    }
  });
  $scope.rowSpan2 = {}; //某个二级导航合并的行数
  angular.forEach(fourMenuLast, function (item) {
    if ($scope.rowSpan2[item.myMenu2.id]) {
      $scope.rowSpan2[item.myMenu2.id] += 1;
    } else {
      $scope.rowSpan2[item.myMenu2.id] = 1;
    }
    if (item.myMenu2.id === repeatB) {
      item.myMenu2.name = '';
    } else {
      repeatB = item.myMenu2.id;
    }
  });
  $scope.allroles = fourMenuLast;
})
三、js根据表达式画曲线
示例一：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/d3@3/d3.min.js"></script>
    <script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
</head>
<body>
<div id="box" style="width:500px;height:1000px"></div>
<script>
//参数说明 https://www.javascriptcn.com/read-36947.html
functionPlot({
    target:document.getElementById("box"),
    data:[
        {fn:"x^4+x^3+x^2+x+1"}
    ],
    title:"ddddddd",
    xAxis:{
        domain:[-5,5],
    },
    yAxis:{
        domain:[0,70],
    }
})
</script>
</body>
</html>
 
示例二：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/d3@3/d3.min.js"></script>
    <script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
</head>
<body>
<div id="box" style="width:500px;height:1000px"></div>
<script>
functionPlot({
    target:document.getElementById("box"),
    data:[
            {fn:"sqrt(4-x^2)"},
            {fn:"-sqrt(4-x^2)"},
    ],
    title:"ddddddd",
    xAxis:{
        domain:[-5,5],
    },
    yAxis:{
        domain:[-3,3],
    },
    grid:true,
    disableZoom:true  
})
</script>
</body>
</html>

示例三：
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>plot 绘制图像</title>
</head>
<body>
<div id="tester" style="width:600px;height:250px;"></div>
</body>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
<!-- test -->
<script>
  TESTER = document.getElementById('tester');
  Plotly.plot(TESTER, [{
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16]
  }], {
    margin: {t: 0}
  });
</script>
</html>

示例四：
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>plot 绘制图像</title>
</head>
<body>
<div id="math-function" style="width:600px;height:250px;"></div>
</body>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
<!-- test -->
<script>
  TESTER = document.getElementById('math-function');
 
 var x = [], y = [];

 for(var i = -10; i < 10; i += 1) {
   x.push(i);
   y.push(2*i+1);
 }

 Plotly.plot(TESTER, [{
   x: x,
   y: y
 }], {
   margin: {t: 0}
 });
</script>
</html>

四、现在时间


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>北京时间</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    p {
      font-size: 70px;
      text-align: center;
      font-family: 宋体;
    }
    p span {
      display: block;
      color: black;
      float:left;
    }
    p#math {
      color: red;
      height: 80px;
      width:990px;
      margin:0 auto;
    }
    p#math div {
      text-align: center;
      width: 40px;
      height: 80px;
      line-height: 80px;
      float: left;
      font-family: UniDreamLED;
    }
    img{
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<p id="char">北京时间,现在是：</p>
<p id="math"></p>
<script>
  var math = document.getElementById('math');
  function tow(n) {
    var str1="";
    n = n >= 0 && n < 10 ? '0' + n : '' + n;
    for (var i = 0; i < n.length; i++) {
      var str2=n[i];
      str2="<div>"+str2+"</div>";
      str1+=str2;
    }
    return str1;
  }
  function getDate() {
    var nowDate = new Date();
    var year = nowDate.getFullYear();
    var month = nowDate.getMonth() + 1;
    var date = nowDate.getDate();
    var hour = nowDate.getHours();
    var minute = nowDate.getMinutes();
    var second = nowDate.getSeconds();
    var str = tow(year) + "<span>年</span>"
            + tow(month) + "<span>月</span>"
            + tow(date) + "<span>日</span>"
            + tow(hour) + "<span>时</span>"
            + tow(minute) + "<span>分</span>"
            + tow(second) + "<span>秒</span>";
    math.innerHTML = str;
  }
  getDate();
  setInterval(getDate, 1000);
</script>
</body>
</html>

  五、倒计时：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        p {
            font-size: 95px;
            text-align: center;
        }

        p span {
            color: red;
        }

        p span.time {
            color: black
        }
    </style>
</head>
<body>
<p>距离2020年还有</p>
<p><span></span></p>
<script>
  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('2020/1/1 00:00:00');//获取指定日期对象
    var newTime = newDate.getTime();//2020年距离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;
  }
  getDate();
  setInterval(getDate, 1000);
</script>
</body>
</html>


六、10行实现不重复验证码 
不重复的6位随机验证码非常常用，这里是最简单的两种实现方式：（1）自动生成，（2）点击更新。


1、自动生成：每隔1秒自动生成1次。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  #yard{
    font-size: 170px;
    background: grey;
  }
</style>
<body>
<div id="yard"></div>
</body>
</html>
<script>
  var div = document.getElementById("yard");
  function fn(){
    var strCode = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    var str = '';
    while (str.length < 6) {
      var str1 = strCode.charAt(Math.round(Math.random() * 61));
      if (str.indexOf(str1) === -1) {
          str += str1;
      }
    }
    div.innerHTML=str;
  }
  fn();
  var timer=setInterval(fn,1000)
</script>
2、点击更新
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  #yard{
    font-size: 170px;
    background: grey;
    cursor: pointer;/*比“1、自动生成”多出的代码*/
    -webkit-user-select:none;/*比“1、自动生成”多出的代码*/
  }
</style>
<body>
<div id="yard"></div>
</body>
</html>
<script>
  var div = document.getElementById("yard");
  div.onclick=fn;
  function fn(){
    var strCode = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    var str = '';
    while (str.length < 6) {
      var str1 = strCode.charAt(Math.round(Math.random() * 61));
      if (str.indexOf(str1) === -1) {
          str += str1;
      }
    }
    div.innerHTML=str;
  }
  fn();
</script>



七、8行实现发电报效果，电视剧中经常出现文字一个一个地出现的屏幕上，好像是发电报一样，其实用原生js很容易就能实现，就8行代码。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
        background: #000;
        padding: 0;
        margin: 0;
    }
    p {
        color: white;
        font-size: 65px;
        text-indent: 130px;
        font-family:"kaiti";
    }
  </style>
</head>
<body>
<p id="transmitter"></p>
<script>
    var transmitter = document.getElementById("transmitter");
    var allCharacters = "钱成，河南省固始县人，2009年统招本科毕业，2015年底至今，从事前端工作"+(new Date().getFullYear() - 2016)+"年有余，现在是人类最优秀的前端工程师。联系电话：137  1616  4418。完！";
    var n = 0;
    var timer = setInterval(function () {
        transmitter.innerHTML += allCharacters.charAt(n);
        n++;
        if (n >= str.length)clearInterval(timer);
    }, 100);
</script>
</body>
</html>

上一篇：Springboot2+mybatis-plus配置datasource报错 Invalid bound statement (not found)


下一篇：2022年的6个JavaScript用户认证库