js实现图形输出

article/2025/11/11 3:12:44

1、矩形 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>//嵌套循环:外层循环一次,内层循环一轮//矩形for (var j = 1; j <= 5; j++) {for (var i = 1; i <= 5; i++) {document.write("*")}document.write("<br>")}</script></body>
</html>

1、 平行四边形

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>//平行四边形for (var j = 1; j <= 5; j++) {for (var k = 5; k > j; k--) {document.write("&ensp;")}for (var i = 1; i <= 5; i++) {document.write("*")}document.write("<br>")}</script></body>
</html>

 1、三角形

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>//三角形for (var j = 1; j <= 5; j++) {//控制每一行缩进的空格for (var k = 5; k > j; k--) {document.write("&ensp;");}//内层控制每一行的内容for (var i = 1; i <= 2 * j - 1; i++) {document.write("*");}document.write("<br>");}//正直角三角形for (var i = 1; i <= 5; i++) {for (var j = 1; j <= i; j++) {document.write("*");}document.write("<br>");}document.write("<br>");//倒直角三角形for (var i = 1; i <= 5; i++) {for (var j = 6; j > i; j--) {document.write("*");}document.write("<br>");}</script></body>
</html>

 


http://chatgpt.dhexx.cn/article/I66evrrQ.shtml

相关文章

用JS 输出 正三角形

效果图 以下是代码及 每行代码解释&#xff0c;仅供参考。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"view…

js 页面输出html,javascript中如何输出?

面对刚刚学习JavaScript的同学们&#xff0c;你是否知道JavaScript如何输出&#xff1f;下面本篇文章就来给大家介绍一下javascript的几种输出方式&#xff0c;希望对大家有所帮助。 JavaScript的输出方式&#xff1a; javascript 没有任何打印或输出的函数&#xff0c;可以通过…

js 向页面输出html,javascript怎么输出?

JavaScript怎么输出&#xff1f;输出方式有哪些&#xff1f;下面本篇文章就给大家介绍JavaScript的几种输出方式&#xff0c;希望对大家有所帮助。 方法1&#xff1a;使用window.alert()进行输出 window.alert()方法用于显示带有一条指定消息和一个【确认】 按钮的警告框。 代码…

JS 的三种输出方式

输出方式 第一种&#xff1a;alert&#xff08;&#xff09; alert() 语句&#xff1a;可以输出警告框。具有弹框效果 代码示例&#xff1a; <script type"text/javascript">alert(holle warold); </script> 效果图&#xff1a; 第二种&#xff1a;…

JavaScript的输出方式大全

helo&#xff01;小伙伴们&#xff0c;你们是不是和我一样学在学js过程中感觉这个知识不仅脑子&#xff0c;反而觉得相关的知识好多呀&#xff0c;网上的文章和视频也是&#xff0c;都不知道该怎么选了&#xff0c;没关系&#xff0c;我们慢慢来&#xff0c;这些知识点一点一点…

JS输出方式

一个程序编写完成之后&#xff0c;我们运行出的结果也有着不同的输出方式。 下面我主要介绍三种输出结果的方式&#xff1a;alert&#xff1b;console.log&#xff1b;document.write。 alert 这种输出方式是使用弹出框显示结果&#xff0c;但是只能一个一个的输出&#xff…

Android LiveData我的理解

LiveData用大众语言来来讲&#xff0c;是一个被观察者&#xff0c;也是一个数据持有类或者可以称为一个数据的包裹类。它有别于其他的观察者的重点是&#xff0c;他具有生命周期感知能力&#xff0c;这里生命周期指的是activities, fragments, or services 的生命周期。 讲到L…

Android LiveData组件详解以及LiveDataBus

转载请标明出处&#xff1a;https://blog.csdn.net/zhaoyanjun6/article/details/99749323 本文出自【赵彦军的博客】 文章目录 LiveData简介使用Java 使用方式两种订阅模式observeobserveForever 三、LiveDataBus3.1 为什么要用LiveDataBus替代EventBus和RxBus?3.2 LiveDataB…

【Android】MutableLiveData与LiveData

MutableLiveData笔记 MutableLiveData是什么&#xff1f;LiveData是什么&#xff1f;LiveData常用的方法MutableLiveData和LiveData的区别 关于postValue和setValue的机制简单理解 MutableLiveData是什么&#xff1f; public class MutableLiveData extends LiveData<T>…

Android架构——LifeCycle和LiveData原理学习总结

本文是楼主学习LifeCycle和LiveData原理的一些总结&#xff0c;本文不会长篇分析源码&#xff0c;而是利用类图和总结性的文字归纳原理。由于Livedata和LifeCycle有紧密联系&#xff0c;所以本文先总结LifeCycle原理&#xff0c;再总结LifeData原理。 本文LifeCycle基于版本an…

Android架构之LiveData组件

Jetpack组件系列文章 Android架构之LifeCycle组件 Android架构之Navigation组件(一) Android架构之Navigation组件(二) Android架构之Navigation组件(三) Android架构之Navigation组件(四) Android架构之ViewModel组件 Android架构之LiveData组件 Android架构之Room组件(一) An…

LiveData的基本使用

我们在《ViewModel的基本使用》这篇文章中提到了&#xff0c;ViewModel的主要作用是存放页面所需要的各种数据&#xff0c;而当这些数据发生变化时&#xff0c;我们采用接口的方式实现对页面的通知。 这样做是可行的&#xff0c;但如果要观察的数据很多&#xff0c;则需要定义大…

DataBinding与LiveData

DataBinding 一、添加配置二、使用修改布局文件具体使用单向绑定、方法绑定双向绑定、加载网络图片例子Adapter中使用使用 ObservableField 一、添加配置 如果需要使用databinding 需要在gradle中添加如下配置 defaultConfig {......//开启dataBindingdataBinding {enabled …

ViewModel+LiveData+DataBinding

1 ViewModel ViewModel要解决的问题 瞬态数据的丢失异步调用的内存泄露类膨胀提高维护难度和测试难度 ViewModel是介于视图和数据模型之间的桥梁&#xff0c;使数据和视图分离的同时还能通信。 2 LiveData ViewModel中可以存储普通数据&#xff0c;LiveDate数据 普通数据…

【Jetpack】LiveData 架构组件 ( LiveData 简介 | LiveData 使用方法 | ViewModel + LiveData 示例 )

文章目录 一、LiveData 简介二、LiveData 使用方法三、ViewModel LiveData 简单示例1、ViewModel LiveData 代码2、Activity 组件代码3、运行效果展示 四、ViewModel LiveData Fragment 通信示例1、ViewModel LiveData 代码2、Activity 组件代码Activity 代码布局文件 3、…

LiveData详细分析

目录介绍 01.LiveData是什么东西02.使用LiveData的优势03.使用LiveData的步骤04.简单使用LiveData05.observe()和observerForever()06.LiveData原理介绍07.observe订阅源码分析08.setValue发送源码分析09.observeForever源码10.LiveData源码总结 00.使用LiveData实现bus事件总…

LiveData+Room

文章目录 LiveData1.LiveData的作用2.LiveData的特点3.LiveData与ViewModel(无参数)的结合4.LiveData与ViewModel(有参数)的结合5.map()和switchMap()5.0 map()和switchMap()的作用5.1map()5.11没带ViewModel版5.12带ViewModel版 5.2switchMap() Room1.Room的定义2.Room的三个组…

Android架构组件(二)——LiveData

Android架构组件&#xff08;二&#xff09;——LiveData 上一篇文章讲到了Android架构组件之一Lifecycle组件&#xff08;Android 架构组件&#xff08;一&#xff09;——Lifecycle-Aware Components&#xff0c;现在我们再来看看另一个成员LiveData。 定义 简单地说&#xf…

Android LiveData 使用详解

说在前面 本次推出 Android Architecture Components 系列文章&#xff0c;目前写好了四篇&#xff0c;主要是关于 lifecycle&#xff0c;livedata 的使用和源码分析&#xff0c;其余的 Navigation&#xff0c; Paging library&#xff0c;Room&#xff0c;WorkMannager 等春节…

由浅入深,详解 LiveData 的那些事

引言 关于LiveData,在2022尾声的今天&#xff0c;从事 Android 开发的小伙伴一定不会陌生。相应的&#xff0c;关于 LiveData 解析与使用的文章更是数不胜数&#xff0c;其中不乏优秀的创作者&#xff0c;在众多的文章以及前辈面前&#xff0c;本篇也不敢妄谈能写的多么深入,易…