JS页面交互实例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39318518/article/details/74938604

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'js.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


</head>

<body>
<script type="text/javascript">
document.write("开始");
function dian(){
var n=8;
while(n>0){
document.write("开始<br>");
n--;
}
}
function myalert(){
alert("提示框");
}
function Myprompt(){
prompt("请输入密码","12345");
}
function Myconfirm(){
alert(confirm("是否删除？"));
}
function mydouble(){
alert("双击事件");
}
//通过id找到对应标签，并进行操作
function dedao() {
var zhi=document.getElementById("huoqu");
alert(zhi.type);
alert(zhi.id);
alert(zhi.value);
alert(zhi.style);
document.getElementById("huoqu").value();
}
function imageOnclick(){
var dnf=document.getElementById("dnf");

if(dnf.src=("image/1499488740.jpg"))
dnf.src=("image/1499480434.jpg");

alert(dnf.name);
if(dnf.src=("image/1499480434.jpg"))
dnf.src=("image/1499488740.jpg");
}
function imageOnclick2(){
var img=document.getElementById("img");

if(img.src.match("image/1499480434.jpg")){
img.src="image/1499488740.jpg";
}else{
img.src="image/1499480434.jpg";
}
}
//this
function imageOnclick3(img2){

if(img2.src.match("image/1499480434.jpg")){
img2.src="image/1499488740.jpg";
}else{
img2.src="image/1499480434.jpg";
}
}
//this.src
function imageOnclick4(f){

if(f.match("image/1499480434.jpg")){
f="image/1499488740.jpg";
}else{
f="image/1499480434.jpg";
}
}
function This(tish){
alert(tish);
}

</script>
This is my JSP page. <br>
<input type="button" value="点我啊!!!()单击事件" οnclick="dian()" style="width:80px;height:60px" />
<br><br>
<input type="button" value="双击事件" οndblclick="mydouble()" style="width:80px"/>

<input type="button" value="提醒框" οnclick="myalert()" style="width:80px"/>

<input type="button" value="询问框" οnclick="Myprompt()" style="width:80px"/>

<input type="button" value="确认框" οnclick="Myconfirm()" style="width:80px"/>

<input type="button" value="弹出提示框" style="width:80px" οnclick="dedao()"/>
<input id="huoqu" type="text" value="通过id获取相应值" " style="width:200px"/>
<br>
<img id="dnf" src="image/1499488740.jpg" name="光头广场" width="20%" οnclick="imageOnclick()" ></img>

<img src="image/1499480434.jpg" width="20%" id="img" name="时间" οnclick="imageOnclick2()" ></img>

<img src="image/1499488740.jpg" width="20%" id="img2" name="时间" οnclick="imageOnclick3(this)" ></img>