文档章节

交互还有事件触发。

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

      浏览器完成页面载入时触发 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
博文 9
码字总数 8417
作品 0
深圳
D3.js的v5版本入门教程(第十一章)——交互式操作

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

qq_34414916 ⋅ 04/23 ⋅ 0

浏览器Document Ready事件捕获策略

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

con ⋅ 2014/05/18 ⋅ 0

手机网页应用的交互设计

谈 HTML5为提高手机网页的体验提供了诸多的可能性,交互效果越来越接近原生App,故而成为Web App,有望将APP功能引向浏览器,让移动平台的竞争由系统平台转向了浏览器之间。 Web App比起原生...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

MVC已死,该是用MOVE的时候了

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

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

Java中解决(extjs或jquery)session过期退出登录问题

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

Junn ⋅ 2013/09/24 ⋅ 0

一起来看 HTML 5.2 中新的原生元素

原文地址:Meet the New Dialog Element 作者:Keith 不到一个月前, 正式成为 的推荐标准(),其中,推出了一个新的原生模态对话框元素 ,乍一看,可能感觉它就是一个新增的元素,然而,作者...

枫上雾棋 ⋅ 01/18 ⋅ 0

移动端touch事件影响click事件的相关解决方法

上周做了一个项目,发现一个DOM元素触发touch事件,竟然还会触发别的元素的click事件。 我先描述一下,当时遇到的问题。项目初始状态是下面这张图: 我给右上方的的搜索按钮,绑定了一个tou...

Daniel_s ⋅ 2016/07/06 ⋅ 0

javascript的事件

javascript的事件 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。而 javaScript 与 HTML 之间的交互是通过事件实现的,可以使用侦听器(或处理程序)来预订事件,以便事件发生时执...

GITTODO ⋅ 2016/03/08 ⋅ 0

Android程序ToDoList增加配置项页面

本文要做的事情就是在前面做的简单的ToDoList程序上增加一个配置项页面(Reference)。这个Reference页面也非常简单: 这个ToDoList现在有两个页面,主页面能填写待办事项,然后manu键弹出可...

王二狗子11 ⋅ 01/07 ⋅ 0

jqPlot图表插件使用说明(三)

简单交互 在之前的学习中,我们已经可以绘制各种类型的图表,也可以给图表添加不同的组件,如标题、图例等等。但这些图表只能用于展示数据,一旦希望对图表有所操作——比如查看数据明细——...

纠结名字 ⋅ 2015/08/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 55分钟前 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部