文档章节

交互还有事件触发。

蒙懵懵
 蒙懵懵
发布于 2015/12/04 13:50
字数 196
阅读 61
收藏 1

      浏览器完成页面载入时触发 onload事件,调用javascript的内置函数alert(),给用户呈现alert框的信息,然后用户在图片上点击鼠标,触发onclick事件,这个事件应有一段JS代码响应它。这段响应代码用一个命名为touchRock的自定义函数,当用户输入文本后,弹出alert框显示欢迎信息框,同时把rock.png改成rock_happy.png


rock.png

rock_happy.png


<html>
<head>
<title> irock- the virtual oet rock</title>
<style>
div.rock {margin-top:200px; text-align:center;}
#rockImg{cursor:pointer;}
</style>
<script type="text/javascript">
	function touchRock(){
		var userName=prompt("what is your name?", "Enter your name here.");
		if(userName){
			alert("It is good to meet you,"+userName+".");
			document.getElementById("rockImg").src="rock_happy.png";
		}
	}
</script>
</head>
<body onload="alert('hello, i am your pet rock.');">
	<div class="rock">
		<img id="rockImg" src="rock.png" alt="irock" onclick="touchRock()">
	</div>
</body>
</html>


© 著作权归作者所有

共有 人打赏支持
蒙懵懵
粉丝 4
博文 14
码字总数 8417
作品 0
深圳
私信 提问
D3.js的v5版本入门教程(第十一章)——交互式操作

D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标...

qq_34414916
04/23
0
0
canvas 动画库 CreateJs 之 EaselJS(下篇)

本文来自网易云社区 作者:田亚楠 继承 对应原文:Inheritance 我们可以继承已有的「显示对象」,创建新的自定义类。实现方法有很多种,下面介绍其中之一。 举例:实现一个继承于 Container ...

网易云
09/28
0
0
浏览器Document Ready事件捕获策略

Document Ready event的触发点是在是页面的DOM结构加载完毕之后,页面显示之前,与window对象的onload事件不同,document ready事件不需要等待其他外部资源加载完毕。因此多数Javascript框架...

con
2014/05/18
0
0
Java中解决(extjs或jquery)session过期退出登录问题

解决两种情况下的用户访问超时: a)普通http请求的session超时; b)异步http请求的session超时,如果使用extjs后大部分的界面刷新都是异步的ajax请求。 不管是那种类型的http请求总是可以由...

Junn
2013/09/24
0
0
MVC已死,该是用MOVE的时候了

//可以略过部分文章原文来自Conrad Irwin的“MVC is dead, it's time to MOVE on.”。可能存在不准确翻译,推荐阅读“MVC模式已死?何不试试MOVE”。这个学期刚学了软件体系结构,刚刚考完试...

技术小牛人
2017/11/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《Maven官方文档》-Maven依赖机制简介

《Maven官方文档》-Maven依赖机制简介 原文地址 译者:Tyrian 依赖机制是Maven最为用户熟知的特性之一,同时也是Maven所擅长的领域之一。单个项目的依赖管理并不难, 但是当你面对包含数百个...

tantexian
15分钟前
1
0
基于 Docker 快速部署多需求 Spark 自动化测试环境

引言 在进行数据分析时,Spark 越来越广泛的被使用。在测试需求越来越多、测试用例数量越来越大的情况下,能够根据需求快速自动化部署 Spark 环境、快速完成所有测试越来越重要。 本文基于 ...

呐呐丶嘿
32分钟前
2
0
支付宝APP支付之查看支付宝商户ID

1、登录支付宝蚂蚁金服开放平台 2、查看账号详情,选择合作伙伴管理,账户管理,查看角色身份,此处的PID就是商户ID 3、点击秘钥管理,可查看绑定的相关应用及其APPID等信息

Code辉
35分钟前
2
0
崛起于Springboot2.X之通讯WebSocket(40)

技术简介:Springboot2.0.3+freemaker+websocket 1、添加pom依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-bo......

木九天
44分钟前
1
0
Java常用四大线程池用法以及ThreadPoolExecutor详解

为什么用线程池? 1.创建/销毁线程伴随着系统开销,过于频繁的创建/销毁线程,会很大程度上影响处-理效率 2.线程并发数量过多,抢占系统资源从而导致阻塞 3.对线程进行一些简单的管理 在Java中...

孟飞阳
46分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部