JS练习题

最新推荐文章于 2024-04-28 03:19:28 发布

兮知

最新推荐文章于 2024-04-28 03:19:28 发布

阅读量130

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_44087994/article/details/125820664

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

- - - - 1、方块闪烁
        2、流氓广告
        3、方块上下移动
        4、页面跳转：
        5、数据项添加
        6、鼠标移动图片轮播

1、方块闪烁

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 500px;
				height: 400px;
				background-color: antiquewhite;
				/* 居中设置 */
				margin-left: auto;
				margin-right: auto;
				border: 1px solid black;
			}
			#box1 div{
				width: 100px;
				height: 100px;
				float: left;
			}
			#box2{
				/* width: 200px; */
				height: 30px;
				text-align: center;
				margin-top: 10px;
			}
			#box2 button{
				background-color: bisque;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="box1">			
		</div>
		<div id="box2">
			<button id="bt1" onclick="shan()">添加</button>
			<button id="bt2">闪烁</button>
		</div>
	</body>
	<script>
		box1=document.getElementById('box1')		
		// 随机色
		function randowColor(a){
			r = parseInt(Math.random() * 255)
			g = parseInt(Math.random() * 255)
			b = parseInt(Math.random() * 255)
			return 'rgba(' +r+ ',' + g + ',' + b +',' +a+')' 
		}
		// 添加
		count=0
		function shan(){
			// 创建新的标签对象
			div=document.createElement('div')
			div.style.backgroundColor=randowColor(0.3)
			box1.insertBefore(div,box1.firstElementChild)
			count++
			if(count>20){
				box1.lastElementChild.remove()
				count--
			}
		}
		// 闪烁
		bt2=document.getElementById('bt2')
		bt2.onclick=function(){
			if(this.innerText=='闪烁'){
				this.innerText='暂停'
				t1=setInterval(function(){
					//修改每个小盒子的背景颜色
					smalldiv=box1.children
					for(index=0;index<smalldiv.length;index++){
						smalldiv[index].style.backgroundColor=randowColor(0.4)
					}					
				},500)
			}else{
				this.innerText='闪烁'
				clearInterval(t1)
			}
		}
	</script>
</html>

2、流氓广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				background-color: blue;
				width: 200px;
				height: 200px;
			}
			span{
				color: yellow;
				font-size: 20px;
			}
			button{
				float: right;
				border: 0;
				background-color: gray;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span>此广告</span>
			<button type="button" onclick="move1()" >关闭</button>	
		</div>		
	</body>
	<script type="text/javascript">
		top1=0
		right1=0
		count1=0
		function move1(){
			count1++
			div=document.getElementsByTagName('div')[0]
			if(count1==5){
				div.remove()
			}else{
				width1=parseInt(Math.random()*250)
				height1=parseInt(Math.random()*250)
				div.style.marginLeft=width1+'px'
				div.style.marginTop=height1+'px'
				console.log(div.style.width)
				console.log(div.style.heigth)		
			}			
		}
	</script>
</html>

3、方块上下移动

<!--
前端三大技术：HTML CSS-样式和布局 JS
  -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				/* 这里要开启绝对定位 */
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box1" style="background-color: aqua;width: 100px;height: 100px;position: absolute;top: 10px;"></div>
	</body>
	<script>		
		top1 = 10
		dtop=0
		t1=setInterval(function() {
			// 拿到盒子
			top1 += 10
			div=document.getElementById('box1')
			divTop=parseInt(div.style.top)			
			if (divTop<innerHeight-100) {
				div.style.top = top1 + 'px'
			}
			else{
				clearInterval(t1)
				dtop=divTop
				console.log(dtop)
				t2=setInterval(function(){
					dtop-=10
					div=document.getElementById('box1')
					div.style.top=dtop+'px'
					if(dtop<10){
						clearInterval(t2)
					}
				},100)
			}			
		}, 100)		
	</script>
</html>

4、页面跳转：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span></span>
		<span>秒跳转到百度</span>
	</body>
</html>
<script>
	function test() {
		//操作标签中的内容 
		span = document.querySelector("span");
		time = 1;
		span.innerHTML = time;
		//使用匿名函数
		timer=setInterval(function() {
			time--;
			span.innerHTML = time;
			if (time === 0) {
				//先停止
				clearInterval(timer);
				//跳转页面
				// location.href = "https://www.baidu.com";
				w1=window.open('https://www.baidu.com','_blank')
			}
		}, 1000);
	}
	test();
</script>

5、数据项添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#box1 {
				margin-top: 50px;
				margin-left: 50px;

			}

			#box1 div {
				background-color: rgb(98, 158, 160);
				width: 200px;
				height: 50px;
				margin-top: 2px;
				color: white;
				font-size: 20px;
				/* 垂直居中 */
				line-height: 50px;
			}

			#box1 p {
				width: 180px;
				text-align: center;
				float: left;
			}

			#box2 {
				margin-top: 20px;
				margin-left: 50px;
			}

			#box2>input {
				border: 0;
				border-bottom: 1px solid rgb(169, 169, 169);
				width: 200px;
				height: 50px;
				/* 去掉边框 */
				outline: 0;
				text-align: center;
				font-size: 20px;
				/* 垂直对齐方式 */
				vertical-align: bottom;
			}

			#box2 button {
				width: 55px;
				height: 25px;
				font-size: 10px;
				color: white;
				background-color: rgb(253, 123, 87);
				/* 垂直对齐方式 */
				vertical-align: bottom;

			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div>
				<p>苹果</p>
				<span>x</span>
			</div>
			<div>
				<p>西瓜</p>
				<span>x</span>
			</div>
			<div>
				<p>香蕉</p>
				<span>x</span>
			</div>
			<div>
				<p>葡萄</p>
				<span>x</span>
			</div>

		</div>
		<div id="box2">
			<input type="text" id="input1" value="">
			<button value="确定" id="bt">确定</button>
		</div>

	</body>
	<script type="text/javascript">
		// 拿到输入的值
		input1 = document.getElementById("input1")
		// 点击按钮添加
		bt = document.getElementById('bt')
		bt.onclick = function() {
			// 创建标签对象
			div = document.createElement('div')
			p = document.createElement('p')
			span = document.createElement('span')
			// 设置标签的属性和文本信息
			p.innerText = input1.value
			// 清空输入框的值
			input1.value=''
			span.innerText = 'x'
			div.appendChild(p)
			div.appendChild(span)
			// 新增的水果的颜色是随机色
			// random()  -  产生0~1的随机数
			r = parseInt(Math.random() * 255)
			g = parseInt(Math.random() * 255)
			b = parseInt(Math.random() * 255)
			div.style.backgroundColor = "rgba(" + r + "," + g + "," + b + ",0.3)"
			box1 = document.getElementById('box1')
			box1.insertBefore(div, box1.firstElementChild)
		}
	</script>
</html>

6、鼠标移动图片轮播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<img id="big"  src="img/picture-1.jpg" alt="">
		</div>
		<div>
			<img class="small"  src="./img/thumb-1.jpg" alt="">
			<img class="small"  src="./img/thumb-2.jpg" alt="">
			<img class="small"  src="./img/thumb-3.jpg" alt="">
		</div>
	</body>
	<script type="text/javascript">
		function change_img(){
			// document.getElementById('big').src='img/picture-'+this.i+'.jpg'
			index1=this.src.search('-')
			num=this.src.slice(index1+1,index1+2)
			document.getElementById('big').src='img/picture-'+num+'.jpg'
		}
		small_imgs=document.getElementsByClassName('small')
		for(i=0;i<3;i++){
			small=small_imgs[i]
			small.i=i+1
			small.onmouseover=change_img
		}
	</script>
</html>