javascript基础-常见控件事件处理

（1）鼠标事件-onmouseover、onmouseout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
   function overDemo(h){
	   if(h=="h1"){
		   var d1=document.getElementById("h1");
		   if(d1.style.display=="none"){
			   d1.style.display="block";
			   }
	   }else if(h=="h2"){
		   var d2=document.getElementById("h2");
		   if(d2.style.display=="none"){
			   d2.style.display="block";
			   }
		   }else if(h=="h3"){
			    var d3=document.getElementById("h3");
		        if(d3.style.display=="none"){
			      d3.style.display="block";
			    }
			   }else if(h=="h4"){
				   var d4=document.getElementById("h4");
		           if(d4.style.display=="none"){
			          d4.style.display="block";
			        }
				   }else{
					    var d5=document.getElementById("h5");
		                if(d5.style.display=="none"){
			               d5.style.display="block";
			            }
					   }
	   }
   function outDemo(h){
	  if(h=="h1"){
		   var d1=document.getElementById("h1");
		   if(d1.style.display=="block"){
				d1.style.display="none";
			   }
	  }else if(h=="h2"){
		   var d2=document.getElementById("h2");
		   if(d2.style.display=="block"){
			   d2.style.display="none";
			   }
		   }else if(h=="h3"){
			    var d3=document.getElementById("h3");
		        if(d3.style.display=="block"){
			      d3.style.display="none";
			    }
			   }else if(h=="h4"){
				   var d4=document.getElementById("h4");
		           if(d4.style.display=="block"){
			          d4.style.display="none";
			        }
				   }else{
					    var d5=document.getElementById("h5");
		                if(d5.style.display=="block"){
			               d5.style.display="none";
			            }
					   }
	   }
</script>
</head>

<body>
<div style="position:absolute;top:40px;left:30px;width:450px;height:40px;background-color:#9FF">
<table style="width:100%;height:100%;border:solid 1px;role="all";bordercolor="#FF0000">
    <tr>
    <td width="100" align="center" onmouseout="outDemo(‘h1‘)" onmouseover="overDemo(‘h1‘)">首页</td>
    <td width="100" align="center" onmouseout="outDemo(‘h2‘)" onmouseover="overDemo(‘h2‘)">最新商品</td>
    <td width="100" align="center" onmouseout="outDemo(‘h3‘)" onmouseover="overDemo(‘h3‘)">打折商品</td>
    <td width="100" align="center" onmouseout="outDemo(‘h4‘)" onmouseover="overDemo(‘h4‘)">网上订单</td>
    <td width="100" align="center" onmouseout="outDemo(‘h5‘)" onmouseover="overDemo(‘h5‘)">联系我们</td>
	</tr>
	</table>
</div>
<div style="position:absolute;top:80px;left:30px;width:90px;height:200px;background-color:#CCC;display:none;"id="h1">
	<table style="width:100%;height:100%">
    <tr>
      <td>adwhd</td>
    </tr>
    <tr>
      <td>ahhdws</td>
    </tr>
    <tr>
      <td>hhjdk</td>
    </tr>
	</table>
</div>
<div style="position:absolute;top:80px;left:120px;width:90px;height:200px;background-color:#CCC;display:none;"id="h2">
	<table style="width:100%;height:100%">
    <tr>
      <td>123456</td>
    </tr>
    <tr>
      <td>789456</td>
    </tr>
    <tr>
      <td>321465</td>
    </tr>
	</table>
</div>
<div style="position:absolute;top:80px;left:210px;width:90px;height:200px;background-color:#CCC;display:none;"id="h3">
	<table style="width:100%;height:100%">
    <tr>
      <td>@##$%$%</td>
    </tr>
    <tr>
      <td>)(*&^%$#$#</td>
    </tr>
    <tr>
      <td>?{}++_)%</td>
    </tr>
	</table>
</div>
<div style="position:absolute;top:80px;left:300px;width:90px;height:200px;background-color:#CCC;display:none;"id="h4">
	<table style="width:100%;height:100%">
    <tr>
      <td>AHDWEF</td>
    </tr>
    <tr>
      <td>FHDJJK</td>
    </tr>
    <tr>
      <td>JKLLSD</td>
    </tr>
	</table>
</div>
<div style="position:absolute;top:80px;left:390px;width:90px;height:200px;background-color:#CCC;display:none;"id="h5">
	<table style="width:100%;height:100%">
    <tr>
      <td>+-*/</td>
    </tr>
    <tr>
      <td>-+/*</td>
    </tr>
    <tr>
      <td>++--*/</td>
    </tr>
	</table>
</div>
</body>
</html>

(2)文本框获得焦点、失去焦点事件-onfocus、onblur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
   function change(obj){
		   obj.value="";
	   }
   function unchange(obj){
	   if(obj.value.length==0){
		   obj.style.color="red";
		   obj.value="师姐你好";
		   }else{
			    obj.style.color="black";
			   }
	   }
	   
</script>
</head>

<body>
<input type="text" value="helloworld" id="t1" onfocus="change(this)"/><br/><br/>
<input type="text" value="师姐你好" id="t2" name="bun" onblur="unchange(this)" onfocus="change(this)"/>
</body>
</html>

(3)单选框-radio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
  function Demo(s){
	  var text=document.getElementById("txt");
	  if(s==1){
		  text.value="男";
	  }else if(s==2){
		  text.value="女";
		  }
  } 
</script>
</head>

<body>
<input type="radio" name="s" value="1"id="r1" onclick="Demo(this.value)"/>男
<input type="radio" name="s" value="2"id="r2" onclick="Demo(this.value)"/>女
<input type="text" name="性别" value="" id="txt" />
</body>
</html>

(4)计算圆的周长和面积-onclick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
    function calc(){
		 var r=document.getElementById("r");
		 var c=document.getElementById("c");
		 var s=document.getElementById("s");
		 r.value=parseInt(r.value);
		 c.value=parseInt(2*3.14*r.value);
		 s.value=parseInt(3.14*r.value*r.value);
		}
</script>
</head>

<body>
<center>
<p>计算圆的周长和面积</p>
半径：<input type="text" name="半径"  value="" id="r"/><br/>
周长：<input type="text" name="周长" readonly="readonly" value="" id="c"/><br/>
面积：<input type="text" name="面积" readonly="readonly" value="" id="s"/><br/>
<input type="button" name="result" value="计算" id="result" onclick="calc()"/>
</center>
</body>
</html>

(5)计算总成绩与平均成绩-parseInt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
   function calc(obj){
	   var ch=document.getElementById("ch").value;
	   var ma=document.getElementById("ma").value;
	   var en=document.getElementById("en").value;
	   var chinese=parseInt(ch);
	   var math=parseInt(ma);
	   var english=parseInt(en);
	   var sum=chinese+english+math;
	   var avg=(sum)/3;
	   if(obj.value=="总成绩"){
	       document.getElementById("sum").value=sum;
	   }else if(obj.value=="平均成绩"){
		   document.getElementById("avg").value=avg;
		   }
	   }
</script>
</head>

<body>
<center>
<table bgcolor="#00CCFF" align="center" width="200px" top="20px" border="FF0000">
<tr>
<td width="100%">科目</td>
<td>成绩</td>
</tr>
<tr>
<td width="100%">语文</td>
<td>
<input type="text" name="chinese"id="ch"/>
</td>
</tr>
<tr>
<td width="100%">数学</td>
<td>
<input type="text" name="math"id="ma"/>
</td>
</tr>
<tr>
<td width="100%">英语</td>
<td>
<input type="text" name="english" id="en"/>
</td>
</tr>
<tr>
<td width="100%">
<input type="button" value="总成绩" onclick="calc(this)"
</td>
<td>
<input type="text" name="sum" id="sum"/>
</td>
</tr>
<tr>
<td width="100%">
<input type="button" value="平均成绩" onclick="calc(this)"
</td>
<td>
<input type="text" name="avg" id="avg"/>
</td>
</tr>
</table>
</center>
</body>
</html>

(6)建议购物车-parseInt、parseFloat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
  function sum(){
	  var num=parseInt(document.getElementById("num").value);
	  var price=parseInt(document.getElementById("price").value);
	  var trans=parseFloat(document.getElementById("trans").value);
	  var sum=num*price+trans*num;
	  document.getElementById("num").value=num;
	  document.getElementById("price").value=price;
	  document.getElementById("trans").value=trans;
	  document.getElementById("summary").value=sum;
	  }
</script>
</head>

<body>
<center>
<table position="absolute" align="center" bgcolor="#FF9999" width="556" top="40px" solid="1px" border="#FF0000" >
<tr>
<td colspan="5">简易购物车</td></tr>
<tr>
<td width="128">商品名称</td>
<td width="95">数量（件）</td>
<td width="99">单价（美元）</td>
<td width="98">运费（美元）</td>
<td width="114">
<input type="button" value="合计" onclick="sum()"/>
</td>
</tr>
<tr>
<td width="128">跑跑道具</td>
<td width="95">
<input type="text" width="80" id="num"/>
</td>
<td width="99">
<input type="text" width="80"id="price"/>
</td>
<td width="98">
<input type="text" width="80" id="trans"/>
</td>
<td width="114">
<input type="text" width="80"  readonly="readonly" id="summary"/>
</td>
</tr>
</table>
</center>
</body>
</html>

(7)计算闰年-onclick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
  function calc(){
	  var year=parseInt(document.getElementById("year").value);
	  if(year%4==0||year%100==0&&year%4==0){
		  document.getElementById("tex").value=year+"是闰年"
		  }else{
		        document.getElementById("tex").value=year+"不是闰年"
			  }
	  }
	  
</script>
</head>

<body>
请输入需要判断闰年的年份：<br/>
<input type="text" name="year" id="year"/>
<input type="button" value="计算" id="btn" onclick="calc()"/> 
<input type="text" id="tex"/>
</body>
</html>

(8)

时间： 2024-11-02 17:38:41

javascript基础-常见控件事件处理的相关文章

UI基础----常见控件的使用之TextView

TextView TextView是最简单的一个控件,主要用于在界面上显示一段文本信息. TextView的一些属性: gravity:指定文字的对齐方式,可选值有top.bottom.left.right.center等,可以用|来同时指定多个值 textSize:指定文字大小(设置的单位是sp) textColor:指定文字颜色 drawable:加图片,有drawableBottom.drawableLeft等 padding:离开周围多少dp,有paddingLeft等举个例子: <c

常见控件测试点

系统的功能都是由各种控件组成的,整理了一份常见控件的测试点,分享给大家. 1. 文本框是否是必填项是为空时提交,给出提示输入空格时提交,给出提示否为空时提交,可提交成功不为空时提交,提交后内容与输入的一致,存储到数据库中正确是否支持TAB键在文本框中输入回车键,是否会自动提交若有默认的提示文本,查看文本,文本正确,应为灰色若有唯一属性,需要测试新增/编辑时输入重复的值是否有提示输入的文本首.尾.中间含空格时的情况输入高危词,违禁词,敏感词,是否屏蔽输入超过允许边界个数

【ALearning】第三章 Android基本常见控件

本章主要介绍基本的平常较多使用的控件,包括TextView.EditView.ImageView.Button等.本章将介绍相关控件基本属性的使用,为以后章节的进阶学习提供基础.案例中引用的LinearLayout布局,可先不必深究,后续章节将会详细介绍. TextView TextView控件的基本属性,android:layout_width 布局宽度android:layout_height 布局高度.这两个属性参数是必须的. TextView 中android:layout_width与

常见控件的总结

一.计步器和计数器 - (void)creatStepper{ //步进器 .计数器 //事件驱动型 UIStepper *stepper = [[UIStepper alloc] initWithFrame:CGRectMake(100, 100, 100, 50)]; //设置默认色调 //stepper.tintColor = [UIColor redColor]; //设置最小值默认是0 stepper.minimumValue = 0; //设置最大值默认是100 stepper

Javascript 操作select控件

转:Javascript 操作select控件大全(新增.修改.删除.选中.清空.判断存在等)Posted on 2007-08-08 14:56 礼拜一阅读(5) 评论(0) 编辑收藏 1判断select选项中是否存在Value="paraValue"的Item 2向select选项中加入一个Item 3从select选项中删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为&q

C#基础视频教程3.2 常见控件类型和使用方法

这一部分我们介绍如何使用第三方的控件,我们前面一节介绍了使用微软提供的官方控件,比较中规中矩,而且也不用担心稳定性.但是很多时候我们还是会希望用第三方的控件让自己的软件更美观,更独特. 就单纯的按钮,文本框这种东西,我个人比较推荐使用CSkin的控件,注意用法,只要把DLL放到程序的Debug目录中,然后直接按住拖放到工具箱即可(可以看到很多Skin开头的控件名称) ? 来测试用一下,搜索text,可以发现除了传统的TextBox,还有SkinTextBox,搜索button也会发现多了我们第三

C#基础视频教程3.1 常见控件类型和使用方法

可以从左侧的工具箱中找到常见的控件(你要在Form1这种窗体上) ? 为了方便你也可以把工具箱整个拖过去,这样从上到下控件都给你排好了 ? 对于按钮来说,最常见的就是他的背景颜色,文字,字体,还有是否启用(我们输入按钮名称+点就可以访问这个控件的所有属性,事件和方法,注意属性是一把扳手的标识,事件是一个闪电,方法是一个小方块) ? 详细解释一下属性:我们先判断这个按钮是否已经Enabled(这里判断的就是按钮2的属性,属性就好比一个人有他的属性,身高,年龄,体重,姓名,性别,有一些属性是只读的,

C#基础视频教程3.3 常见控件类型和使用方法

前面介绍了微软的控件,也介绍了几个第三方控件,那么这些控件是如何做出来的?即便我们自己不做控件,也至少要理解控件的原理. 如果要创建一个自定义控件,首先新建一个C#下面的Windows窗体控件库 ? 最简单的方法只要拖一个label,放一个定时器,定时器每隔一秒获取并显示当前系统时间即可(F5可以运行测试看到效果) ? 那么还是跟之前一样,把这个生成的DLL拖放到工具箱就可以给新的项目使用了 ? 稍微复杂一点的情况,我们也改写一下官方的RichTextBox,让他可以插入图像,导入RTF文件.首

Android 中常见控件的介绍和使用

1 TextView文本框 1.1 TextView类的结构 TextView 是用于显示字符串的组件,对于用户来说就是屏幕中一块用于显示文本的区域.TextView类的层次关系如下: java.lang.Object ? android.view.View ? android.widget.TextView 直接子类: Button, CheckedTextView, Chronometer, DigitalClock, EditText 间接子类: AutoCompleteTextV