腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

HTML5学堂

专栏作者

296

文章

548064

阅读量

70

订阅数

案例效果 | canvas刮刮卡抽奖

javascript html

案例效果 📷 案例代码 HTML代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>刮刮卡抽奖 - 公众号：HTML5 WEB前端分享</title>

2021-11-25

2.4K0

只有JS基础扎实的攻城狮，才解得出的“密码”

HTML5学堂-码匠：虽然很不想面对，但是明天，的确是节后工作的开始，今天就一边解密一边“适应”一下代码吧！ Tips：如下的四道题目，是基于几家公司的面试真题进行了改编和优化。解密热身开始！如下

2018-03-13

1.2K0

JS实战开发经验！函数多参数传参技巧

html5 javascript

HTML5学堂-码匠：掌握JavaScript代码的你，一定编写封装过函数，为了提升函数的控制性，必不可少的就是参数，必选可选的一大堆参数罗列出来，函数调用貌似变得麻烦起来~~~ Tips：必选参数指的是必须要传入实参的参数；可选参数在函数中有默认值，如有传入实参，则取实参的值，如果没有传入实参，则使用默认值。函数的众多参数问题当一个函数既有必选参数，又有可选参数，在定义函数时，我们可能采取的方式是：无论参数是可选参数还是必选参数，都将参数罗列下来（通常按照先必选再可选的顺序）但是这样的罗列方法

2018-03-13

5.7K0

JS 计时器参数剖析与真题

html5 javascript

HTML5学堂-码匠：计时器的第一个参数，包含几种不同的书写方法，可以是函数名，匿名函数，JS代码字符串，还有一些面试题当中会出现“函数调用”的书写方式。那么，这些不同的书写方法分别表示什么呢？在计

2018-03-13

2.4K0

arguments，想说爱你不容易

HTML5学堂-码匠：arguments是关于函数参数的一个知识点，也是很多企业面试时的“必考点”，arguments和形参有何不同？如何去检测实参或形参的长度？一起来看看吧！什么是arguments arguments是一个类数组。类数组类数组：拥有length属性，其它属性（索引）为非负整数，但并不具有数组的方法。典型的类数组典型的类数组：DOM节点列表（通过DOM操作获取的标签列表）、arguments。形参与实参什么是形参形参：表示的是“形式参数”，是在定义函数名和函数体时使用的参数

2018-03-13

7240

原生JS | 值类型与引用类型变量

HTML5学堂-码匠：在JavaScript中，存在着两种不同的变量类型，一种是值类型变量，一种是引用类型变量。其中数组、对象、函数都属于引用类型变量，数值、布尔值、null、undefined、字符串属于值类型变量，不同类型变量在参数传递方面有不同的运行机制。结果不同的两个实例实例1 var user = 'HTML5学堂'; var newUser = user; newUser = '码匠'; console.log(user); console.log(newUser); 实例2 var use

2018-03-13

3.4K0

原生JS | 数据类型检测，并没你想象的那么简单

HTML5学堂-码匠：看上去，JavaScript中的数据类型检测，并没有什么难度，但是……它包含了不少的知识，如果你只知道一个typeof的话，那很建议你读读这篇文章，加强一下~ 最近一个关系很不错的朋友在跳槽，面试一家大型知名互联网公司的时候，面试官问了一个看上去“超级”基础的问题：如何进行数据类型的检测啊？面试官：能告诉我如何进行数据类型的检测吗？码匠好友：typeof啊~ 面试官：还有吗？码匠好友：instanceof 面试官：还有别的吗？你了解几种？码匠好友：jQuery的isArray、

2018-03-13

9520

原生JS | 随机抽取不重复的数组元素 —— 有没有更好的方法？

html5 javascript

HTML5学堂-码匠：从数组中随机抽取不重复的元素，构成新数组，拥有多种方法，来看看你用的方法性能如何？效果的功能需求从一个数组当中，随机抽取数个元素，构成新数组，要求这些元素不能重复。（即随机获取不重复的数组元素）相关说明：在此处依照“构思难度”和“性能”两方面出发，提供了四种不同的实现方法。方法1：较为“传统”的实现方法基本实现思路从第二次随机抽取的元素开始，需要将抽取的元素与当前新数组的已抽取元素相比较，如果相同，则重新抽取，并再次执行比较的操作。代码实现 var arr = [0, 1

2018-03-13

8.8K1

原生JS | 作用域

html5 javascript

HTML5学堂-码匠：作用域那些必须掌握的知识，还有大量作用域案例练习与分析，快快进来！作用域的基础知识在JavaScript中，每个变量会有一个有效区域（范围），这个就是作用域。一个变量在其作用域内是可以被访问的，在作用域外不能被访问。全局作用域与局部作用域变量的执行环境有两种：一种是全局，另一种是局部（如：放在函数里面）。全局变量在window环境下声明的变量，或者可以理解为非函数内声明的变量，称为全局变量。全局变量存在于整个JavaScript当中，在任何地方都能被访问和修改。局部变量

2018-03-13

4.7K0

JavaScript | 选中并获取多行文本框内容的效果

html5 html javascript

HTML5学堂（码匠）：文本操作一直是开发中不可避免的存在，用户选中的文本内容，是否可以进行获取并处理到需要的位置当中？如果可以，这样的操作到底需要使用到哪些方法呢？本文主要内容 1. 目标效果展示

2018-03-13

5K0

jQuery特效 | 导航底部横线跟随鼠标缓动

javascript jquery

HTML5学堂（码匠）：jQuery来实现如下特效 - 在导航底部存在一条横线，跟随着鼠标缓动到相应导航项底部。 2月初，接收到了公众号读者的效果需求，希望能够讲解这样一个实例：横排的导航，下边框是

2018-03-13

8.6K0

JavaScript | 函数定义的两种方法；预编译与执行

HTML5学堂（码匠）：在JavaScript当中，函数的定义有两种常见方法，这两种方法有何不同？与这种不同点息息相关的“预编译与执行”又是什么意思？ 1.如何定义函数方法1：函数声明方法2：

2018-03-13

8120

原生JS | 导航底部横线跟随鼠标缓动

html5 jquery javascript

功能效果功能需求明确横向导航条；当鼠标在导航区域当中左右移动时，横线跟随鼠标移动。鼠标跟随特效结构分析与jQuery实现方法当中使用的结构有所不同，为了更好的获取标签，所以使用如下代码结

2018-03-13

7.1K0

前端特效开发 | 点击查看大图相册效果

HTML5学堂（码匠）：图片的展示是一个网站中最吸引人的区域，除了图片本身的内容精彩以外，常常还会有各种各样的展示形式。而对于前端开发来说，一个精美的图片展示效果也往往是需要花费很多时间来构思的，所以

2018-03-13

2.8K0

“鼠标移入显示悬浮框”特效，也可以“高大上”

HTML5学堂（码匠）：网站中最为常见的一种特效——鼠标移入元素，出现介绍信息的悬浮框，要么是淡入，要么是单方向的滑入，总觉得太单一了有木有？其实，稍微调整一下，这个效果就可以变得“高大上”起来，虽然

2018-03-13

5K0

前端特效开发 | 图片翻转的制作

HTML5学堂（码匠）：在前端开发中，针对效果层面的开发，使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果，我们能否考虑借助某些简单方便的操作来替代原生JS的使用呢？本

2018-03-13

3.9K0

前端特效开发 | JS实现聚光灯看图效果

html5 javascript

HTML5学堂（码匠）：昏暗的场景下，查看任何的图片、效果都会给人不适的感觉，所以人们往往喜欢在明亮的场景中来体验世界的美好。对于前端开发来说，想要让用户能在更明亮的状态下查看各种图片，那就必须为页

2018-03-13

4.3K0

CSS3过渡，不再为JS动画而犯愁

HTML5学堂：在页面开发中经常会借助JS来书写大量的特效，以获得较好的页面感官效果。但是真正到了使用JS来操作的时候，往往会因为思维逻辑不清晰而显得很凌乱。同时为了避免JS对页面的性能产生影响，我们今天就来尝试下不借助任何JS，转而使用CSS3过渡来书写出更好的动画效果。本文主要内容一、Transition是什么二、Transition的语法三、Transition的属性值四、Transition的使用五、总结一、Transition是什么 W3C标准中对CSS3的transition是这样

2018-03-13

2.1K0

JS 吸顶导航，告别“回到顶部”

当我们浏览页面篇幅较大，浏览过半的时候想回到导航位置，只能通过往回滚动或通过”回到顶部”重新滚动到导航位置，这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式，吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前，为用户提供了极大的便利与交互体验。本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么如图：吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方，如

2018-03-13

7.5K0

Gulp 定制专属提速“外挂”（下）

缓存 gulp javascript npm html

友情提示：推荐阅读时间10分钟 + 练习时间10分钟上一期给大家分享了Gulp插件的安装与使用，只要掌握了Gulp插件安装的流程与配置，对于其他Gulp插件的使用基本上就没有太大的问题。毕竟Gulp的插件太丰富了，大家也没有太多的精力把所有的插件都去研究一遍。当一个网站进行改版升级的时候，会遇到静态资源版本更新的问题，那么对于前端开发工程师来说，该如何解决这个问题？所以今天要和大家一起探讨如何解决静态资源版本更新的问题和package.json的作用。相关阅读：前端工程化 | 定制专属提速“外挂”（上）

2018-03-13

1.1K0

点击加载更多

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态