使用JS動態(tài)顯示文本

更新時間：2017年09月09日 10:38:17 作者：Lawliet_ZMZ

這篇文章主要為大家詳細(xì)介紹了使用JavaScript動態(tài)顯示文本，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS動態(tài)顯示文本的具體代碼，供大家參考，具體內(nèi)容如下

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 語義標(biāo)簽 -->
    <header>
      time is long, life is short
    </header>

    <main>
      <aside class="">
        aside
      </aside>
      <article class="">
        <input id="info" placeholder="輸入內(nèi)容">
        <!-- <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:

// 定義函數(shù)
function show() {
  // 獲得id為info的input標(biāo)簽的內(nèi)容
  var a = document.getElementById('info').value;
  // 顯示，在id為result處動態(tài)顯示（清除舊的顯示新的）
  document.getElementById('result').innerText = a;

}

show函數(shù)封裝在專門存放JS腳本代碼的文件夾main.js，function是屬于JavaScript的腳本語言函數(shù)。。。function是JavaScript語言中的關(guān)鍵詞，也就是聲明一個函數(shù)時使用的。

demo：

但是這個顯示沒有對齊輸入框，可在CSS樣式文件master.css中添加如此：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS使用cookie保存用戶登錄信息操作示例
這篇文章主要介紹了JS使用cookie保存用戶登錄信息操作,結(jié)合具體實(shí)例形式分析了javascript使用cookie實(shí)現(xiàn)針對用戶信息的存儲與讀取相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
js中Object.defineProperty()方法的不詳解
這篇文章主要介紹了js中Object.defineProperty()方法的不詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
微信小程序之ES6與事項(xiàng)助手的功能實(shí)現(xiàn)
本篇文章主要介紹了微信小程序之ES6與事項(xiàng)助手的功能實(shí)現(xiàn)，具有一定的參考價值，有興趣的同學(xué)可以了解一下。
2016-11-11
解決echarts官網(wǎng)打不開訪問失敗的問題
這篇文章主要介紹了解決echarts官網(wǎng)打不開訪問失敗的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
JavaScript delete操作符應(yīng)用實(shí)例
delete 運(yùn)算符從對象中刪除一個屬性，或從數(shù)組中刪除一個元素。
2009-01-01
JavaScript實(shí)現(xiàn)網(wǎng)頁下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁下拉菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11
微信小程序云開發(fā)之云函數(shù)詳解
這篇文章主要介紹了微信小程序云開發(fā)之云函數(shù)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
利用JavaScript實(shí)現(xiàn)防抖節(jié)流函數(shù)的示例代碼
在開發(fā)中我們經(jīng)常會遇到一些高頻操作，比如：鼠標(biāo)移動，滑動窗口，鍵盤輸入等等，節(jié)流和防抖就是對此類事件進(jìn)行優(yōu)化，降低觸發(fā)的頻率，以達(dá)到提高性能的目的。本文就教大家如何實(shí)現(xiàn)一個讓面試官拍大腿的防抖節(jié)流函數(shù)，需要的可以參考一下
2022-08-08
通過偽協(xié)議解決父頁面與iframe頁面通信的問題
這篇文章主要介紹了通過偽協(xié)議解決父頁面與iframe頁面通信的問題,需要的朋友可以參考下
2015-04-04
javascript的onchange事件與jQuery的change()方法比較
本來是想添加文本框文本內(nèi)容改變事件動作的，結(jié)果找了許多這方面的javascript代碼都不如意。
2009-09-09