使用JS动态显示文本

2019-11-19 15:30:16

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了JS动态显示文本的具体代码，供大家参考，具体内容如下

index.html：

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8" >    <title>页面（HTML5）</title>    <!-- 通过链接的方式使用 CSS -->    <link rel="stylesheet" href="css/master.css" rel="external nofollow" />    <script src="js/main.js" charset="utf-8"></script>  </head>  <body>    <!-- HTML5 语义标签 -->    <header>      time is long, life is short    </header>    <main>      <aside class="">        aside      </aside>      <article class="">        <input id="info" placeholder="输入内容">        <!-- <input type="button" value="添加"> -->        <button onclick="show()" type="button" name="button">添加</button>        <h1 id="result">显示</h1>      </article>    </main>    <footer>Copyright (c) 2016 Copyright Holder All Rights Reserved.</footer>  </body></html>

main.js:

// 定义函数function show() {  // 获得id为info的input标签的内容  var a = document.getElementById('info').value;  // 显示，在id为result处动态显示（清除旧的显示新的）  document.getElementById('result').innerText = a;}

show函数封装在专门存放JS脚本代码的文件夹main.js，function是属于JavaScript的脚本语言函数。。。function是JavaScript语言中的关键词，也就是声明一个函数时使用的。

demo：