js进行图片切换与成语填空

最新推荐文章于 2025-12-31 16:31:20 发布

原创最新推荐文章于 2025-12-31 16:31:20 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

1.按钮进行图片的切换进行图片的切换

思路使用for循环隐藏上一张图片，显示下一张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style>
        img {
            display: none;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img src="img/image1.jpg"  id="image1">
    <img src="img/image2.jpg"  id="image2">
    <img src="img/image3.jpg"  id="image3">
    <img src="img/image4.jpg"  id="image4">
    <button onclick="qie()">切换</button>

    <script>
        var t = 1;

        function qie() {
            if (t == 4) {
                t = 1;
            } else {
                t++;
            }
            document.getElementById("image" + t).style.display = 'block';
            for (var i = 1; i <= 4; i++) {
                if (i != t) {
                    document.getElementById('image' + i).style.display = 'none';
                }
            }
        }
    </script>
</body>
</html>

实现效果

在其中进行元素内容和元素样式的修改

元素样式：元素对象.style.样式= "样式值"

修改元素内容：元素对象.innerHTML="样式值"

元素对象.value = " 样式值"

2.成语填空对了弹框说正确。错了弹框说遗憾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成语填空</title>
</head>
<body>
    <h1>成语填空</h1>
    <h2>夜不能寐 闻鸡起舞 喜气洋洋 醉生梦死 威风凛凛 余音绕梁 伯牙绝弦 对牛弹琴 龙飞凤舞 五福临门 四大皆空</h2>
    <p id="idiom">夜<input type="text" id="1" maxlength="1" style="width: 15px;">梦多</p>
    <p id="idiom">闻<input type="text" id="2" maxlength="1" style="width: 15px;">起舞</p>
    <p id="idiom">喜气<input type="text" id="3" maxlength="2" style="width: 30px;"> </p>
    <p id="idiom">醉<input type="text" id="4" maxlength="1" style="width: 15px;">梦死</p>
    <p id="idiom">威风<input type="text" id="5" maxlength="2" style="width: 30px;"> </p>
    <p id="idiom">余音绕<input type="text" id="6" maxlength="1" style="width: 15px;"></p>
    <p id="idiom">伯牙绝<input type="text" id="7" maxlength="1" style="width: 15px;"></p>
    <p id="idiom">对<input type="text" id="8" maxlength="1" style="width: 15px;">弹琴</p>
    <p id="idiom"><input type="text" id="9" maxlength="1" style="width: 15px;">飞凤舞</p>
    <p id="idiom"><input type="text" id="10" maxlength="1" style="width: 15px;">福临门</p>
    <p id="idiom"><input type="text" id="11" maxlength="1" style="width: 15px;">大皆空</p>
    
    <button onclick="idiom()">提交答案</button>

    <script>
        function idiom() {
            var a1 = document.getElementById("1").value;
            var a2 = document.getElementById("2").value;
            var a3 = document.getElementById("3").value;
            var a4 = document.getElementById("4").value;
            var a5 = document.getElementById("5").value;
            var a6 = document.getElementById("6").value;
            var a7 = document.getElementById("7").value;
            var a8 = document.getElementById("8").value;
            var a9 = document.getElementById("9").value;
            var a10 = document.getElementById("10").value;
            var a11 = document.getElementById("11").value;
            if (a1 == "长" && a2 =="鸡"&& a3 =="洋洋"&& a4 =="生"&& a5 =="凛凛"&& a6 =="梁"&& a7 =="弦"&& a8 =="牛"&& a9 =="龙"&& a10 =="五"&& a11 =="四") {
                alert("回答正确！");
            } else {
                alert("遗憾，回答错误！");
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>6.4作业</title>
		<link rel="shortcut icon" href="#" />

	</head>

	<body>
		<style>
			input {
				color: red;
			}
		</style>
		<p>成语填空 对了弹框说正确。错了弹框说遗憾</p>

		<input type="button" class="id"  id="1" value="车" onclick="idiom1()" />
		<input type="button" class="id"  id="2" value="水" onclick="idiom2()" />
		<input type="button" class="id"  id="3" value="马" onclick="idiom3()" />
		<input type="button" class="id"  id="4" value="龙" onclick="idiom4()" />
		<input type="button" class="id"  id="5" value="神" onclick="idiom5()" />
		<input type="button" class="id"  id="6" value="经" onclick="idiom6()" />
		<input type="button" class="id"  id="7" value="兮" onclick="idiom7()" />
		<input type="button" class="id"  id="8" value="兮" onclick="idiom8()" />
		<p></p>
		<button onclick="ok()">确定</button>

	</body>
	
	<script>
		function idiom1() {
			var a = document.getElementById("1");
			a.style.color = "green";
			a.value = "车."
		}
		function idiom2() {
			var b = document.getElementById("2");
			b.style.color = "green";
			b.value = "水."
		}

		function idiom3() {
			var c = document.getElementById("3");
			c.style.color = "green";
			c.value = "马."
		}

		function idiom4() {
			var d = document.getElementById("4");
			d.style.color = "green";
			d.value = "龙."
		}

		function idiom5() {
			var e = document.getElementById("5");
			e.style.color = "green";
			e.value = "神."
		}

		function idiom6() {
			var f = document.getElementById("6");
			f.style.color = "green";
			f.value = "经."
		}

		function idiom7() {
			var g = document.getElementById("7");
			g.style.color = "green";
			g.value = "兮."
		}

		function idiom8() {
			var h = document.getElementById("8");
			h.style.color = "green";
			h.value = "兮."
		}
		function ok(){

			var a = document.getElementById("1").value;
			var b = document.getElementById("2").value;
			var c = document.getElementById("3").value;
			var d = document.getElementById("4").value;
			var e = document.getElementById("5").value;
			var f = document.getElementById("6").value;
			var g = document.getElementById("7").value;
			var h = document.getElementById("8").value;
			if (a+b+c+d=="车.水.马.龙." || e+f+g+h=="神.经.兮.兮.") {
				alert("回答正确！");
			} else {
				alert("回答错误！");
			}
		}
	</script>
</html>