devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JAVA小白学习日记Day12

作者：寸_铁 | 2024-07-31 05:59:56

赞

踩

JAVA小白学习日记Day12

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（边框）等属性，这些属性可以影响元素的尺寸和位置。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<style>
  7. 			div{
  8. 				height: 100px;
  9. 				width: 100px;
  10. 				
  11. 			}
  12. 			.red{
  13. 				background-color: red;
  14. 			}
  15. 			.blue{
  16. 				background-color: #03A9F4;
  17. 			}
  18. 			.green{
  19. 				background-color: seagreen;
  20. 			}
  21. 			.pink{
  22. 				background-color: pink;
  23. 			}
  24. 		</style>
  25. 	</head>
  26. 	<body>
  27. 		<div class="red"></div>
  28. 		<div class="green" style="position: fixed;bottom: 0px;right: 100px;"></div>
  29. 		<div class="pink" style="position: relative;left: 10px;top: 10px;"></div>
  30. 		<div class="blue" style="position: absolute;"></div>
  31. 		<div class="red"></div>
  32. 		<!-- 定位 -->
  33. 		<!-- position  四个属性 
  34. 		absolute  绝对定位   参照物是第一个非static定位的父组件，如果找不到，参照物就是html/body   不占空间
  35. 		relative  相对定位   参照物自身原来的位置  占原来的空间
  36. 		fixed  窗口定位    参照物是窗口   不占空间
  37. 		static  流布局不定位
  38. 		-->
  39. 		<!-- 参照物是谁   是否占空间 -->
  40. 		<!-- 盒模型   padding  margin  border -->
  41. 	</body>
  42. </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元素。

 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<button type="button" onclick="easymethod()">点击</button>
  9. 		<script>
  10. 			// js代码
  11. 			function easymethod(){
  12. 				// 在浏览器的控制台打印测试数据
  13. 				console.log("this is easymethod")
  14. 				// 声明对象
  15. 				//弱类型语言
  16. 				// 局部变量
  17. 				let obj={};
  18. 				// 常量
  19. 				const username="张三";
  20. 				
  21. 				var sex="男";
  22. 				obj.name="李四";
  23. 				obj.study=function(){}
  24. 				obj["sex"]="男";
  25. 				// 删除属性
  26. 				delete obj.sex;
  27. 				obj=1;
  28. 				obj="ab\"\"c";
  29. 				console.log(obj);
  30. 				method(1,5,9,7,8,6);
  31. 			}
  32. 			const sysName="啊啊啊啊啊啊啊啊啊啊";
  33. 			var method=function(a,b){
  34. 				if(a){
  35. 					console.log(true);
  36. 				}else{
  37. 					console.log(false);
  38. 				}
  39. 				console.log(a+"--------");
  40. 				console.log(b+"--------");
  41. 				console.log(arguments);
  42. 			}
  43. 			var str="123";
  44. 			console.log(typeof str);//typeof obj 返回obj变量的类型名称
  45. 			num=123.4;
  46. 			console.log(typeof num);
  47. 			// 对数组的处理   5个函数
  48. 			arr=[12,34];
  49. 			console.log(arr);
  50. 			arr[8]=99;
  51. 			arr[3]="afafa";
  52. 			arr[4]={};
  53. 			console.log(arr);
  54. 			// 数组添加元素
  55. 			// 从头部添加
  56. 			arr.unshift("头部");
  57. 			console.log(arr);
  58. 			// 从尾部添加
  59. 			arr.push("尾部");
  60. 			console.log(arr);
  61. 			// 从头部删除
  62. 			arr.shift();
  63. 			console.log(arr);
  64. 			// 从尾部删除
  65. 			arr.pop();
  66. 			console.log(arr);
  67. 			// 删除并插入
  68. 			arr=[1,2,3,4];
  69. 			arr.splice(1);//删除下标位置以及其后所有元素
  70. 			console.log(arr);
  71. 			arr=[1,2,3,4];
  72. 			arr.splice(1,1);//删除下标位置删除指定个数
  73. 			console.log(arr);
  74. 			arr=[1,2,3,4];
  75. 			arr.splice(1,1,33,44,55);//删除下标位置删除指定个数，添加元素
  76. 			console.log(arr);
  77. 			// DOM Document Object Model
  78. 			
  79. 		</script>
  80. 	</body>
  81. </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 确保过程中的动画效果和最终结果的显示。定时器结束后，会清除定时器，确保页面状态正确更新。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style type="text/css">
  8.     .maxBox {
  9.         padding: 4px 6px;
  10.         font-size: 16px;
  11.         color: #3EAFE0;
  12.     }
  13.  
  14.     .clickBtn {
  15.         border: 1px solid #3EAFE0;
  16.         background-color: #3EAFE0;
  17.         color: #FFF;
  18.         font-size: 14px;
  19.         padding: 4px 6px;
  20.     }
  21.  
  22.     .result {
  23.         font-size: 80px;
  24.         color: #3EAFE0;
  25.         font-weight: bold;
  26.         padding: 30px;
  27.     }
  28.  
  29.     .txt_center {
  30.         text-align: center;
  31.     }
  32.  
  33.     .exist {
  34.         border: 1px solid #EEE;
  35.         padding: 20px;
  36.         margin: 20px auto;
  37.         width: 600px;
  38.         min-height: 100px;
  39.         text-align: left;
  40.     }
  41.  
  42.     .exist span {
  43.         display: inline-block;
  44.         padding: 2px 10px;
  45.         margin: 4px;
  46.         border-radius: 3px;
  47.         background-color: #3EAFE0;
  48.         color: #FFFFFF;
  49.     }
  50.  
  51.     .info {
  52.         border: 1px solid blue;
  53.         color: #000;
  54.         font-weight: 500;
  55.         padding: 20px;
  56.         margin: 20px auto;
  57.         width: 600px;
  58.     }
  59.     </style>
  60. </head>
  61.  
  62. <body>
  63.     <div class="txt_center">
  64.         <div class="result">
  65.             <span class="" id="result">0</span>
  66.         </div>
  67.         <input class="maxBox" type="text" id="txt" placeholder="请在里面输入号码最大值！">
  68.         <input class="clickBtn" type="button" id="btn" value="抽号">
  69.         <div class="exist">
  70.             <div>已抽取：</div>
  71.             <div id="exist">
  72.             	<span>23</span>
  73.             	<span>65</span>
  74.             	<span>12</span>
  75.             </div>
  76.         </div>
  77.     </div>
  78.     <!--练习说明-->
  79.     <div class="info">
  80.         1、在文本框中输入抽号最大值
  81.         <br/> 2、点击按钮，开始抽号，随机生成1~最大值之间的整数
  82.         <br/> 3、已经抽取的号码存入一个数组
  83.         <br/> 4、为了保证号码的唯一性，每次生成一个号码，跟数组中的已抽取的号码比对
  84.         <br/> 5、如果已存在，重新生成号码
  85.         <br/> 6、如果不存在，放入数组中保存，并显示出来
  86.         <br/> 7、将号码结果放入result中显示出来
  87.         <br/> 8、将已经生成的号码（数组）存入exist中显示出来
  88.         <br/> 9、给抽号按钮添加一个3s倒计时，倒计时结束前不可点击按钮
  89.     </div>
  90. 	<script>
  91. 		const btn=document.getElementById("btn");
  92. 		const txt=document.getElementById("txt");
  93. 		const result=document.getElementById("result");
  94. 		const exist=document.getElementById("exist");
  95. 		const arr=[];
  96. 		var start=false;
  97. 		btn.onclick=method;
  98. 		function method(){
  99. 			// 获取输入框中的内容(数字)
  100. 			var val=txt.value;
  101. 			//如果输入框中没有数据，提示填入数据
  102. 			if(!val){
  103. 				alert("请输入内容");
  104. 			}else{
  105. 				//如果有数据
  106. 				if(!start){
  107. 					//初始化
  108. 					//如果不是开始状态，就要初始化并抽号
  109. 					//初始化，设置开始
  110. 					start=true;
  111. 					txt.setAttribute("readonly","readonly");
  112. 					//准备数组
  113. 					for(let i=1;i<=Number(val);i++){
  114. 						arr[i-1]=i;
  115. 					}
  116. 					console.log(arr);
  117. 					//清空抽之前抽取出来的部分
  118. 					exist.innerHTML="";
  119. 				}
  120. 				//如果是启动状态，并且数组中没有可选元素
  121. 				//恢复可填入状态
  122. 				if(start&&arr.length==0){
  123. 					//输入框清空
  124. 					txt.value="";
  125. 					//输入框删除readonly
  126. 					txt.removeAttribute("readonly");
  127. 					//状态改为false;
  128. 					start=false;
  129. 					//结束方法
  130. 					return;
  131. 				}
  132. 				// 数字跳动
  133. 				var interval=setInterval(function(){
  134. 					let ran=Math.floor(Math.random()*(Number(arr.length)));
  135. 					let num=arr[ranIndex];
  136. 					result.innerText=num;
  137. 				},100)
  138. 				setTimeout(function(){
  139. 					//清空之前计时显示
  140. 					clearInterval(interval);
  141. 					如果是开始状态，就开始抽号
  142. 					//随机下标
  143. 					let ranIndex=Math.floor(Math.random()*(Number(arr.length)));
  144. 					//获取下标位置内容
  145. 					let num=arr[ranIndex];
  146. 					//将内容显示在result中
  147. 					result.innerText=num;
  148. 					//追加到exist组件中
  149. 					exist.innerHTML=exist.innerHTML+"<span>"+num+"</span>"
  150. 					//将该位置的元素删除掉
  151. 					arr.splice(ranIndex,1);
  152. 					//要有一个数组，如果没有数据，提示已经抽完，并且将状态改为false
  153. 					},800)
  154. 				
  155. 			}
  156. 		}	
  157. 		// setInterval(function(){
  158. 		// 	console.log(Math.random())
  159. 		// },300);
  160. 		// setTimeout(function(){
  161. 		// 	console.log(Math.random())
  162. 		// },1000)
  163. 	</script>
  164. </body>
  165.  
  166. </html>
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号