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

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

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

文章插图

需要这些哦
Visual Studio 2015
方式/
1起首,设置在网页中显示文本的格局,文本的高度为100像素,宽度为280像素 。

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

文章插图

2【网页中实现单击按钮后动态显示文本】界说显示文本的字体大小为22像素,离左侧和右侧的距离设置为主动,离顶部的距离设置为15像素 。

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

文章插图

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

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

文章插图

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

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

文章插图

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

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

文章插图

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

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

文章插图

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

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

文章插图

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

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

文章插图

9按钮的布景色值为#aaeded,字体大小为20像素 。

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

文章插图

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

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

文章插图

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

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

文章插图

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

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

文章插图

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

推荐阅读