• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例4-12 <output>元素的使用

实例4-12 <output>元素的使用

1.功能描述

在新建的表单中,创建两个输入文本框,用于输入两个数字;另外,新建一个<output>元素,用于显示两个输入文本框中数字相乘后的结果。当改变两个输入框中任意一个数值时,<output>元素显示的计算结果也将自动进行变化。

2.实现代码

在DreamweaverCS5中新建一个HTML页面4-l2.litml,加入代码如代码清单4-12所示。

代码清单4-12<output>元素的使用

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>output元素的使用</title>
	<linkhref="Css/css4.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<form id="frmTmp">
	  <fieldset>
	  <legend>请输入两个数字:</legend>
	  <input id="txtNum一1" type="text" class="inputtxt"/>X
	   <input id="txtNum—2" type="text" class="inputtxt"/>=
	   <outputon FormInput="value=txtNum_1.value*txtNum_2.value">
	   </output>
	 </fieldset>
	</form>
	</body>
	</html>

3.页面效果

该页面在Chrome10浏览器中执行的页面效果如图4-12所示。

图4-12 <output>元素在Chrome10浏览器中使用时的页面效果

4.源码分析

由于将<output>元素的内容通过“onFormlnput”事件绑定了两个输入文本框,因此,当输入框中的值发生变化时,<output>元素的内容根据绑定的规则迅速响应,从而实现了一种联动的效果,详细规则如代码中加粗部分所示。

在代码清单4-12中,<output>元素的“value”值为“txtNum_1.value*txtNum_2.value”,表示将显示的内容绑定为两个输入文本框值的相乘,类似于this.innerHTML的表示方法;也可以通过编写JavaScript自定义函数,与“onFormlnput”事件绑定来实现。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101