功能描述

在新建的页面中增加一个文本框“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>

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;

}

页面效果

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

【HTML5】元素<script>与<noscript>的使用的更多相关文章

  1. HTML5元素标记释义

    HTML5元素标记释义 标记 类型 意义 介绍 文件标记 <html> ● 根文件标记 让浏览器知道这是HTML 文件 META标记 <head> ● 开头 提供文件整体信息 ...

  2. HTML5元素背景知识

    目录 HTML5元素背景知识 语义与呈现分离 元素选用原则 少亦可为多 别误用元素 具体为佳,一以贯之 对用户不要想当然 元素说明体例 ol元素 元素速览 文档和元数据元素 文档和元数据元素 文本元素 ...

  3. html5.js让IE（包括IE6）支持HTML5元素方法

    引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...

  4. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  5. html5.js让IE（包含IE6）支持HTML5元素方法

    原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...

  6. 添加shiv让所有现代浏览器都支持 HTML5 语义元素 html5.js让IE（包括IE6）支持HTML5元素方法

    引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...

  7. 让更多浏览器支持html5元素的简单方法

    当我们试图使用web上的新技术的时候,旧式浏览器总是我们心中不可磨灭的痛!事实上,所有浏览器都有或多或少的问题,现在还没有浏览器能够完整的识别和支持最新的html5结构元素.但是不用担心,你依然可以在 ...

  8. 如何让旧版IE浏览器认识HTML5元素

    <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" ...

  9. 不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...

随机推荐

  1. Visual Studio跨平台开发(1)：Hello Xamarin!

    前言 应用程序发展的脚步, 从来没有停过. 从早期的Windows 应用程序, 到网络时代的web 应用程序, 再到近几年相当盛行的行动装置应用程序(Mobile Application), 身为C# ...

  2. SQL Server 预编译执行SQLs

    问题描述: MVC5项目,利用执行sql的方式获取数据,但是在利用预编译执行的时候报错了,字段XXXwhich was not supplied. 其实就是这个参数传了个null导致的.在传参数之前做 ...

  3. 牛客网 牛客练习赛7 A.骰子的游戏

    A.骰⼦的游戏 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言65536K64bit IO Format: %lld 题目描述 在Alice和Bob面前的是两个骰 ...

  4. （2）apache安装、配置及使用

    一.apache安装 假设我们我们的安装路径是 C:\Apache2.2 运行软件 如果是本地学习使用 第二行服务名localhost 其他随便 一个自动安装,一个自定义安装,没有什么特别重要的,一直 ...

  5. object的hashCode与equals

    JAVA代码:    public static void main(String[] args)    {        Object obj1 = new Object();        Obj ...

  6. NOIP2018提高组模拟题（二）

    咒语(curse) Description 亮亮梦到自己来到了魔法城堡,但一扇巨大的石门阻拦了他通向城堡内的路. 正当他沮丧之际,突然发现门上有一处机关,机关上有一张很长的纸条. 亮亮拿起纸条的一端, ...

  7. sed 中如何替换换行符

    使用如下解决方案: sed ':a;N;$!ba;s/\n/ /g' 这将在一个循环里读取整个文件,然后将换行符替换成一个空格. 说明: 通过 :a创建一个标记 通过N追加当前行和下一行到模式区域 如 ...

  8. Java判断中文字符

    package com.jsoft.test; import java.util.regex.Pattern; /** * 判断中文字符 * * @author jim * @date 2017-12 ...

  9. Chrome插件开发教程收集

    教程: http://open.chrome.360.cn/extension_dev/overview.html http://www.cnblogs.com/liuxianan/p/chrome- ...

  10. python的模块itsdangerous

    这个模块主要用来签名和序列化 使用场景: 一.给字符串添加签名: 发送方和接收方拥有相同的密钥--"secret-key",发送方使用密钥对发送内容进行签名,接收方使用相同的密钥对 ...