首页 > 其他分享 >js- day03- 将数据变成柱形图

js- day03- 将数据变成柱形图

时间:2022-12-02 10:14:18浏览次数:2724  
标签:box flex day03 柱形图 js width pink margin

柱形图的渲染 * {             margin: 0;             padding: 0;         }
 .box {             display: flex;             width: 700px;             height: 300px;             border-left: 1px solid pink;             border-bottom: 1px solid pink;             margin: 50px auto;             justify-content: space-around;             align-items: flex-end;             text-align: center;         }  .box>div {             display: flex;             width: 50px;             background-color: pink;             flex-direction: column;             justify-content: space-between;         }  .box div span {
        margin-top: -20px;         }
  .box div h4 {             margin-bottom: -35px;             width: 70px;             margin-left: -10px;         } js渲染 <script>         //1.利用循环弹出四次输入框,会得到四个数据,放到数组里面         let arr = []         for(let i = 1;i<=4;i++)         {             arr.push(prompt(`请输入第${i}季度的数据`))         }         //console.log(arr)         //注意我们渲染的是柱子         document.write(`<div class ="box">`) //打印头部         //循环四个柱子         for(let i = 0;i<arr.length;i++)         {             document.write(`             <div style="height: ${arr[i]}px;">                 <span>${arr[i]}</span>                 <h4>第${i+1}季度</h4>             </div>             `)         }         document.write(`<\div>`)     </script>

标签:box,flex,day03,柱形图,js,width,pink,margin
From: https://www.cnblogs.com/nefu-xiaoshuang/p/16943548.html

相关文章

  • js-day01-商品订单信息
    学会表格表单(html+css)表格的默认CSS属性*{      margin:0;      padding:0;    }    table{      margi......
  • react JSX
    JSX到底是什么?一种标签语法,hs进行的语法拓展不是字符串,不是HTML标签描述UI呈现与交互的直观的形式生成react元素createElement与jsx对比constrE1=<h1>Thisi......
  • Next.js & styled-components All In One
    Next.js&styled-componentsAllInOnestyled-components$npmi-Sstyled-components$yarnaddstyled-componentshttps://styled-components.com/https://gi......
  • vercel deploy next.js error All In One
    verceldeploynext.jserrorAllInOnehttps://vercel.com/web-full-stack/nextjs-ssr/deploymentsbug[23:57:30.114]Cloninggithub.com/web-full-stack/nextjs-ss......
  • js-day02-综合案例ATM存款书写
     <script>        //1.不断的弹出对话框    //3.金额的变量    letmoney=100    while(true){     ......
  • js day04 实参与形参个数不一致
    //functionfn(x,y){    //  //x=1    //  //y=undefined    //  //1+undefined = NaN    //  ......
  • for in 和 for of 是js中常用的遍历方法。但是两者有什么区别呢?
    forin和forof是js中常用的遍历方法。但是两者有什么区别呢?今天我们就来讨论下两者的区别。遍历数组forin是ES5的语法标准,而forof则是ES6语法标准。const......
  • 使用Fastjson作为http消息转换器
    主要是创建 FastJsonHttpMessageConverter的实例。@BeanpublicHttpMessageConvertersfastJsonHttpMessageConverters(){//1、定义一个convert转换消......
  • js day04 综合案例秒数计算
    <script>    //用户输入总秒数    letsecond=+prompt('请输入总秒数:')    //计算时分秒    functiongetTime(t){    ......
  • golang的jsonrpc客户端通用写法
    服务端packagemainimport( "errors" "fmt" "log" "net" "net/rpc" "net/rpc/jsonrpc" "os")//算数运算结构体typeArithstruct{}//算数运算请求结......