JavaScript实现通过表格方式显示三角形的代码

news2025/1/17 13:52:14

   以下为实现通过表格方式显示三角形的程序代码和运行截图

目录

前言

一、通过表格方式显示三角形

1.1 运行流程及思想

1.2 代码段

1.3 JavaScript语句代码

1.4 运行截图


前言

1.若有选择,您可以在目录里进行快速查找;

2.本博文代码可以根据题目要求实现相关使用功能。同时可以实现自定义的设置;

3.本文介绍的是JavaScript代码习题,本博文使用的软件是HBuilder X3.7.9编写的代码,原则上其他软件如DW、VSCode或DW较低或较高版本的软件都是兼容的,若您有需要且编写软件不是HBX等软件原则上都是可以能正常运行的;

图1   编写软件举例(部分)

4.这里要特别说明,因为我使用的是HBX,所以是网页格式,我也单独把<script>语句粘贴了出来,有需要可直接复制<script></script>语句;

5.本博文代码是我在上学时写的,有一些地方没能完美实现,请包涵也请多赐教,若您发现了问题也请麻烦您将问题反馈给我,我好更正错误、总结完善、持续改善! 

6.博文通常需要在浏览器运行,通常会弹出表单,输入数值并得出结果。本文使用的是谷歌浏览器,推荐使用谷歌浏览器;

7.若涉及侵权,请联系删除;


提示:以下是本篇文章正文内容,下面案例可供参考

一、通过表格方式显示三角形

1.1 运行流程及思想

这是通过输入指定的数值,以表格方式并通过for if循环方式计算在输入的数值,最后按照公式输出代码。具体思想流程如下:

1.2 代码段

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		var s='<table>';
		var x='';
		for(var i=0;i<26;i++){
			x+='*';
		    s+='<tr><td align="center">'+x+'</td></tr>';
		}
		
		document.write(s+'</table>')
		</script>
	</head>
	<body>
	</body>
</html>

1.3 JavaScript语句代码

代码如下(示例):

<script type="text/javascript">
		var s='<table>';
		var x='';
		for(var i=0;i<26;i++){
			x+='*';
		    s+='<tr><td align="center">'+x+'</td></tr>';
		}
		
		document.write(s+'</table>')
		</script>

1.4 运行截图

运行结果如下(示例):

1.4.1 浏览器弹出表单显示结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/556988.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

5.python列表

文章目录 一、什么是列表二、列表的表示方法三 、列表元素的索引四、访问列表元素五、修改列表元素直接赋值 六、添加列表元素6.1 方法append()6.2 方法insert() 七、删除列表元素7.1 语句del7.2方法pop()7.3方法remove() 八、组织列表8.1倒着打印列表8.2确定列表长度8.3 列表排…

【机器学习】 - 作业5: 基于Kmeans算法的AAAI会议论文聚类分析

课程链接: 清华大学驭风计划 代码仓库&#xff1a;Victor94-king/MachineLearning: MachineLearning basic introduction (github.com) 驭风计划是由清华大学老师教授的&#xff0c;其分为四门课&#xff0c;包括: 机器学习(张敏教授) &#xff0c; 深度学习(胡晓林教授), 计算…

HC-05蓝牙模块的使用

我最近刚刚开始学习嵌入式&#xff0c;在第一次使用蓝牙模块HC-05的时候遇到了很多问题&#xff0c; 甚至连接线都不会&#xff0c;因此下面我会十分详细地介绍我一步一步探索的步骤&#xff0c;直到完成使用手机APP和51单片机收发数据。 调试步骤 首先&#xff0c;我们需要明…

2023开放原子全球开源峰会分论坛即将来袭,Pick你最关注的峰会话题!

2023开放原子全球开源峰会即将开启 二十余场分论坛主题重磅首发 聚焦全球开源发展最新动向 前沿技术、行业实践、开源项目与治理等 多场知识盛宴等您来享 为更好地了解大家的参与意向 分论坛投票今天正式启动&#xff01; 投票时间&#xff1a;5月19-26日 长按识别二维码 …

MFC 给对话框添加图片背景

在windows开发当中做界面的主要技术之一就是使用MFC&#xff0c;通常我们看到的QQ,360,暴风影音这些漂亮的界面都可以用MFC来实现。今天我们来说一下如何用MFC美化对话框&#xff0c;默认情况下&#xff0c;对话框的背景如下&#xff1a; 那么&#xff0c;我们如何将它的背景变…

【Servlet 基础】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 1. 什么是Servlet&#xff1f; 2. 第一个Serv…

微软 LoRA| 使用万分之一的参数微调你的GPT3模型

一、概述 title&#xff1a;LORA: LOW-RANK ADAPTATION OF LARGE LAN- GUAGE MODELS 论文地址&#xff1a;https://arxiv.org/abs/2106.09685 代码&#xff1a;GitHub - microsoft/LoRA: Code for loralib, an implementation of "LoRA: Low-Rank Adaptation of Large …

课时6—死锁(二)

一、死锁的避免 避免死锁同样属于事先预防策略&#xff0c;是在资源动态分配过程中&#xff0c;防止系统进入不安全状态&#xff0c;以避免发生死锁。 1、系统安全状态 在避免死锁方法中&#xff0c;把系统的状态分为安全状态和不安全状态。当系统处于安全状态时可避免发生死…

Android UI开发之多样式富文本的简洁实现

多样式富文本的简洁实现 原文链接&#xff1a;Android UI开发之多样式富文本的简洁实现 AppendableStyleString 允许你快速构建多种样式文字。 特性 支持对于同一个字符串设置多种样式。支持文字和图片。提供默认样式。采用 DSL 确保更清晰的样式作用范围 快速开始 下面的…

【事务失效】十种常见场景

前提 大多数Spring Boot项目只需要在方法上标记Transactional注解&#xff0c;即可一键开启方法的事务性配置。 但是&#xff0c;事务如果没有被正确出&#xff0c;很有可能会导致事务的失效&#xff0c;避免因为事务处理不当导致业务逻辑产生大量偶发性BUG 事务的传播类型 …

JDK8-17的特性发生了哪些变化

JDK8-17的特性发生了哪些变化 垃圾回收器Java交互式编程接口定义扩展String底层结构变更of 创建不可变序列HTTP 2 协议接口引入 var 关键字字符串增强lambda 表达式类型推导switch 增强支持文本块定义instanceof 模式匹配引入record 关键字新增密封类的定义switch二度加强模块…

栈及其实现

目录 一&#xff1a;栈 1.栈的概念和结构 2.栈的实现 <1>.初始化栈 <2>.入栈 <3>.出栈 <4>:获取栈顶元素 <5>.获取栈中有效元素个数 <6>.销毁栈 <7>.示例 二&#xff1a;栈的完整代码 一&#xff1a;栈 1.栈的概念和结构 …

Origin中log2的计算,设置以2为底的log坐标

使用高中的换底公式即可&#xff0c;把2的底换成10的底计算 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5747fdbd2b5c43f095d716092fd17124.png

模式介绍和基本管理

模式介绍&#xff1a; 用户的模式(SCHEMA&#xff09;指的是用户账号拥有的对象集&#xff0c;在概念上可将其看作是包含表、 视图、索引和权限定义的对象。在 DM 中&#xff0c;一个用户可以创建多个模式&#xff0c;一个模式中的对象 &#xff08;表、视图等&#xff09;可以…

【深度学习】- 作业2: MNIST手写数字识别

课程链接: 清华大学驭风计划 代码仓库&#xff1a;Victor94-king/MachineLearning: MachineLearning basic introduction (github.com) 驭风计划是由清华大学老师教授的&#xff0c;其分为四门课&#xff0c;包括: 机器学习(张敏教授) &#xff0c; 深度学习(胡晓林教授), 计算…

stata软件基本操作

一、stata软件介绍 Stata是一个用于分析和管理数据的功能强大又小巧玲珑的实用统计分析软件&#xff0c;由美国计算机资源中心&#xff08;Computer Resource Center&#xff09;研制。它同时具有数据管理软件、统计分析软件、绘图软件、矩阵计算软件和程序语言的特点&#xf…

二叉树的相关知识

1.树概念及结构 1.1树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因 为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&#…

Typora Mac版本安装 Pandoc 导出文件为word格式(windows可通用)

今天在和一位商务小伙伴对接的时候&#xff0c;需要提供一份 word 版本的初稿。对于习惯了使用 支持 markdown 语法的 typora 来说&#xff0c;复制粘贴到 word 是不可能的。 可以通过 “导出” 功能&#xff0c;选择将当前文件导出为 “word” 格式&#xff0c;这个过程有个小…

通过CSS实现炫酷效果,让你的网页不再平淡无奇

通过CSS实现炫酷效果&#xff0c;让你的网页不再平淡无奇 (一)CSS基础1.1CSS介绍1.2CSS样式1.3CSS 格式 &#xff08;二&#xff09;CSS 选择器2.1标签选择器2.2类选择器2.3层级选择器2.4id选择器2.5组选择器2.6伪类选择器2.7通配符选择器 &#xff08;三&#xff09;样式表引入…

【自然语言处理】 - 作业3: 文本情感分析

课程链接: 清华大学驭风计划 代码仓库&#xff1a;Victor94-king/MachineLearning: MachineLearning basic introduction (github.com) 驭风计划是由清华大学老师教授的&#xff0c;其分为四门课&#xff0c;包括: 机器学习(张敏教授) &#xff0c; 深度学习(胡晓林教授), 计算…