使用JS動(dòng)態(tài)顯示文本
本文實(shí)例為大家分享了JS動(dòng)態(tài)顯示文本的具體代碼,供大家參考,具體內(nèi)容如下
index.html:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" > <title>頁(yè)面(HTML5)</title> <!-- 通過(guò)鏈接的方式使用 CSS --> <link rel="stylesheet" href="css/master.css" rel="external nofollow" /> <script src="js/main.js" charset="utf-8"></script> </head> <body> <!-- HTML5 語(yǔ)義標(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ù)封裝在專(zhuān)門(mén)存放JS腳本代碼的文件夾main.js,function是屬于JavaScript的腳本語(yǔ)言函數(shù)。。。function是JavaScript語(yǔ)言中的關(guān)鍵詞,也就是聲明一個(gè)函數(shù)時(shí)使用的。
demo:
但是這個(gè)顯示沒(méi)有對(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)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03js實(shí)現(xiàn)感應(yīng)鼠標(biāo)圖片透明度變化的方法
這篇文章主要介紹了js實(shí)現(xiàn)感應(yīng)鼠標(biāo)圖片透明度變化的方法,涉及javascript鼠標(biāo)操作及css修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02使用JS編寫(xiě)的隨機(jī)抽取號(hào)碼的小程序
這篇文章主要介紹了使用JS編寫(xiě)的隨機(jī)抽取號(hào)碼的小程序功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-08-08使用百度地圖實(shí)現(xiàn)地圖網(wǎng)格的示例
下面小編就為大家分享一篇使用百度地圖實(shí)現(xiàn)地圖網(wǎng)格的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過(guò)程
經(jīng)常在做app的時(shí)候,會(huì)有做熱更新的需求,這也是常用的更新app的一種手段,下面這篇文章主要給大家介紹了關(guān)于uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過(guò)程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11javascript實(shí)現(xiàn)禁止復(fù)制網(wǎng)頁(yè)內(nèi)容匯總
本文給大家匯總介紹了幾種使用javascript和CSS實(shí)現(xiàn)禁止復(fù)制頁(yè)面內(nèi)容的方法,非常的實(shí)用,有需要的小伙伴可以參考下。2015-12-12