javascript适合新手小白练习的简单小项目

最新推荐文章于 2024-05-09 09:56:51 发布

才不做选择

最新推荐文章于 2024-05-09 09:56:51 发布

阅读量5.4k

点赞数 15

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45120626/article/details/108984210

版权

1.点击按钮隐藏图片，再次点击按钮显示图片，以此循环
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>显示隐藏效果</title>
</head>
<body>
	<button id="btn" onclick="cik()">隐藏图片</button>
	<br />
	<img src="img/compman.gif">
	
	<script type="text/javascript">
		//先获取按钮
		var btn = document.getElementById("btn");
		//再获取图片 是数组
		var img = document.getElementsByTagName("img")[0];
		//点击事件的方法
		function cik(){
			//如果按钮文字等于显示就执行里面的内容，如果不是显示就执行else里面的内容
			if(btn.innerHTML==='隐藏图片'){
				//图片设为不可见
				img.style.display='none';
				//同时按钮文字改为显示
				btn.innerHTML="显示图片";
			}else{
				//另一种情况    图片显示
				img.style.display='block';
				//文字按钮改为隐藏
				btn.innerHTML="隐藏图片";
			}
		}
	</script>
</body>
</html>

2.点击事件（点击一次红色区域出现一个效果，最后一步全部消失）
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>点击事件</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 300px;
			height: 300px;
			background: brown;
			font-size: 50px;
			color: white;
		}
	</style>
</head>
<body>
	<div id="box" onclick="myclick()">
		<p id="p1">请点击</p>
	</div>
	
	<script type="text/javascript">
		var para = document.createElement("p2");
		var text = document.createTextNode("请再次点击");
		para.appendChild(text);
		
		var i =0;
		function myclick(){
			if(i==0){
				var parent = document.getElementById("box");
				parent.appendChild(para);
				i++;
			}else if(i==1){
				document.getElementById("p1").innerHTML="谢谢";
				para.style.display="none";
				i++;
			}else if(i==2){
				document.getElementById("p1").innerHTML="再见";
				i++;
			}else if(i==3){
				document.getElementById("box").style.display="none";
			}
		}
	</script>
</body>
</html>

3.顺时针旋转
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		#box{
			height: 200px;
			width: 200px;
			background:#A52A2A;
			border-radius: 50%;
			font-size: 100px;
			font-family: "微软雅黑";
			text-align: center;
			line-height: 200px;
			color: white;
		}
	</style>
</head>
<body>
	<div id="box">1</div>
	<script type="text/javascript">
		var box = document.getElementById("box");
		var i =0;
		setInterval(function(){
			i++;
			box.style.transform="rotate("+i+"deg)"
		},20);
	</script>
</body>
</html>

才不做选择

关注

15
点赞
踩
95

收藏

觉得还不错? 一键收藏
4
评论
javascript适合新手小白练习的简单小项目

1.点击按钮隐藏图片，再次点击按钮显示图片，以此循环<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /
复制链接

扫一扫