ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2021-08-06 22:32:41  阅读：184  来源： 互联网

标签：function 10 js item tableID str fourMenu var table


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>

标签：function,10,js,item,tableID,str,fourMenu,var,table
来源： https://blog.csdn.net/bao13716164418/article/details/119464297

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有