功能描述

在新建的页面中增加一个文本框“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. 【原创】Linux环境下的图形系统和AMD R600显卡编程(5)——AMD显卡显命令处理机制

    通常通过读写设备寄存器对设备进行编程,在X86系统上,有专门的IO指令进行编程,在其他诸如MIPS.SPARC这类系统上,通过将设备的寄存器映射到内存地址空间直接使用读写内存的方式对设备进行编程. R ...

  2. windows下利用线程池完成多任务的分配和运行

    在做项目的过程中有时候为了提升效率,用了多线程的方法来对任务进行分割和应用,后来发现,采用线程池的方法能更好的利用线程资源来计算任务,网上有很多关于如何运行线程池的例子,msdn上也给出了对应的例子: ...

  3. Appium+python自动化4-元素定位uiautomatorviewer【转载】

    前言 环境搭建好了,下一步元素定位,元素定位本篇主要介绍如何使用uiautomatorviewer,通过定位到页面上的元素,然后进行相应的点击等操作. uiautomatorviewer是androi ...

  4. python每日一类(4)：slice

    class slice(stop)class slice(start, stop[, step]) Return a slice object representing the set of indi ...

  5. AC日记——最小正子段和 51nod 1065

    最小正子段和 思路: 找最小的大于0的sum[j]-sum[i](j>i): 高级数据结构(splay)水过: 来,上代码: #include <cstdio> #include & ...

  6. （2）C语言 基础2

    一.函数 二.指针 1.指针是一个用来存储内存地址的变量. int * p ; 定义了一个指针变量p,p中存储的是一个地址,改地址里必定会存储一个int类型的数据. *号表示变量p是一个指针.*和指针 ...

  7. spark-join算子

  8. 离别在须臾——AFO

    始于 2016-12-25 终于 2017-11-30 一开始就陷入了颓废的坑,然后,直至 2017 年暑假,颓废的气息一发不可收拾, 从 Q_fight 到 aoqi_baitian ,从 大主宰 ...

  9. Group Shifted Strings -- LeetCode

    Given a string, we can "shift" each of its letter to its successive letter, for example: & ...

  10. [POI2010]Beads

    题目大意: 给定一个长度为$n(n\leq200000)$的串$S_{1\sim n}$,选择一个$l$,从$S_1$开始,将$S$分为连续的若干段,使得每一段长度为$l$.令$k$为分出来不同的子串 ...