图形抽象

  1.     // let data = [
  2.     //     [{char: " ", num: 0}, {char: "*", num: 1}],
  3.     //     [{char: " ", num: 0}, {char: "*", num: 2}],
  4.     //     [{char: " ", num: 0}, {char: "*", num: 3}],
  5.     //     [{char: " ", num: 0}, {char: "*", num: 4}],
  6.     //     [{char: " ", num: 0}, {char: "*", num: 5}],
  7.     // ]

抽象逻辑思维 分文件封装函数(打印出菱形)

  1.     //已知条件:
  2.     //gao = 7,i = 0;   --> hangNum = i + 1
  3.     //                 --> bigHangCount = gao 
  4.     //                 --> binHangNum = (gao + 1) / 2 
  5.     //
  6.     //            hangNum                kongCount                         *号
  7.     //     *       1------------------------3=4-1--------------------------1 =7-3*2
  8.     //    ***      2------------------------2=4-2--------------------------3
  9.     //   *****     3------------------------1=4-3--------------------------5
  10.     //  *******    4------------------------0=4-0--------------------------7
  11.     //   *****     5------------------------1=5-4--------------------------5
  12.     //    ***      6------------------------2=6-4--------------------------3
  13.     //     *       7------------------------3=7-4--------------------------1
  15.             hangNum=i+1    kongCount=|binHangNum-hangNum|      *=bigHangCount-2*kongcount
  17.     kongCount判断:  
  18.         let kongCount;
  19.         //用if(){} else(){}
  20.         if(binHangNum<=hangNum){  
  21.             kongCount=binHangNum-hangNum
  22.         }else{
  23.             kongCount=hangNum-bigHangNum
  24.         }
  25.         //用三元运算符
  26.         kongCount = hangNum <= bigHangNum ? 
  27.         bigHangNum - hangNum : 
  28.         hangNum - bigHangNum;

打印图形代码思路

  • getShape.js(这个文件写打印图形)
  1.     // 得到duan函数
  2.     function getDuanFun(data) {
  3.         let duanStr = "";
  4.         for(let i = 0; i < data.num; i++) {
  5.             duanStr += data.char;
  6.         }
  7.         return duanStr;
  8.     }
  9.     // 得到hang函数
  10.     function getHangFun(data) {
  11.         let hengStr = "";
  12.         for(let i = 0; i < data.length; i++) {
  13.             let duanReturn = getDuanFun(data[i]);
  14.             hengStr += duanReturn;
  15.         }
  16.         hengStr += "\n";
  17.         return hengStr;
  18.     }
  20.     // 专门接收这种数据 然后将图形根据这个数据 打印出来
  21.     function getShape(data) {
  22.         let shapeStr = "";
  23.         for(let i = 0; i < data.length; i++) {
  24.             let hangReturn = getHangFun(data[i]);
  25.             shapeStr += hangReturn;
  26.             //或者可以直接把函数返回值拼接shapeStr
  27.             //shapeStr += getHangFun(data[i]);
  28.         }
  29.         console.log(shapeStr);
  30.     }
  31.     // getShape(data)
  32.     //暴露的本质是为该模块的exports对象添加属性并赋值
  33.     module.exports = getShape;
  • getShapeDate.js(找到每种图形的data[]里的数据)
  1.     //引用模块
  2.     let getShape = require("./getShape.js"); // require是一个函数 要搞清楚他的返回值 这个很重要
  3.     //菱形
  4.     function lingxingFun(gao) {
  5.         let lingxingArr = [];
  6.         let bigHangNum = (gao + 1) / 2;
  7.         let bigHangCount = gao;
  8.         for (let i = 0; i < gao; i++) {
  9.             let hangNum = i + 1;
  10.             let kongCount;
  11.             //let kongCount = hangNum <= bigHangNum ? 
  12.             //bigHangNum - hangNum : 
  13.             //hangNum - bigHangNum;
  14.             if(hangNum <= bigHangNum) {
  15.                 kongCount = bigHangNum - hangNum;
  16.             } else {
  17.                 kongCount = hangNum - bigHangNum;
  18.             }
  19.             lingxingArr.push([
  20.                 {char: " ", num: kongCount}, {char: "*", num: bigHangCount - 2 * kongCount}
  21.             ])
  22.         }
  23.         getShape(lingxingArr);
  24.     }
  25.     lingxingFun(7);    //菱形

轮播图数据抽象

  • HTML页面

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>znn的轮播图</title>
    7.   <link rel="stylesheet" href="./css/lunBo.css">
    8. </head>
    9. <body>
    10.   <div class="loopDiv">
    11.       <img src="" alt="" id="imgId">
    12.       <!-- 获取父亲标签,并且要把句柄绑定在父亲身上 -->
    13.       <div class="dots">
    14.           <!-- 添加index属性,以便后续用来获取每个改变元素的currentIndex -->
    15.           <div class="dot" index="0"></div>
    16.           <div class="dot" index="1"></div>
    17.           <div class="dot" index="2"></div>
    18.           <div class="dot" index="3"></div> 
    19.       </div>
    20.       <div class="position" id="positionLeft">&lt;</div>
    21.       <div class="position" id="positionRight">&gt;</div> 
    22.   </div>
    23. <script src="./js/lunBo.js"></script>   
    24. </body>
    25. </html>

  • CSS样式 ```css .loopDiv { position: relative; width: 700px; height: 350px; margin: 50px auto; } img { width: 700px; height: 350px; } .dots { position: absolute; bottom: 5px; right: 0px; } .dot { width: 20px; height: 20px; margin-right: 4px; border-radius: 25px; background-color:#aaa; float: left; }

.position { margin-top:70px ; width: 100px; height: 50px; background-color: rgba(0,0,0,0.5); text-align: center; color: rgb(201, 192, 192); font-size: 50px; line-height: 50px; font-weight: bold; / border: 1px solid rebeccapurple; / }

positionLeft {

  1. position: absolute;
  2. left: 0px;
  3. top: 80px;

}

positionRight {

  1. position: absolute;
  2. right: 0px;
  3. top: 80px;

}

  2. - 关键核心:js代码编写,实现动态效果
  3. ```javascript
  4. //获取元素
  5. let dots = document.getElementsByClassName("dots")[0];
  6. let dotArr = document.getElementsByClassName("dot");
  7. let loopDiv = document.getElementsByClassName("loopDiv")[0];
  8. let img = document.getElementById("imgId");
  9. let positionLeft = document.getElementById("positionLeft");
  10. let positionRight = document.getElementById("positionRight");
  11. //
  12. let data = {
  13.     srcArr: [
  14.         "./images/douLuo.jpeg",    //0
  15.         "./images/haiZei.jpeg",    //1
  16.         "./images/huoYing.jpeg",    //2
  17.         "./images/longMao.jpg"    //3 
  18.     ],
  19.     currentIndex: 0,
  20.     currentIndexColor: "black"    //区别的,一开始只有一个,默认的,点击想变的颜色(孤立的颜色)
  21. }
  22. //设置定时器返回参数
  23. let timer = null;
  25. //修改某数据为某值时候,页面元素跟着渲染
  26. // 页面渲染: 根据数据进行dom操作 (只不过有时候dom操作再框架中已经帮你进行了你只需要按照某种规则书写 他就会进行dom操作)
  27. function render() {
  28.     let srcArr = data.srcArr;
  29.     let currentIndex = data.currentIndex;
  30.     img.setAttribute("src", srcArr[currentIndex]);
  31.     dotArr[currentIndex].style.backgroundColor = data.currentIndexColor;
  32. }
  33. //修改数据函数
  34. function setData(name, value) {
  35.     data[name] = value;
  36.     render();
  37. }
  38. //页面加载句柄(可以直接赋值给render()函数,但是后面渲染页面的时候还需要启动定时器,所以把这两件事写在函数里)
  39. document.body.onload = function() {
  40.     timer =  setInterval(function() {
  41.         setData("currentIndexColor", "#aaa")
  42.         setData("currentIndex", maxMin(data.currentIndex + 1, data.srcArr.length - 1, 0));
  43.         setData("currentIndexColor", "black")
  44.     }, 2200);
  45.     render();
  46. };
  47. //功能函数(处理data.currentIndex的值,防止溢出是一件事,可以封装一个函数)
  48. function maxMin(value, max, min) {
  49.     if(value > max) {
  50.         return min;
  51.     }
  52.     if(value < min) {
  53.         return max;
  54.     }
  55.     return value;
  57. }
  58. //往右
  59. positionRight.onclick = function() {
  60.     setData("currentIndexColor", "#aaa")
  61.     setData("currentIndex", maxMin(data.currentIndex + 1, data.srcArr.length - 1, 0));
  62.     setData("currentIndexColor", "black")
  63. }
  64. //往左
  65. positionLeft.onclick = function() {
  66.     setData("currentIndexColor", "#aaa")
  67.     setData("currentIndex", maxMin(data.currentIndex - 1, data.srcArr.length - 1, 0));
  68.     setData("currentIndexColor", "black")
  69. }
  70. //小圆点
  71. dots.onclick = function(e) {
  72.     setData("currentIndexColor", "#aaa")
  73.     setData("currentIndex", maxMin(Number(e.target.getAttribute("index")), data.srcArr.length - 1, 0));
  74.     setData("currentIndexColor", "black")
  75. }
  76. //鼠标移入
  77. loopDiv.onmouseover = function() {
  78.     clearInterval(timer);        //清空定时器函数
  79. }
  80. //鼠标移出
  81. loopDiv.onmouseout = function() {
  82.     timer =  setInterval(function() {
  83.         setData("currentIndexColor", "#aaa")
  84.         setData("currentIndex", maxMin(data.currentIndex + 1, data.srcArr.length - 1, 0));
  85.         setData("currentIndexColor", "black")
  86.     }, 2200);
  87.     console.log(timer)
  88.     render();
  89. }