网页中实现单击按钮后动态显示文本

可以或许实现交互功能的网页，用户会更喜好，此刻想在网页中建造一个按钮，单击后就会在网页中显示文本，该若何实现呢？笔者以显示一首诗为例，与大师分享一下操作经验。

东西/原料

• Visual Studio 2015

方式/步调

1. 1

   起首，设置在网页中显示文本的格局，文本的高度为100像素，宽度为280像素。

   
2. 2

   界说显示文本的字体巨细为22像素，离左侧和右侧的距离设置为主动，离顶部的距离设置为15像素。

   
3. 3

   接着，用font标签在网页中插入要显示的文本。

   
4. 4

   因为显示的文本内容是动态节制的，所以设置一个标识符poemsi，用来动态暗示显示的诗句。

   
5. 5

   然后，在网页中插入一个按钮，如下图所示。

   
6. 6

   按钮的高度为33像素，宽度为100像素，离左侧和右侧的距离为主动，离顶部的距离为20像素。

   
7. 7

   用type属性，界说按钮的类型为button。

   
8. 8

   界说按钮的标签为显示，单击后执行的函数为show。

   
9. 9

   按钮的布景色值为#aaeded，字体巨细为20像素。

   
10. 10

    然后，界说show函数，用function方式界说函数名。

    
11. 11

    给诗词变量poemsi赋值，本例为古诗草的诗句。

    
12. 12

    最后，使网页显示变量中的值，即显示诗句。

    
13. 13

    在浏览器中浏览网页，单击网页中的显示按钮后，本身设置的诗句内容就在页面中显示出来。

    

注重事项

• 作者声明：本篇经验系本人辛勤奋动的原创当作果，未经许可，回绝转载。