JavaScript实现使用js外链的方式输出一个5行6列的长方形的代码

news2024/11/27 0:03:27

   以下为实现使用js外链的方式输出一个5行6列的长方形的程序代码和运行截图

目录

前言

一、使用js外链的方式输出一个5行6列的长方形(HTML部分)

1.1 运行流程及思想

1.2 代码段

1.3 JavaScript语句代码

二、使用js外链的方式输出一个5行6列的长方形(js部分)

1.1 运行流程及思想

1.2 代码段

三、JavaScipt部分(完整版)

1.2 代码段


前言

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

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

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

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

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

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

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

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


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

一、使用js外链的方式输出一个5行6列的长方形(HTML部分)

1.1 运行流程及思想

这是通过通过外链的方式来定义输出5行6列输出长方形的代码。具体思想流程如下:

1.2 代码段

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="4.js">
			
		</script>
	</head>
	<body>
	</body>
</html>

1.3 JavaScript语句代码

代码如下(示例):

<script src="4.js">
			
		</script>

二、使用js外链的方式输出一个5行6列的长方形(js部分)

1.1 运行流程及思想

(js部分文件我以4.js命名的)

1.2 代码段

代码如下(示例):

var arr = new Array(new Array("*","*","*","*","*"),new Array("*","*","*","*","*"),new Array("*","*","*","*","*"),new Array("*","*","*","*","*"),new Array("*","*","*","*","*"),new Array("*","*","*","*","*"));
			for( var i in arr)
			{
				for(var j in arr[i])
				{document.write("&nbsp;")
					document.write(arr[i][j])+"";
				}
				
				document.write("<br>");
				
			}		

三、JavaScipt部分(完整版)

1.2 代码段

代码如下(示例):

<script type="text/javascript">
	var arr = new Array(new Array("*","*","*","*","*"),new Array("*","*","*","*","*"),new Array("*","*","*","*","*"),new Array("*","*","*","*","*"),new Array("*","*","*","*","*"),new Array("*","*","*","*","*"));
			for( var i in arr)
			{
				for(var j in arr[i])
				{document.write("&nbsp;")
					document.write(arr[i][j])+"";
				}
				
				document.write("<br>");
				
			}		
		</script>

运行结果如下(示例):

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

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

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

相关文章

Solidity基础七

无论风暴将我带到什么岸边&#xff0c;我都将以主人的身份上岸 目录 一、Solidity的单位 1. 货币Ether 2. 时间单位Time 二、地址的形成 三、以太坊的账户 1.内部账户&#xff08;简称CA&#xff09; 2.外部账户&#xff08;简称EOA&#xff09; 3.内部账户和外部账户…

dom中的事件处理

事件参考 | MDN (mozilla.org) 什么是事件 事件监听方式 直接在html中编写JavaScript代码(了解) <button οnclick"console.log(按钮1发生了点击~);">按钮1</button> DOM属性&#xff0c;通过元素的on.....来监听事件 // 2.onclick属性// function h…

如何在华为OD机试中获得满分?Java实现【任务总执行时长】一文详解!

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: Java华为OD机试真题&#xff08;2022&2023) 文章目录 1. 题目描述2. 输入描述3. 输出描述…

Visual Studio2022编译器实用调试技巧

目录 1.什么是bug 2.调试是什么&#xff1f; 3.debug和release的介绍 4.windows环境调试介绍 4.1 调试环境的准备 4.2 学会快捷键 4.3 调试的时候查看程序当前信息 4.4 查看内存信息 5.如果写出好&#xff08;易于调试&#xff09;的代码 7.编程常见的错误 1.什么是b…

android MutableLiveData与AndroidViewModel避坑小提示,Java

android MutableLiveData与AndroidViewModel避坑小提示&#xff0c;Java import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.lifecycle.AndroidViewModel; import androidx.lifecycle.LifecycleOwner; import androidx.l…

Tomcat部署项目后,验证码不显示问题

在使用Tomcat服务器部署项目后&#xff0c;发现验证码不显示&#xff0c;在浏览器按f12查询后出现以下页面 查看源码发现一切正常 查阅相关资料后&#xff0c;得到以下方法&#xff1a; 1.在tomcat配置文件catalina.sh文件中找到-Djava.io.tmpdir"$CATALINA_TMPDIR" …

day38|动态规划-爬楼梯问题

DP问题类型&#xff1a; 动态规划比较重要的是找到前后两个状态之间的联系&#xff0c;在向后遍历的过程中注意遍历的顺序和初始化操作。 动归基础类问题 背包问题 打家劫舍 股票问题 子序列问题 DP问题的一些注意事项&#xff1a; 动态规划类的问题代码都是比较简洁的&…

数据结构之排序专题 —— 快速排序原理以及改进方法(添加随机,三路快排)

内容概述 尽管此类博客已经非常非常多&#xff0c;而且也有很多写得很好&#xff0c;但还是想记录一下&#xff0c;用最容易理解的方式&#xff0c;并且多补充了一些例子。 整理云盘的时候发现大一时候的笔记&#xff0c;用的是 txt 文本文件记录的&#xff0c;格式之丑陋可想…

SAP-MM-采购申请审批那些事!

1、ME55不能审批删除行项目的PR 采购申请审批可以设置行项目审批或抬头审批。如果设置为抬头审批时&#xff0c;ME55集中审批时&#xff0c;就会发现有些采购申请时不能审批的&#xff0c; 那么这些采购申请时真的不需要审批么&#xff1f;不是的&#xff0c;经过核对这些采购申…

solr快速上手:managed-schema标签详解(三)

0. 引言 core核心是solr中的重中之重&#xff0c;类似数据库中的表&#xff0c;在搜索引擎中也叫做索引&#xff0c;在solr中索引的建立&#xff0c;要先创建基础的数据结构&#xff0c;即schema的相关配置&#xff0c;今天继续来学习solr的核心知识&#xff1a; solr快速上手…

chatgpt赋能python:Python绑定CPU:提高性能的利器

Python 绑定 CPU&#xff1a;提高性能的利器 介绍 Python 作为一门通用编程语言&#xff0c;具有易学易用、开发效率高等优点&#xff0c;但由于其解释型的特性&#xff0c;执行效率相对较低&#xff0c;尤其是在处理大量计算时&#xff0c;性能瓶颈更为明显。在这种情况下&a…

chatgpt赋能python:用Python发送短信的简单方法

用Python发送短信的简单方法 在今天的数字时代&#xff0c;没有任何事情比即时通讯更方便。然而&#xff0c;短信仍然是一种极为有用的通信方式。 实际上&#xff0c;正如您所看到的&#xff0c;本文将告诉您如何使用Python在几步内轻松地发送短信。 发送短信的三种方法 要发…

Unity之TileMap

1、创建瓦片资源 教程中老师在Asset---Create---Tile创建&#xff0c;但是新版本Unity不能这样创建 新版本是在Asset---Create---2D--Tile里面选择&#xff0c;跟老师的不太一样&#xff0c;暂时也不懂怎么解决 所以我们可以用方法二创建&#xff1a; 在Window---2D---Tile…

Linux---phy外设调试(二)

文章目录 一、mdio与rmii/sgmii二、主控mac控制器配置三、phy driver与device的匹配规则 一、mdio与rmii/sgmii 接上一篇文章《Linux—phy外设调试&#xff08;一&#xff09;》&#xff0c;在上一篇中我们说到我们还遗留了几个问题没有解释&#xff0c;其中提到的有mdio总线和…

海量数据中找出前k大数(topk问题),一篇文章教会你

&#x1f4af; 博客内容&#xff1a;【数据结构】向上调整建堆和向下调整建堆的天壤之别以及堆排序算法 &#x1f600; 作  者&#xff1a;陈大大陈 &#x1f680; 个人简介&#xff1a;一个正在努力学技术的准前端&#xff0c;专注基础和实战分享 &#xff0c;欢迎私信&…

[极客大挑战 2019]PHP1

既然提到了备份网站估计也是存在着网站备份文件&#xff0c;可以先用御剑扫一下 啥都没扫出来&#xff0c;但是上回做文件备份的题目时收集了一些关于常用备份文件的文件名和后缀&#xff0c;可以直接使用burp抓包爆破&#xff0c;果然爆破出一个www.zip文件 访问下载好文件就有…

电子科技大学编译原理复习笔记(四):程序语言的设计

目录 前言 重点一览 语言的定义 比较&#xff1a;生成观点与识别观点 语义又该怎么描述&#xff1f; 符号串 符号串集合 ⭐文法&#xff08;超重点&#xff09; 定义 组成 表示 ⭐分类&#xff08;重点&#xff09; 文法产生的语言 ⭐短语、直接短语和句柄&…

幂等问题解决

什么是幂等性&#xff1f; 幂等&#xff08;idempotent、idempotence&#xff09;是一个数学与计算机学概念&#xff0c;常见于抽象代数中。 在数学中&#xff0c;主要有两个定义 如果在一元运算中&#xff0c;x 为某集合中的任意数&#xff0c;如果满足 f(f(x))f(x)&#xff0…

软件质量测试笔记-合工大

第一章 软件质量和测试背景 应从以下几个方面考虑软件质量&#xff1a; 软件结构功能与性能开发标准与文档 IEEE关于软件质量的定义&#xff1a; 系统&#xff0c;部件&#xff0c;过程满足规定需求的程度系统&#xff0c;部件&#xff0c;过程满足顾客或者用户需要的期望程…

vue css变量实现多主题皮肤切换

实现方式 多主题皮肤切换有很多种实现方式&#xff0c;可以用css预处理器实现&#xff0c;可以用js实现&#xff0c;其实最近简单的一种方式是用css变量(css variable)实现 单页面应用中&#xff0c;可以通过设置body的css变量爱控制整个系统的颜色&#xff0c;body添加一个属…