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