如何创建一个文本选择器

文本选择器, 是用户在浏览页面的同时, 通过点击鼠标来改变页面或者文本内容的一个效果, 如背景图片, 字体样式, 网页布局等, 下面, 咱们就开始制作一个文本选择器吧!工具/材料 webstorm
操作方法 01 打开编译环境(webstorm),在工程文件夹里面新建一个HTML文件:

如何创建一个文本选择器

文章插图

02 把所需要的包如jquery, bootstrap,angular等引入到HTML文件中

如何创建一个文本选择器

文章插图

03 在angular.js文件下方创建一个名为myapp的模块 。

如何创建一个文本选择器

文章插图

04 定义一个控制器, 并搭建视图与网页内容之间的通信桥梁 。

如何创建一个文本选择器

文章插图

05 在控制器里面定义一个变量, 变量的值为“欢迎来到IT乐园”, 在<div>标签里面输出变量的值 。

如何创建一个文本选择器

文章插图

06 运行程序, 如果网页中显示的内容与变量的值相等的话, 说明:通信桥梁已搭建成功 。

如何创建一个文本选择器

文章插图

07 新建一个div标签, 在div标签里面创建一个btn按钮和调用点击事件 。

如何创建一个文本选择器

文章插图

08 为div标签添加样式, 边框, 并把所有的网页内容居中显示:

如何创建一个文本选择器

文章插图

09 运行程序 。

如何创建一个文本选择器

文章插图

10 在控制器下方增加点击事件 。

如何创建一个文本选择器

文章插图

11 【如何创建一个文本选择器】运行程序, 点击按钮, 是不是有变化了呢!

如何创建一个文本选择器

文章插图



以上内容就是如何创建一个文本选择器的内容啦, 希望对你有所帮助哦!

    推荐阅读