HTML+CSS+JavaScript:渲染柱形统计图

这篇具有很好参考价值的文章主要介绍了HTML+CSS+JavaScript:渲染柱形统计图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、需求

用户输入四个季度的数据,根据数据生成柱形统计图,浏览器预览效果如下

HTML+CSS+JavaScript:渲染柱形统计图,html,css,javascript

 文章来源地址https://www.toymoban.com/news/detail-579252.html

二、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱形统计图</title>
    <style>
        * {
            padding: 0;
            margin: 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;
        }
    </style>
</head>

<body>
    <script>
        let arr = []
        for (let i = 1; i <= 4; i++) 
        {
            arr.push(+prompt(`请输入第${i}季度的数据:`))
        }
        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>
</body>

</html>

三、相关属性的用法

1、justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

HTML+CSS+JavaScript:渲染柱形统计图,html,css,javascript

 我把代码中的justify-content: space-around;理解为自动等间隔布局,去掉justify-content: space-around;这行代码会使浏览器预览效果变成这样

HTML+CSS+JavaScript:渲染柱形统计图,html,css,javascript

 去掉justify-content: space-between;这行代码会使浏览器预览效果变成这样

HTML+CSS+JavaScript:渲染柱形统计图,html,css,javascript

 

2、align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

HTML+CSS+JavaScript:渲染柱形统计图,html,css,javascript

 将弹性 <div> 元素的所有项目居中对齐的代码如下

div {
  display: flex;
  align-items: center;
}

在渲染柱形统计图的项目中,align-items: flex-end;的作用是将.box元素的所有项目(也就是子级<div>)定位到.box的末端,去掉align-items: flex-end;浏览器预览的效果是这样的

HTML+CSS+JavaScript:渲染柱形统计图,html,css,javascript

 3、flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

HTML+CSS+JavaScript:渲染柱形统计图,html,css,javascript

 以相反的顺序设置 <div> 元素内的弹性项目的方向,代码如下

div {
  display: flex;
  flex-direction: row-reverse; 
}

在渲染柱形统计图的项目中,去掉flex-direction: column;浏览器预览的效果是这样的

HTML+CSS+JavaScript:渲染柱形统计图,html,css,javascript

 

到了这里,关于HTML+CSS+JavaScript:渲染柱形统计图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML+CSS+JavaScript华为主页

    HTML+CSS+JavaScript仿华为首页

    2024年02月11日
    浏览(60)
  • html +css + JavaScript 期末复盘

    实验一中的制作表格代码(亦可回顾https://blog.csdn.net/qq_52495761/article/details/134759245) 上述的两种形式都可以实现对div中方文字进行渲染 使用标签做外观渲染的 缺点 : 1)一眼看过去,看到的都是做外观的标签, 不容易阅读到正文 2)内容和外观相混合, 无法做到合理分工

    2024年02月02日
    浏览(44)
  • 前端全集Ⅰ---- HTML/CSS/JavaScript

    Web:全球广域网,也称万维网,能够通过浏览器访问的网站 Web网站的工作流程:(前后端分离模式) 网页有哪些组成? 文字、图片、视频、音频、超链接 前端代码通过浏览器的解析和渲染变成用户看到的页面,对网页进行解析渲染的部分就是浏览器的内核 Web标准 不同的浏

    2024年02月15日
    浏览(73)
  • HTML+CSS+JavaScript入门教程(万字)

    作为一名后端开发人员,开发过程中,必不可少的与前端进行对接,因此尽管是后端开发者,也需要一定的前端知识,因此写下HTML+CSS+JavaScript入门知识,着重介绍了JavaScript,方便自己复习,也各位小伙伴参考。 1.1什么是HTML HTML是一门语言,所有的网页都是用HTML这门语言编写

    2024年02月14日
    浏览(48)
  • 前端= 结构(HTML)+ 样式(CSS)+ 行为(JavaScript)

    前端开发确实涵盖了行为(JavaScript)、样式(CSS)和结构(HTML)这三个主要方面。这三个方面在前端开发中密切协作,共同构建用户界面和用户体验。 结构(Structure):HTML 是用于定义页面结构的标记语言。通过使用 HTML 标签,可以创建网页的基本骨架,包括标题、段落、

    2024年02月13日
    浏览(60)
  • 【简单的留言墙】HTML+CSS+JavaScript

                                             1.首先我们用HTML的一些标签,初步构造区域 样式。                                                                                2.上面操作已经初步完成布局,接下来在style标签中书写CSS代码,利用各种选择器设置。

    2024年02月07日
    浏览(45)
  • javascript+css+html购物车案例

    javascript代码部分主要实现三部分功能  1、商品数量增加(减少)同时小计增加(减少) 这部分主要是通过for循环给增加(减少)按钮绑定点击事件 1)点击后计数器自增(自减) 2)计数器数量*对应商品单价 赋值给对应商品小计(涉及到数据类型转换) parseInt(\\\'12ccc\\\' ) →

    2024年02月02日
    浏览(68)
  • 前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

    他们这样形容我 是暴雨浇不灭的火                                                       —— 24.4.18 学习目标         理解                 HTML的概念                 HTML的分类                 HTML的关系                 HTML的语义化         应用

    2024年04月23日
    浏览(56)
  • 【HTML+CSS+JavaScript】实现鼠标点击烟花效果

    本文主要讲解三种烟花效果(爆炸型、心型、圆形),文章末尾附有完整的代码和图片获取链接。 效果图(一) - 心型 : 效果图(二) - 圆型 : 效果图(三) - 爆炸型 : (1) HTML部分代码 (2) CSS部分代码 (3) 内部的JavaScript部分代码 (1) HTML部分代码 (2) CSS部分代码 (3) 内部的JavaScript部分

    2024年02月01日
    浏览(87)
  • 简单的倒计时(html + css + javaScript)

    这个页面包含一个输入日期的输入框、一个“开始倒计时”的按钮以及一个显示倒计时的元素。当用户点击按钮时,会通过JavaScript获取输入的日期,并开始一个定时器,每秒更新倒计时并随机改变颜色。当倒计时结束时,定时器会被清除,倒计时元素将显示\\\"倒计时已结束\\\",

    2024年02月03日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包