js基础,点击换图片，带参数

最新推荐文章于 2022-04-18 00:20:15 发布

爱哭的星辰

最新推荐文章于 2022-04-18 00:20:15 发布

阅读量618

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/LALA__ddd/article/details/74931768

本文通过几个具体的案例，深入浅出地介绍了JavaScript中常见的交互功能实现方法，包括更改图片源、弹窗提示、输入对话框及确认对话框等。每个案例都提供了完整的HTML和JS代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击换图片：

js代码：

var x=0;
function text8(){
	
	var c=document.getElementById("img4");
	c.src=(++x%3+1)+".jpg";
}

html代码：

<img src="1.jpg" id="img4" onclick="text8()" style="height:300px;width:300px" title="222"/>

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

js代码：

function text5(){
	var i=document.getElementById("img2");
	i.src="3.jpg";
	alert(i.src);
	alert(i.id);
}

html代码：

<input type="button" value="点我呀！点两下" class="a2" ondblclick="text5()"/>

prompt() 弹出个输入框让你输入东西

js代码：

function text3(){
	prompt("你是猪吗？");
}

html代码：

<input type="button" value="点我呀！" class="a1" onclick="text3()"/>

confirm() 弹出个确认框（确定，取消）

js代码：

function text2(){
	alert(confirm("好几个接口"));
}

HTML代码：

<input type="button" value="点我呀！" class="a1" onclick="text2()"/>

带参数：

js代码：

function text9(y){
	
	alert(y);
}

HTML代码：

<img src="1.jpg" id="img3" onclick="text9(this.src)" style="height:300px;width:300px" title="222"/>

点击字更换图片；

js代码：

function text6(){
	var a=document.getElementById("span1");
	a.innerHTML="<br/><img src='2.jpg'/>";
	alert("hhhh");
}

HTML代码：

<span id="span1" onclick="text6()">哈哈哈</span>