使用JS動(dòng)態(tài)顯示文本
更新時(shí)間：2017年09月09日 10:38:17 作者：Lawliet_ZMZ
這篇文章主要為大家詳細(xì)介紹了使用JavaScript動(dòng)態(tài)顯示文本，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS動(dòng)態(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處動(dòng)態(tài)顯示（清除舊的顯示新的）
document.getElementById('result').innerText = a;
}
show函數(shù)封裝在專門存放JS腳本代碼的文件夾main.js，function是屬于JavaScript的腳本語言函數(shù)。。。function是JavaScript語言中的關(guān)鍵詞，也就是聲明一個(gè)函數(shù)時(shí)使用的。
demo：
但是這個(gè)顯示沒有對(duì)齊輸入框，可在CSS樣式文件master.css中添加如此：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
這篇文章主要介紹了JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()的相關(guān)資料,需要的朋友可以參考下2016-08-08
微信小程序比較兩個(gè)數(shù)大小的實(shí)現(xiàn)方法
最近在工作中遇到一個(gè)需求,可以自動(dòng)對(duì)比兩個(gè)數(shù)的大小,下面這篇文章主要給大家介紹了關(guān)于微信小程序比較兩個(gè)數(shù)大小的實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
js實(shí)現(xiàn)感應(yīng)鼠標(biāo)圖片透明度變化的方法
這篇文章主要介紹了js實(shí)現(xiàn)感應(yīng)鼠標(biāo)圖片透明度變化的方法,涉及javascript鼠標(biāo)操作及css修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了詳解es6超好用的語法糖Decorator，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了使用JS編寫的隨機(jī)抽取號(hào)碼的小程序功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-08-08
使用百度地圖實(shí)現(xiàn)地圖網(wǎng)格的示例
下面小編就為大家分享一篇使用百度地圖實(shí)現(xiàn)地圖網(wǎng)格的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了Javascript中的作用域，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-10-10
uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過程
經(jīng)常在做app的時(shí)候,會(huì)有做熱更新的需求,這也是常用的更新app的一種手段,下面這篇文章主要給大家介紹了關(guān)于uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
javascript實(shí)現(xiàn)禁止復(fù)制網(wǎng)頁內(nèi)容匯總
本文給大家匯總介紹了幾種使用javascript和CSS實(shí)現(xiàn)禁止復(fù)制頁面內(nèi)容的方法，非常的實(shí)用，有需要的小伙伴可以參考下。2015-12-12
這篇文章主要簡(jiǎn)單介紹了Javascript Base64 加密解密的使用方法，有需要的小伙伴參考下2014-12-12