HTML(Day3)

最新推荐文章于 2024-10-11 16:10:25 发布

何容与

最新推荐文章于 2024-10-11 16:10:25 发布

阅读量202

点赞数 1

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_62499218/article/details/140778397

版权

一、JS

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="easymethod()">点击</button>
		
		<script>
			// JS代码写在body的最后
			function easymethod(){
				// 在浏览器的控制台打印测试数据
				console.log("this is easymethod!");
				// 声明对象
				// 弱类型语言 界限不明显
				// 声明局部变量
				let obj={};
				// 声明常量
				const  username="张三";
				// 声明变量
				var sex="男";
				// 添加属性
				obj.name="李四";
				obj.study=function(){
					
				}
				obj["sex"]="男";
				var proName="sex";
				obj[proName]="女";
				
				// 删除属性
				delete obj.sex;
				obj=1;
				obj="ab\"\"c"
				console.log(obj);
				method(12,23,34,45);
			}
			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";
			// typeof obj，返回这个变量的类型的名称
			console.log(typeof str);
			num =123.88;
			console.log(typeof num);
			
			// 对数组的处理  5个函数
			arr=[12,34];
			arr[8]=99;
			console.log(arr);
			arr[3]="你好";
			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,5,6);
			console.log(arr);
			
			// DOM Document Object Model
		</script>
	</body>
</html>

二、DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">宣行琮</div>
		<button type="button" id="btn">沐安郡王</button>
		
		<script>
			// DOM Document Object Model
			function clickme(){
				console.log("ok");
				let box=document.getElementById("box");
				box.innerHTML="<h1>万事顺意</h1>"
				box.innerText="<h1>万事顺意</h1>"
			}
			// clickme();
			
			// 获取DOM组件对象
			var btn=document.getElementById("btn");
			btn.onclick=clickme;
			document.getElementsByClassName("");//通过class
			document.getElementsByName("");//通过name属性
			document.getElementsByTagName("");//通过标签名
		</script>
	</body>
</html>

三、抽号练习

<!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(var i=1;i<=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()*arr.length);
				let num=arr[ran];
				// 将内容显示在result中
				result.innerText=num;
			},200);
			setTimeout(function() {
					// 清空之前计时显示
					clearInterval(interval);
					// 如果是开始状态，就开始抽号
					// 随机下表 
					let ranIndex=Math.floor(Math.random()*arr.length);
					// console.log(ranIndex);
					// 获取下标位置的内容
					let num=arr[ranIndex];
					// 将内容显示在result中
					result.innerText=num;
					// 追加到exist组件中
					exist.innerHTML=exist.innerHTML+"<span>"+num+"</span>";
					// 将该位置的元素删除掉
					arr.splice(ranIndex,1);
					// 要有一个数组 如果没有数据，提示已经抽完，并且将状态改为false
					console.log(arr);
			}, 300);
			}
		}
		// setInterval(function(){
		// 	console.log(Math.random())
		// },300);
		 // setTimeout(function() { console.log(Math.random())},1000);
	</script>
</body>

</html>