首页 > 编程语言 >JAVA小白学习日记Day12

JAVA小白学习日记Day12

时间:2024-07-29 19:25:20浏览次数:20  
标签:定位 arr console log 元素 小白 obj Day12 JAVA

CSS定位

1. 定位属性 
在CSS中,position属性用于指定元素在文档流中的定位方式。常用的取值包括:

static:

默认值,元素遵循正常的文档流布局,不受top、right、bottom、left属性的影响。
relative:

元素相对于其正常位置进行定位,通过 top、right、bottom、left 属性可以调整元素相对于初始位置的偏移量。相对定位的元素仍然占据其原来的空间,周围的内容会根据偏移量调整位置。
absolute:

元素的位置相对于其最近的非static定位祖先元素(或文档的初始包含块)进行定位。如果没有找到这样的祖先元素,则相对于整个文档进行定位。
绝对定位的元素不再占据正常文档流的空间,可以通过 top、right、bottom、left 属性精确控制其位置。
fixed:

元素相对于浏览器窗口进行定位,始终保持在页面的固定位置,不随页面滚动而移动。
类似于绝对定位,但定位参考物是视口而不是文档。
2. CSS定位属性的使用方法
在给定的HTML示例中,四个不同颜色的<div>元素展示了不同的定位方式:

第一个红色的 <div class="red"></div> 使用默认的静态定位。
第二个绿色的 <div class="green"> 使用固定定位 (position: fixed;),位于浏览器窗口底部右侧。
第三个粉色的 <div class="pink"> 使用相对定位 (position: relative;),相对于其原始位置向右和向下偏移。
第四个蓝色的 <div class="blue"> 使用绝对定位 (position: absolute;),其位置由CSS中的具体定位属性(如 top, right, bottom, left)来控制。
3. 定位的参照物
绝对定位和相对定位 的参照物是其最近的具有定位属性(非static)的祖先元素。如果找不到这样的祖先元素,则相对于初始包含块(通常是浏览器窗口)进行定位。
固定定位 的参照物始终是浏览器窗口本身。
4. 盒模型
CSS中的盒模型描述了元素在页面布局中所占的空间,包括 padding(内边距)、margin(外边距)、border(边框)等属性,这些属性可以影响元素的尺寸和位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 100px;
				width: 100px;
				
			}
			.red{
				background-color: red;
			}
			.blue{
				background-color: #03A9F4;
			}
			.green{
				background-color: seagreen;
			}
			.pink{
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="red"></div>
		<div class="green" style="position: fixed;bottom: 0px;right: 100px;"></div>
		<div class="pink" style="position: relative;left: 10px;top: 10px;"></div>
		<div class="blue" style="position: absolute;"></div>
		<div class="red"></div>
		<!-- 定位 -->
		<!-- position  四个属性 
		absolute  绝对定位   参照物是第一个非static定位的父组件,如果找不到,参照物就是html/body   不占空间
		relative  相对定位   参照物自身原来的位置  占原来的空间
		fixed  窗口定位    参照物是窗口   不占空间
		static  流布局不定位
		-->
		<!-- 参照物是谁   是否占空间 -->
		<!-- 盒模型   padding  margin  border -->
	</body>
</html>

JS

按钮点击事件:

<button type="button" οnclick="easymethod()">点击</button>:定义了一个按钮,点击时触发名为 easymethod 的JavaScript函数。
JavaScript函数和变量:

function easymethod():定义了一个名为 easymethod 的函数,包含了一些基本的JavaScript操作。
console.log("this is easymethod"):在控制台输出一条消息。
let obj={};:声明了一个空对象 obj。
const username="张三";:定义了一个常量 username,值为 "张三"。
var sex="男";:声明了一个变量 sex,并赋值为 "男"。
obj.name="李四";:给对象 obj 添加了一个名为 name 的属性,并赋值为 "李四"。
obj.study=function(){}:在对象 obj 中定义了一个空的函数 study。
delete obj.sex;:删除了对象 obj 的 sex 属性。
obj=1; 和 obj="ab\"\"c";:将 obj 的值分别赋为整数 1 和字符串 "ab\"\"c"。
console.log(obj);:输出 obj 的当前值。
常量和函数:

const sysName="啊啊啊啊啊啊啊啊啊啊";:定义了一个常量 sysName,值为 "啊啊啊啊啊啊啊啊啊啊"。
var method=function(a,b){...}:定义了一个名为 method 的函数,接受两个参数 a 和 b,并在控制台输出相关信息和函数的参数列表。
数据类型:

console.log(typeof str); 和 console.log(typeof num);:分别输出变量 str 和 num 的类型。
数组操作:

arr=[12,34];:定义了一个数组 arr,包含两个元素 12 和 34。
数组元素的增加、删除、修改等操作,如 unshift()从头部添加、push()从尾部添加、shift()从头部删除、pop()从尾部删除、splice()删除并插入 。
DOM操作:

DOM通常用于访问和操作HTML文档的结构和内容,例如通过JavaScript添加、修改或删除HTML元素。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="easymethod()">点击</button>
		<script>
			// js代码
			function easymethod(){
				// 在浏览器的控制台打印测试数据
				console.log("this is easymethod")
				// 声明对象
				//弱类型语言
				// 局部变量
				let obj={};
				// 常量
				const username="张三";
				
				var sex="男";
				obj.name="李四";
				obj.study=function(){}
				obj["sex"]="男";
				// 删除属性
				delete obj.sex;
				obj=1;
				obj="ab\"\"c";
				console.log(obj);
				method(1,5,9,7,8,6);
			}
			const sysName="啊啊啊啊啊啊啊啊啊啊";
			var method=function(a,b){
				if(a){
					console.log(true);
				}else{
					console.log(false);
				}
				console.log(a+"--------");
				console.log(b+"--------");
				console.log(arguments);
			}
			var str="123";
			console.log(typeof str);//typeof obj 返回obj变量的类型名称
			num=123.4;
			console.log(typeof num);
			// 对数组的处理   5个函数
			arr=[12,34];
			console.log(arr);
			arr[8]=99;
			arr[3]="afafa";
			arr[4]={};
			console.log(arr);
			// 数组添加元素
			// 从头部添加
			arr.unshift("头部");
			console.log(arr);
			// 从尾部添加
			arr.push("尾部");
			console.log(arr);
			// 从头部删除
			arr.shift();
			console.log(arr);
			// 从尾部删除
			arr.pop();
			console.log(arr);
			// 删除并插入
			arr=[1,2,3,4];
			arr.splice(1);//删除下标位置以及其后所有元素
			console.log(arr);
			arr=[1,2,3,4];
			arr.splice(1,1);//删除下标位置删除指定个数
			console.log(arr);
			arr=[1,2,3,4];
			arr.splice(1,1,33,44,55);//删除下标位置删除指定个数,添加元素
			console.log(arr);
			// DOM Document Object Model
			
		</script>
	</body>
</html>

练习(随机数)

JavaScript 功能

a. 按钮点击事件和函数绑定
在JavaScript部分,代码首先获取了页面中的一些重要元素,如生成随机数按钮、输入框、结果显示区域等,并为按钮点击事件绑定了一个函数 method()。这个函数是随机数程序的核心逻辑处理部分。
b. 数组操作和抽奖逻辑
在 method() 函数中,主要进行了以下操作:

初始化:如果输入框中有有效的最大值(即 val 不为空),则初始化生成随机数过程。将所有可能的号码存入数组 arr 中,同时清空已抽取的号码显示区域 exist。

随机生成过程:使用 setInterval 实现一个定时器,每隔一段时间生成一个随机数,并将其显示在页面中,模拟生成随机数过程的数字跳动效果。通过 Math.random() 和 Math.floor() 来生成随机下标,从 arr 数组中取出一个号码。

确定随机数结果:使用 setTimeout 在一定时间后确定最终的随机数结果,将其显示在 result 区域,并将该随机数追加到已生成随机数的显示区域 exist 中。

更新状态和数组操作:一旦抽取完一个数字,从 arr 数组中删除该数字,确保每个数字只能被抽取一次。同时,检查抽取完所有数字后的状态,如恢复输入框的可编辑状态等。

随机数生成逻辑

随机数生成过程的逻辑主要包括以下几个步骤:

获取输入:从输入框中获取用户输入的最大数字范围。

初始化:如果当前不是开始状态(start 状态为 false),则进行初始化。将最大数值范围内的所有数字存入数组 arr,并清空已生成的随机数显示区域 exist。

生成过程:通过定时器实现随机数的生成和显示,模拟生成过程中的动画效果。

结果显示:定时器结束后,确定最终的结果,并将其显示在 result 区域。同时将该数字追加到已生成的显示区域 exist 中,并从数组 arr 中移除该数字,确保每个数字只能被抽取一次。

状态管理:在整个过程中,根据 start 变量的状态控制输入框的可编辑性和按钮的可点击性,防止用户重复点击按钮。

错误处理和状态管理

在生成过程中,代码实现了一些错误处理和状态管理的功能:

输入验证:在用户点击按钮之前,会检查输入框中是否有有效的最大数字范围。如果没有输入或者输入无效(非数字),会弹出警告框提示用户。

状态转换:通过 start 变量控制生成过程的状态。初始状态为 false,当用户点击按钮后变为 true,表示过程已经开始。在生成完成后,会将 start 状态重置为 false,允许用户重新输入最大数字范围并再次开始生成。

定时器控制:使用 setInterval 和 setTimeout 确保过程中的动画效果和最终结果的显示。定时器结束后,会清除定时器,确保页面状态正确更新。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .maxBox {
        padding: 4px 6px;
        font-size: 16px;
        color: #3EAFE0;
    }

    .clickBtn {
        border: 1px solid #3EAFE0;
        background-color: #3EAFE0;
        color: #FFF;
        font-size: 14px;
        padding: 4px 6px;
    }

    .result {
        font-size: 80px;
        color: #3EAFE0;
        font-weight: bold;
        padding: 30px;
    }

    .txt_center {
        text-align: center;
    }

    .exist {
        border: 1px solid #EEE;
        padding: 20px;
        margin: 20px auto;
        width: 600px;
        min-height: 100px;
        text-align: left;
    }

    .exist span {
        display: inline-block;
        padding: 2px 10px;
        margin: 4px;
        border-radius: 3px;
        background-color: #3EAFE0;
        color: #FFFFFF;
    }

    .info {
        border: 1px solid blue;
        color: #000;
        font-weight: 500;
        padding: 20px;
        margin: 20px auto;
        width: 600px;
    }
    </style>
</head>

<body>
    <div class="txt_center">
        <div class="result">
            <span class="" id="result">0</span>
        </div>
        <input class="maxBox" type="text" id="txt" placeholder="请在里面输入号码最大值!">
        <input class="clickBtn" type="button" id="btn" value="抽号">
        <div class="exist">
            <div>已抽取:</div>
            <div id="exist">
            	<span>23</span>
            	<span>65</span>
            	<span>12</span>
            </div>
        </div>
    </div>
    <!--练习说明-->
    <div class="info">
        1、在文本框中输入抽号最大值
        <br/> 2、点击按钮,开始抽号,随机生成1~最大值之间的整数
        <br/> 3、已经抽取的号码存入一个数组
        <br/> 4、为了保证号码的唯一性,每次生成一个号码,跟数组中的已抽取的号码比对
        <br/> 5、如果已存在,重新生成号码
        <br/> 6、如果不存在,放入数组中保存,并显示出来
        <br/> 7、将号码结果放入result中显示出来
        <br/> 8、将已经生成的号码(数组)存入exist中显示出来
        <br/> 9、给抽号按钮添加一个3s倒计时,倒计时结束前不可点击按钮
    </div>
	<script>
		const btn=document.getElementById("btn");
		const txt=document.getElementById("txt");
		const result=document.getElementById("result");
		const exist=document.getElementById("exist");
		const arr=[];
		var start=false;
		btn.onclick=method;
		function method(){
			// 获取输入框中的内容(数字)
			var val=txt.value;
			//如果输入框中没有数据,提示填入数据
			if(!val){
				alert("请输入内容");
			}else{
				//如果有数据
				if(!start){
					//初始化
					//如果不是开始状态,就要初始化并抽号
					//初始化,设置开始
					start=true;
					txt.setAttribute("readonly","readonly");
					//准备数组
					for(let i=1;i<=Number(val);i++){
						arr[i-1]=i;
					}
					console.log(arr);
					//清空抽之前抽取出来的部分
					exist.innerHTML="";
				}
				//如果是启动状态,并且数组中没有可选元素
				//恢复可填入状态
				if(start&&arr.length==0){
					//输入框清空
					txt.value="";
					//输入框删除readonly
					txt.removeAttribute("readonly");
					//状态改为false;
					start=false;
					//结束方法
					return;
				}
				// 数字跳动
				var interval=setInterval(function(){
					let ran=Math.floor(Math.random()*(Number(arr.length)));
					let num=arr[ranIndex];
					result.innerText=num;
				},100)
				setTimeout(function(){
					//清空之前计时显示
					clearInterval(interval);
					如果是开始状态,就开始抽号
					//随机下标
					let ranIndex=Math.floor(Math.random()*(Number(arr.length)));
					//获取下标位置内容
					let num=arr[ranIndex];
					//将内容显示在result中
					result.innerText=num;
					//追加到exist组件中
					exist.innerHTML=exist.innerHTML+"<span>"+num+"</span>"
					//将该位置的元素删除掉
					arr.splice(ranIndex,1);
					//要有一个数组,如果没有数据,提示已经抽完,并且将状态改为false
					},800)
				
			}
		}	
		// setInterval(function(){
		// 	console.log(Math.random())
		// },300);
		// setTimeout(function(){
		// 	console.log(Math.random())
		// },1000)
	</script>
</body>

</html>

标签:定位,arr,console,log,元素,小白,obj,Day12,JAVA
From: https://blog.csdn.net/m0_63367052/article/details/140778434

相关文章

  • Java面试题(容器)
    目录1、Java容器都有哪些?2、 Collection和Collections有什么区别3、List、Set、Map之间的区别是什么?4、 HashMap和Hashtable有什么区别?5、如何决定使用HashMap还是TreeMap?6、 说一下HashMap的实现原理?7、 ArrayList和LinkedList的区别是什么?8、 ......
  • 自学JavaScript(放假在家自学第一天)
    目录 JavaScript介绍分为以下几点1.1JavaScript是什么1.2JavaScript书写位置1.3Javascript注释1.4Javascript结束符1.5Javascript输入输出语法JavaScript(是什么?)是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。2.作用(做什么?)网页特效(监听用户的......
  • java多线程(超详细!)
    Java的多线程是一种允许在一个程序中同时运行多个线程的技术。每个线程是独立的执行路径,可以并发执行,从而提高程序的效率和响应能力。1.线程基础Java中的线程可以通过继承Thread类或实现Runnable接口来创建和管理。1.1继承Thread类classMyThreadextendsThr......
  • java多线程(超详细!)
    Java的多线程是一种允许在一个程序中同时运行多个线程的技术。每个线程是独立的执行路径,可以并发执行,从而提高程序的效率和响应能力。1.线程基础Java中的线程可以通过继承Thread类或实现Runnable接口来创建和管理。1.1继承Thread类classMyThreadextendsThread{......
  • java
    第一章java概念和开发注意事项java特点Java语言是面向对象的(oop)Java语言是健壮的。java的强类型机制、异常处理、垃圾的自动收集等是Java程序健壮性的重要保证Java语言是跨平台性的[即:一个编译好的.class文件可以在多个系统下运行,这种特性称为跨平台]根本原因是JVM是j......
  • 华为OD笔试机试 - 园区参观路径 (Java 2024年C卷D卷真题算法)
    华为OD机试(C卷+D卷)2024真题目录(Java&c++&python)题目描述园区某部门举办了FamilyDay,邀请员工及其家属参加;将公司园区视为一个矩形,起始园区设置在左上角,终点园区设置在右下角;家属参观园区时,只能向右和向下园区前进,求从起始园区到终点园区会有多少条不同的参观路径......
  • Java计算机毕业设计旅游购票系统(开题报告+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着旅游业的蓬勃发展,游客对于旅游体验的需求日益多样化与便捷化。传统的购票方式,如现场排队购票,不仅耗时耗力,还常常因票源紧张而影响游客的行程安排......
  • 华为OD笔试机试真题算法 - 密码解密 (Java 2024年C卷D卷)
    华为OD机试(C卷+D卷)2024真题目录(Java&c++&python)题目描述给定一段“密文”字符串s,其中字符都是经过“密码本”映射的,现需要将“密文”解密并输出。映射的规则(‘a’~‘i’)分别用(‘1’~‘9’)表示;(‘j’~‘z’)分别用(“10*”~“26*”)表示。约束:映射始终唯一。......
  • Java计算机毕业设计旅游网站设计(开题报告+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在全球化与数字化浪潮的推动下,旅游业迎来了前所未有的发展机遇。随着人们生活水平的提高和休闲方式的多样化,旅游需求日益增长,对旅游信息的获取与预订......
  • Java计算机毕业设计酒店客房管理信息系统(开题报告+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着旅游业的蓬勃发展,酒店行业面临着前所未有的挑战与机遇。传统的酒店客房管理方式往往依赖于人工记录与操作,效率低下且易出错,难以满足现代酒店业对......