VisualStudio怎么實現(xiàn)點擊網(wǎng)頁中的按鈕動態(tài)顯示文本?

Visual Studio 2015中想在網(wǎng)頁中制作一個按鈕,單擊后就會在網(wǎng)頁中顯示文本,該怎么制作這個效果呢?下面我們就來看看詳細(xì)的教程。
1、首先,設(shè)置在網(wǎng)頁中顯示文本的格式,文本的高度為100像素,寬度為280像素。
2、定義顯示文本的字體大小為22像素,離左側(cè)和右側(cè)的距離設(shè)置為自動,離頂部的距離設(shè)置為15像素。
3、接著,用font標(biāo)簽在網(wǎng)頁中插入要顯示的文本。
4、由于顯示的文本內(nèi)容是動態(tài)控制的,所以設(shè)置一個標(biāo)識符poemsi,用來動態(tài)表示顯示的詩句。
5、然后,在網(wǎng)頁中插入一個按鈕,如下圖所示。
6、按鈕的高度為33像素,寬度為100像素,離左側(cè)和右側(cè)的距離為自動,離頂部的距離為20像素。
7、用type屬性,定義按鈕的類型為button。
8、定義按鈕的標(biāo)簽為顯示,單擊后執(zhí)行的函數(shù)為show。
9、按鈕的背景色值為#aaeded,字體大小為20像素。
10、然后,定義show函數(shù),用function方法定義函數(shù)名。
11、給詩詞變量poemsi賦值,本例為古詩草的詩句。
12、最后,使網(wǎng)頁顯示變量中的值,即顯示詩句。
13、在瀏覽器中瀏覽網(wǎng)頁,單擊網(wǎng)頁中的顯示按鈕后,自己設(shè)置的詩句內(nèi)容就在頁面中顯示出來。
以上就是vs205用按鈕控制文本動態(tài)顯示的技巧,希望大家喜歡,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
VisualStudio怎么新建網(wǎng)頁頁面? vs創(chuàng)建頁面的教程
VisualStudio怎么插入按鈕? vs網(wǎng)頁添加按鈕的教程
VisualStudio網(wǎng)頁怎么插入文本框? vs文本框的制作方法
相關(guān)文章
vscode如何關(guān)閉自動更新提示?visual studio code禁止自動更新的方法介
最近,很多網(wǎng)友問小編vscode如何關(guān)閉自動更新提示?今天小編就給大家詳細(xì)介紹一下visual studio code禁止自動更新的方法,非常簡單,需要的朋友一起去了解一下吧2018-04-11visual studio code怎么改快捷鍵?vscode修改默認(rèn)快捷鍵的方法介紹
使用vscode時,經(jīng)常會遇到和其他軟件快捷鍵沖突的問題,這個時候我們需要修改快捷鍵,那么,visual studio code怎么改快捷鍵?今天小編就給大家詳細(xì)介紹一下vscode修改默認(rèn)2018-04-11VisualStudio2015怎么設(shè)置字體格式? vs設(shè)置字體樣式的教程
VisualStudio2015怎么設(shè)置字體格式?vs2015中想要對文本編輯器中的字體格式大小進行編輯,該怎么實現(xiàn)呢?下面我們就來看看vs設(shè)置字體樣式的教程,需要的朋友可以參考下2018-04-10vscode(Visual Studio Code)配置PHP開發(fā)環(huán)境的方法(已測)
Visual Studio Code一個輕量且強大的代碼編輯器,支持Windows,OS X和Linux。內(nèi)置JavaScript、TypeScript和Node.js支持,而且擁有豐富的插件生態(tài)系統(tǒng),可通過安裝插件來支2018-04-06Windows下Visual Studio Code 快捷鍵大全
Visual Studio Code 是一款優(yōu)秀的編輯器,非常適合編寫 TS 以及 React 。最近在學(xué)習(xí) AngularJs 2,開始使用 VSCode,特意整理翻譯了一下官網(wǎng)的快捷鍵2018-04-05Visual Studio Code 使用指南(vscode技巧)
VSCode是微軟推出的一款輕量編輯器,采取了和VS相同的UI界面,搭配合適的插件可以優(yōu)化前端開發(fā)的體驗,這里為大家介紹一下vscode的技巧,需要的朋友可以參考下2018-04-05visual studio code教程 vscode的基礎(chǔ)使用和自定義設(shè)置方法
這篇文章主要基于基礎(chǔ)web前端開發(fā),visual studio code教程——基礎(chǔ)使用、擴展插件安裝使用以及少許自定義配置,需要的朋友可以參考下2018-04-04VS Code有哪些常用的快捷鍵? Visual Studio Code常用快捷鍵大全
Visual Studio Code簡稱VSCode,是一款好用的代碼編輯器,最近,很多網(wǎng)友問小編VS Code有哪些常用的快捷鍵?今天小編就給大家整理了最高效的Visual Studio Code常用快捷鍵大2018-04-03visualstudio怎么刪除代碼段管理器? vs代碼段管理器的移除方法
visual studio怎么刪除代碼段管理器?visual studio暫時不用代碼段管理器,該怎么刪除呢?下面我們就來看看vs代碼段管理器的移除方法,需要的朋友可以參考下2018-03-26visualstudio文檔怎么設(shè)置格式? vs代碼添加格式的教程
visualstudio文檔怎么設(shè)置格式?visual studio中的代碼看上去很亂,想要添加格式,看上去舒服點,該怎么設(shè)置格式呢?下面我們就來看看vs設(shè)置文檔格式的教程,需要的朋友可2018-03-23