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-11
visual studio code怎么改快捷鍵？vscode修改默認(rèn)快捷鍵的方法介紹
使用vscode時，經(jīng)常會遇到和其他軟件快捷鍵沖突的問題，這個時候我們需要修改快捷鍵，那么，visual studio code怎么改快捷鍵？今天小編就給大家詳細(xì)介紹一下vscode修改默認(rèn)2018-04-11
VisualStudio2015怎么設(shè)置字體格式? vs設(shè)置字體樣式的教程
VisualStudio2015怎么設(shè)置字體格式？vs2015中想要對文本編輯器中的字體格式大小進行編輯，該怎么實現(xiàn)呢？下面我們就來看看vs設(shè)置字體樣式的教程，需要的朋友可以參考下2018-04-10
vscode(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-04
VS Code有哪些常用的快捷鍵? Visual Studio Code常用快捷鍵大全
Visual Studio Code簡稱VSCode，是一款好用的代碼編輯器，最近，很多網(wǎng)友問小編VS Code有哪些常用的快捷鍵?今天小編就給大家整理了最高效的Visual Studio Code常用快捷鍵大2018-04-03
visualstudio怎么刪除代碼段管理器? vs代碼段管理器的移除方法
visual studio怎么刪除代碼段管理器？visual studio暫時不用代碼段管理器，該怎么刪除呢？下面我們就來看看vs代碼段管理器的移除方法，需要的朋友可以參考下2018-03-26
visualstudio文檔怎么設(shè)置格式? vs代碼添加格式的教程
visualstudio文檔怎么設(shè)置格式？visual studio中的代碼看上去很亂，想要添加格式，看上去舒服點，該怎么設(shè)置格式呢？下面我們就來看看vs設(shè)置文檔格式的教程，需要的朋友可2018-03-23
