【JavaScript】利用JS实现柱形统计图

CSS代码部分：

<style>* {margin: 0px;padding: 0px;}.box {display: flex;width: 700px;height: 500px;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;/*让第*季度这几个字在.box下显示*/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>

JS代码部分：

<script>let arr = []// 循环季度 一共需要4次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>

代码截图：

在弹出框中输入数据

最终将数据呈现在柱形图

【JavaScript】利用JS实现柱形统计图相关推荐

(Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲 ...
淘宝客教程：如何利用JS调用淘宝商品javascript教程
[导读]大家都知道,现在最流行的是淘宝客,但一年前搜索引擎已经对淘宝客网站的API很不友好了,因为做的人太多,露得清深层净化API都是直接获取的淘宝数据,内容都是大量重复的.后来淘宝客javascri ...
利用JS提交表单的几种方法和验证
工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么.在导师的催促下就总结出以下的几种常用表单提交的方法. ...
利用JS调用aspx页面(转载)
在实际开发中如新闻系统就需要利用js来调用某分类的新闻等. 非Codebehind版 Showjs.aspx ---------------------------- <%Response.Wr ...
html调用一个php文件路径_HTML中利用js调用php的内容
HTML中利用js调用php的内容经常会看到很多网站的统计代码都是以js调用的形式显示的,下面我们就来看看那如何实例的吧. $countfile = "num.txt"; //定 ...
html段落自动删除,利用JS代码自动删除稿件的普通弹幕功能
事情的起因是在b站投稿了一个高级弹幕测试的视频(av9940487),但是由于b站的弹幕池机制是新的弹幕顶掉旧的弹幕,所以导致一些人发的高级弹幕很快就被顶掉了. 所以就想着写个脚本来自动删除属性为普通 ...
如果理解Javascript利用闭包循环绑定事件
我们先看一个关于Javascript利用循环绑定事件的例子: 例如:一个不确定长度的列表,在鼠标经过某一条的时候改变背景. <!DOCTYPE html PUBLIC "-//W3C/ ...
利用JS来实现表格的全选、全不选、反选以及删除的功能
利用JS来进行表格的选择删除等功能二.代码 1.表格的制作以及事件的绑定 2.全选按钮的功能实现 3.全不选按钮的功能实现 4.反选按钮的功能实现 5.删除按钮的功能实现 6.鼠标悬停时颜色的变化 ...
利用js制作动态小时钟
利用js制作动态小时钟在学完Date()函数之后,可以用来与CSS结合制作一个能转动的时钟. 新建html文件,写好基本结构,代码如下: <!DOCTYPE html> <html ...

【JavaScript】利用JS实现柱形统计图

【JavaScript】利用JS实现柱形统计图相关推荐

最新文章

热门文章