资讯专栏INFORMATION COLUMN

原生js练习题---第二课(上)

CollinPeng / 457人阅读

摘要:百度输入法实现效果百度输入法主要是切换的判断条件,一开始我还用点击次数的奇偶性来判断,其实直接检查菜单有没有显示即可。简易年历实现效果简易年历和上一题差不多,只是这次把修改类名换成修改数据而已。

0x1百度输入法

实现效果:
See the Pen 2-01百度输入法

主要是切换的判断条件,一开始我还用点击次数的奇偶性来判断-_-||,其实直接检查菜单有没有显示即可。检查的时候有个小trick,初始状态菜单的style属性为空,因为我们接下来要点按钮显示,所以把这种情况和style.displaynone的情况归为一类丢到else里最省事。

0x2点击Div,显示其innerHTML

实现效果:
See the Pen 2-02点击Div,显示其innerHTML

这里遍历了div绑上事件,也可以用事件代理来做。

0x3求出数组中所有数字的和

实现效果:
See the Pen 2-03求出数组中所有数字的和

简单地的表单数据获取和处理,注意对直接对字符串使用加号就是拼接,想用加法还得手动转换为数字。

0x4弹出层效果

实现效果:
See the Pen 2-04弹出层效果

经典的弹出层效果,关键在CSS上,js只监听个样式的显示与否就ok。

0x5函数传参,改变Div任意属性的值

实现效果:
See the Pen 2-05函数传参,改变Div任意属性的值

依然是对style对象做文章,既可直接设置style对象,也可以用DOM2的setProperty()方法。同样,清空style对象里的样式既可以直接将它置null,也可将其cssText属性清空。

0x6图片列表:鼠标移入移出改变图片透明度

实现效果:
See the Pen 2-06图片列表:鼠标移入移出改变图片透明度

还是用js模仿css的hover效果(何苦这样-_-||),老套路,事件代理+增删类名搞定。因为事件代理是挂在祖先元素上的,现在就只能监听mouseovermouseout事件了,因为mouseentermouseleave在光标进出子元素时是不会触发的。所以这样看来,mouseovermouseout在子元素上也能触发这个特点简直就是为事件代理而生的嘛。

0x7简易选项卡

实现效果:
See the Pen 2-07简易选项卡

继续模仿hover效果,还要加上对另一个div的样式控制。但是这次光标离开也仍要保持hover的状态,直到另一选项被hover,所以不能借助mouseout事件、只能遍历元素移除样式了,顺便也在遍历过程中取得另一个div要激活的内容。

0x8简易JS年历

实现效果:
See the Pen 2-08简易JS年历

和上一题差不多,只是这次把修改类名换成修改数据而已。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78809.html

相关文章

  • 原生js习题---二课(下)

    摘要:最后,我们只要在事件处理程序中获得这个布尔值传给这几个函数就可以了,其中,全选框反选链接可以从全选框的属性获得这个值,而全体的复选框要获得就得靠遍历了。 0x1播放列表收缩展开 实现效果 值得注意的一个地方是那个箭头,我这里只是用了简单的字符串替换,而原题用了背景图片移动来实现切换箭头,但是似乎那样做会导致整个容器的左右偏移、效果不是很好。 0x2鼠标移过显示车标 实现效果 这题看起来...

    Little_XM 评论0 收藏0
  • Linux

    摘要:今天的标题也挺探索之旅第三部分第一课数据处理,慢条斯理作者谢恩铭转载请注明出处内容简介第三部分第一课数据处理,慢条斯理第三部分第二课预告流管道重定向,三管齐下数据处理,慢条斯理哈哈,终于到了第三部分了。 Linux 探索之旅 | 第二部分测试题 -- 作者 谢恩铭 转载请注明出处 内容简介 第二部分测试题 第三部分第一课预告:数据处理,慢条斯理 上一课 Linux 探索之旅 | 第二部...

    wwq0327 评论0 收藏0
  • Linux - 收藏集 - 掘金

    摘要:这一课我们来学探索之旅第三部分第一课数据处理,慢条斯理掘金作者谢恩铭转载请注明出处内容简介第三部分第一课数据处理,慢条斯理第三部分第二课预告流管道重定向,三管齐下数据处理,慢条斯理哈哈,终于到了第三部分了。 Linux 基础之常用命令篇 - 后端 - 掘金最近一段时间工作实在是太忙了,所以好久没有写文章了,趁着周末把linux 的相关知识,整理了下。这一篇文件主要记录了一些linux的...

    lolomaco 评论0 收藏0
  • TRY REGEX:正则表达式交互式入门教程 翻译&解答

    摘要:写一个正则表达式来测试变量中是否包含字符串。用函数给出不使用字符,但和等价的正则表达式。第十四课标志全局匹配标志第二个常用的标志是全局匹配标志,用字母表示。写出一个正则表达式来检验合法性。非捕获组的主要用途是给一个组赋予量词。 TRY REGEX 是一个交互式的正则表达式学习项目项目地址:https://github.com/callumacra...在线地址:http://tryre...

    李义 评论0 收藏0
  • Vue.js学习二课 如何安装

    摘要:安装独立版本我们可以在的官网上直接下载并用标签引入。国内会保持和发布的最新的版本一致。方法由于安装速度慢,本教程使用了淘宝的镜像及其命令,安装使用介绍参照使用淘宝镜像。 Vue.js 安装 1、独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 标签引入。 2、使用 CDN 方法 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议...

    stefanieliang 评论0 收藏0

发表评论

0条评论

CollinPeng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<