【HTML5】元素<script>与<noscript>的使用

功能描述

在新建的页面中增加一个文本框“txtContent”和一个按钮“请点击我”；当单击按钮时。通过页面中加入的JavaScript脚本获取为文本框中的内容，并显示在页面上。

实现代码

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>脚本元素的使用</title>
    <link href="css/css1.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" async="true">
        function Btn_Click(){
            var strTxt = document.getElementById("txtContent").value;
            var strDiv = document.getElementById("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();"/>
<div id = "divShow" class="divShow"></div>
</body>
</html>
View Code

CSS

@charset "utf-8"
/*CSS Document*/
body{
	font-size:14px;
}
.inputbtn {
	border:solid 1px #ccc;
	background-color:#eee;
	line-height:18px;
	font-size:12px;
}
.inputtxt{
	border:solid 1px #ccc;
	line-height:18px;
	font-size:12px;
}
.divShow{
	font-size:18px;
	font-weight:blod;
	line-height:28px;
	background:green;
}
View Code

页面效果

image

在本实例的<script>元素中，设置async属性设置的值为true,即允许脚本在页面解析时异步执行，在很大程度上加速页面加载速度。

posted @ 2017-09-28 17:47  OLIVER_QIN  阅读(308)  评论(0)  编辑  收藏  举报