• 提升品牌形象
  • 最新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 实例
实例3-3 元素<script>与<noscript>的使用

实例3-3 元素<script>与<noscript>的使用

1.功能描述

在新建的页面中增加一个文本框“txtContent”和一个按钮“请点击我”;当单击按钮时,通过页面中加人的JavaScript脚本代码获取文本框中的内容,并且显示在页面中。

2.实现代码

在DreamweaverCS5中新建一个HTML页面3-3Hhtml,加入代码如代码清单3_3所示。

代码清单3-3 脚本元素的使用

	<!DOCTYPEhtml>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>脚本元素的使用</title>
	<link href="Css/css3.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" async="true">
	  function Btn=Click(){
	    var strTxt=document.getElementByld("txtContent").value;
	    var strDiv=docviment.getElementByld("divShow");
	    strDiv.style.display="block";
	    strDiv.innerHTML="您输入的字符是"+strTxt;
	    }
	</script>
	<noscript>您的浏览器不支持JavaScript!</noscript>
	</head>
	<body>
	<input type="text" id="txtContent"
	       class="inputtxt"/>
	<input type="button”value="请点击我"
	      class="inputbtn"onClick="Btn_Click="Btn_Click();">
	<div id="divShow" class="divShow"></div>
	</body>
	</html>

为了增加页面的浏览效果,在实例3-3中通过<link>元素导入了一个CSS样式文件css3.css,文件地址是/Ch3/Css/Css3.css,其代码如下:

	/*CSS Document*/
	body{
	  font-size:12px
	}
	.inputbtn{
	   border:solidlpx#ccc;
	   background-color:#eee;
	   line-height:18px;   font-size:12px
	}
	.inputtxt{
	   border:solidlpx#ccc;
	   line-height:18px;
	   font-size:12px
	}
	.divShow{
	   border:solid lpx #666;
	   background-color:#eee;
	   margin-top:5px;
	   padding:5px;
	   width:196px;
	   display:none
	}

3.页面效果

该页面在Chrome 10浏览器下执行的页面效果如图3-4所示。

4.源码分析

在本实例的<script>元素中,设置async属性的值为true,即允许脚本在页面解析时异步执行。HTML 5中新增的这个属性,可以在很大程度上缓解页面解析的压力,加速页面加载的速度;同时,又不会阻碍<script>元素中脚本的执行。如果是执行大量的JavaScript代码,其效果将更加明显。在<script>元素中,定义了一个函数Btn—Click(),用于单击页面按钮时显示文本框中输入的内容。如果浏览器支持<script>元素,单击按钮时,该函数将被执行,否则将显示<noscript>元素中的内容,实现过程如代码中加粗部分所示。

图3-4 使用脚本元素的页面效果

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


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

  • QQ在线客服

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

    4000-555-94113099998627
  • 联系地址

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