javascript
文章平均质量分 62
stones4zd
开博目的是为了积累知识,坚持学习…
展开
-
JavaScript练手小技巧:JS 随机数小技巧
JS 里利用可以产生0-1之间的随机小数。可以用随机数做一些有趣的事情。原创 2024-06-18 22:35:59 · 422 阅读 · 0 评论 -
JavaScript练手小技巧:仿米哈游官网人物跟随鼠标位移效果
最近,有同学找到我,说:老师,我想模仿米哈游官网。我说:可以,很不错的。她说:有些效果有点难,能不能帮我看下。于是,我就简单大概粗糙的讲解了下大致的原理,毕竟米哈游官网不是那么好仿的。今天,太累了,就突然想到这个,就模仿其中一个效果来做做。代码已经挂在gitee 上了。(话说,我让大家把作业挂上gitee,但是总有那么几个同学不做,哎)原创 2024-03-30 00:09:35 · 548 阅读 · 2 评论 -
JavaScript练手小技巧:数字反转时钟
既然可以实现翻转数字了,肯定就可以跟 JS 相结合去完成一些数字展示效果。比如,数字反转时钟。原创 2024-03-17 21:49:26 · 524 阅读 · 0 评论 -
JavaScript练手小技巧:一文看懂<script>标签的 ansyc 和 defer
所以,JS 代码的位置,个人建议放到 body 标签的最后,HTML内容的后面。不用纠结给 script 标签添加 defer 还是 ansyc 属性。原创 2024-03-02 16:36:44 · 395 阅读 · 1 评论 -
JavaScript 练手小技巧:音乐播放器的歌词显示
暑假了,还是不能让自己闲着,学点自己感兴趣的知识,写点自己喜欢的代码。今天写了一个播放器的雏形,带歌词显示。没去自定义播放器,主要是写歌词显示效果。效果图如下:首先当然是要准备一个 mp3 文件。原创 2023-07-27 22:58:05 · 1283 阅读 · 3 评论 -
JavaScript 练手小技巧:HTML5 的 dialog 标签制作对话框
对话框,在应用中常常用来做(如,登录、删除信息等)。原创 2023-02-07 00:41:42 · 8258 阅读 · 2 评论 -
JavaScript 练手小技巧:拖拽事件、把图片拖拽入页面
HTML5 新增了拖拽事件 drag,利用它可以实现把外部文件拖拽入页面中,可以实现文件的读取,上传等等功能。原创 2023-01-30 22:01:36 · 3058 阅读 · 0 评论 -
JavaScript 练手小技巧:打字小游戏
放假闲来无事,一群小屁孩想玩我的电脑。字都不会打,还玩电脑。用 js 写一个打字游戏,打不到 100 分,就不要玩我的电脑~~~!!!整体界面如下所示,一切从简~原创 2023-01-28 14:13:12 · 1582 阅读 · 0 评论 -
JavaScript 练手小技巧:键盘事件
键盘事件应该是鼠标事件之外,使用频率最高的 JS 事件了吧?一般用于或者。键盘事件由用户击打键盘触发,主要有keydown、keypress、keyup三个事件。原创 2023-01-28 13:48:43 · 3273 阅读 · 0 评论 -
JavaScript练手小技巧:用Canvas绘制饼图
饼图是数据可视化很重要的一个组成部分。这个案例虽然没有 Echarts 那么好看,但是作为了解Canvas的基础案例,还是很有必要练习下。原创 2022-12-09 21:45:12 · 996 阅读 · 0 评论 -
JavaScript练手小技巧:我破解了原神官网全屏滚动的秘密
最近居家教学上网课。除了上课,实在不想做学校安排的其它任务,太烦了。果然在家没的工作动力啊~ 但是学习、coding、追番的动力还是有的。今天来做一个模仿原神官网的全屏滚动效果页面。原创 2022-11-21 00:45:15 · 2663 阅读 · 1 评论 -
JavaScript 练手小技巧:做一个todolist,事务记录列表
1. 可以添加事务2. 可以删除事务3. 可以标注完成了哪些事务,并且可以删除已经完成的事务。原创 2022-08-12 15:46:44 · 510 阅读 · 4 评论 -
JavaScript 练手小技巧:数组的filter方法
filter 的中文含义“滤镜,过滤”。所以,数组的 filter 的方法,简单来说就是过滤数组的元素,保留自己需要的,去掉不需要的。原创 2022-08-12 15:25:21 · 561 阅读 · 0 评论 -
JavaScript 练手小技巧:十几行代码搞定点击复制指定标签内容
在网上经常看到一些点击复制一段文本的内容,比如 bootcss上的点击复制文件地址。这是怎么做到的?原创 2022-08-07 14:36:04 · 915 阅读 · 0 评论 -
JavaScript 练手小技巧:利用cookie保存登录用户名和密码
今天刚从会议室出来,就有同学问我如何使用cookie。我问:你想干嘛?答曰:想做一个能保存用户名密码的效果。照着书上敲了一次,但是有问题,没找到原因。我说:这也太简单了吧。三分钟讲清楚。一、什么是cookiecookie 是浏览器(客户端)用以存储网站信息的小型数据。小到不能超过4KB。cookie的数据可以由服务器返回给浏览器,用于存储一些数据,便于下次访问使用。JS可以直接获取或者写入cookie。二、JS写入或者读取cookie1. 写入 cookiedocume原创 2022-03-25 00:24:01 · 5430 阅读 · 1 评论 -
JavaScript 练手小技巧:过年了,用JS写一幅春联吧
过年了,写幅春联玩玩。主要知识点:1. 控制文字的上下排列样式: writing-mode:vertical-lr;2. 计时器: setIntervalHTML结构: <div class="box" id="box"> <div class="hengpi">一代键客</div> <div class="duilian d1"> 思前想后几行代码筑万载春秋 ..原创 2022-01-27 23:05:47 · 1074 阅读 · 0 评论 -
JavaScript 练手小技巧:原生JS获兄弟标签
兄弟标签,就是同一个父标签下的同级标签,不包括目标标签自己。一般对兄弟标签的应用,有三种情况:找所有的哥哥标签,找所有的弟弟标签,找所有的兄弟标签。原生的JS,只提供了nextElementSibling、previousElementSibling 两个找兄弟标签的属性,还只能找【紧邻】的标签。所以,要找兄弟标签,还需要自己封装函数。let item3 = document.getElementById("item3");// 找所有的【哥哥】标签function preSilin.原创 2021-12-07 11:58:38 · 1794 阅读 · 4 评论 -
JavaScript 练手小技巧:animationend 事件及其应用小案例
animationend 事件在 CSS 动画完成后触发。CSS 动画播放时,会发生以下三个事件:animationstart - CSS 动画开始后触发 animationiteration - CSS 动画重复播放时触发 animationend - CSS 动画完成后触发在这三个事件函数中,均可以使用 event.animationName 属性,判断是在执行哪个动画。个人觉得animationend 事件用的多一点。案例1:标签的隐现<button type=.原创 2021-06-13 00:41:40 · 2184 阅读 · 5 评论 -
JavaScript 练手小技巧:#RRGGBB 和 rgb(255,255,255)颜色代码相互转换
看到有人在 CSDN 上写颜色的转换代码,突发奇想,用 JavaScript 也写一个。一、相关知识点(1)常用颜色代码方式,有两种 #RRGGBB 和 rgb(255,255,255)用 #RRGGBB 规定十六进制颜色,其中 RR(红色)、GG(绿色)和 BB(蓝色)十六进制整数指定颜色的成分(分量)。所有值必须在 00 到 FF 之间。 rgb(255,255,255),三个 0-255 的颜色值,分别是对应 #RRGGBB 的 RR(红色)、GG(绿色)和 BB(蓝色)。此外,用..原创 2021-03-14 20:41:55 · 3519 阅读 · 1 评论 -
JavaScript 练手小技巧:JavaScript 的 Falsy 数据让人迷糊的一个点“==”
falsy 数据,就是 JavaScript 中转为 Boolean 值 为 false 的数据。在 JavaScript 中,这样的数据一共有 8 个:false 布尔值 false 0 数值 0 -0 数值 负 0 0n 当 bigInt 作为布尔值使用时, 遵从其作为数值的规则.0n是falsy值. "", '', `` 这是一个空字符串 (字符串的长度为零). JavaScript 中的字符串可用双引号""...原创 2021-03-12 11:45:23 · 245 阅读 · 2 评论 -
JavaScript 练手小技巧:我用canvas画出了王者荣耀英雄属性的雷达图
新年伊始,学习不止。顺带恭喜下自己博客点击量突破 20w~啦~~ 不容易啊~~--------------------------------------------------------------------------王者荣耀的英雄介绍资料里,都有个雷达图,以直观的形式可以分析这个英雄的优缺点。如下图所示:图片来自网络。为了避嫌,免得引发口水战,我隐去了具体的英雄,只谈雷达图的绘制。先看效果。HTML准备一个 canvas。<canvas id="my原创 2021-02-11 19:43:57 · 4087 阅读 · 11 评论 -
JavaScript 练手小技巧:ES6利用 class 定义类和对象
今天看资料,看到了一个高手写的代码,甚为佩服,学了过来,再次理解了下 JavaScript 中 class 定义类和对象。该代码使用 class 定义了一个圆圈。利用 canvas 绘制一个圆。HTML:<canvas id="cvs" width="400" height="400"></canvas>JavaScript:class Circle{ constructor(ops) { this.x = 0 ; .原创 2021-02-06 21:33:59 · 774 阅读 · 3 评论 -
JavaScript 练手小技巧:canvas 中 beginPath() 的重要性
例1:<canvas id="cvs" width="400" height="400"></canvas>var ctx = document.getElementById('cvs').getContext('2d');ctx.beginPath();ctx.moveTo(100,50);ctx.lineTo(250,50);ctx.stroke();ctx.moveTo(100,150);ctx.lineTo(250,150);ctx.strokeSt原创 2021-02-02 23:19:41 · 2222 阅读 · 4 评论 -
JavaScript 练手小技巧:简单而实用的跳转页面到指定位置
曾几何时,我们在做页内滚动的时候,非常麻烦,需要判断页面滚动距离甚至用到各种计时器,条件判断等。比如,一个小小的回到顶部。最简单的做法,可以用 超链接带 # ,返回顶部,但是却没有了滚动效果。<a href="#">backtop</a>现在好了,DOM 的方法Element.scrollIntoView() 可以轻松搞定。element.scrollIntoView(); // 等同于element.scrollIntoView(true)element..原创 2021-01-28 12:03:51 · 1063 阅读 · 2 评论 -
JavaScript 练手小技巧:JS 获取选中的文本或者禁止选择文本
有时候,我们需要获取鼠标选中的文本部分,可以利用 window 的selection 对象做到。利用window.getSelection() 可以得到 window 的 selection 对象。HTML 部分:<div id="box"> 测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>当选中文本的时候,最终鼠标会松开(mouseup)。所以,需要用到 mouseup 事件。JavaScript 部分:..原创 2021-01-26 23:34:59 · 2071 阅读 · 4 评论 -
JavaScript 练手小技巧:AJAX加载单张图片展示进度
终于放假了,可以做点自己喜欢的事情了,不过也要坚持学习啊。--------------------------------------------------用手机上网,经常看到加载进度条,尤其是加载图片的。做过多张图片的加载进度,但是对于单张图片,特别是图片比较大的时候,需要进度条告诉用户加载进度,且可以提高用户体验。传统的加载肯定不行,需要用到 AJAX 加载,AJAX 加载有个专门的进度事件 progress。具体demo 如下。实现目标:加载某图片,且显示加载百分比进度;加.原创 2021-01-23 19:04:24 · 1999 阅读 · 5 评论 -
JavaScript 练手小技巧:页面高亮操作提示和蒙板
在页面上,有时候会遇到操作提示,如下图所示。可以很直观的告诉用户,关键的操作在哪里,有什么做作用。需要说明的是,被高亮的部分,并不是目标的真实标签,而是用的其他标签模拟的。真实的标签被 mask 层盖住了,在下方呢。标签高亮的部分和操作提示框,都是用 js 动态生成的。这里关键的知识点:要用 JS 获取目标标签的位置。el.getBoundingClientRect() 可以获得标签距离窗口的位置。window.pageXOffsetwindow.pageYOffset则是获取页面原创 2021-01-02 22:09:12 · 814 阅读 · 1 评论 -
JavaScript 练手小技巧:动画本质和应用
一、JS动画本质JavaScript 的动画,本质来说,就是让标签动起来。而想要让标签动起来,其本质就是改变标签属性,比如高宽,左边距,上边距,透明度等。JavaScript 动画的本质就是间隔极短的时间(毫秒),持续改变标签的某个属性。一般用用定时器,就能得到动画效果。定时器,可以选择 setInterval, setTimeout,以及 requestAnimationFrame。以控制 div.box 的移动为例子。setIntervallet aniFun= function(原创 2020-12-20 01:36:58 · 450 阅读 · 3 评论 -
JavaScript 练手小案例:基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了。昨天还有个同学跟我说,你好久没更新博客了。。甚为惭愧~~正好12月来了,今天开一篇。最近上课讲到了 SVG,不晓得同学们理解到没。 -_-!!!图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下。效果要求点击控制块,图片切换。切换的时候使用圆形做遮罩,由小到大变化。每次切换的时候,圆的位置随机产生。主要知识点1. SVG 的裁切(遮罩),clip-path 的运用。2. SVG 利用原创 2020-12-13 16:25:00 · 4072 阅读 · 16 评论 -
JavaScript 练手小案例:Canvas时钟效果
时钟效果见多了。今天,用 Canvas 做一个时钟效果。HTML 很简单,就是一个 Canvas 标签。<canvas id="can" width="800" height="500"></canvas>重点在 JavaScript。 let can = document.querySelector("#can"); let ctx = can.getContext("2d"); let myset = setInterval(functio...原创 2020-10-16 22:07:34 · 429 阅读 · 3 评论 -
JavaScript 练手小案例:超级简单又炫酷的图片手风琴效果
手风琴效果很流行,可以任意展开收缩内容,甚是好看。特效要求鼠标移动到图片上,当前图片放大,其他图片收缩。HTML<div class="pics"> <ul id="picList"> <li><a href="#"><img src="images/pic1.jpg" alt=""></a></li> <li><a href="#">&l原创 2020-08-21 22:25:52 · 1569 阅读 · 1 评论 -
JavaScript 获取当前样式
<div id="box" class="box"> sss</div>使用外部样式文件 1.css:*{ margin: 0; padding: 0;}.box{ width: 320px; background: #f00; transform:translateX(30px);}JS 获取当前样式方法:let getStyle = function(tag,prop){ return ta.原创 2020-08-20 17:23:26 · 344 阅读 · 0 评论 -
一分钟看懂JavaScript里的ES5和ES6中类的创建和继承
JavaScript 的面向对象和继承,是经常用到的方式和方法。一、传统方法写类(ES5)// 1. 构造函数let Person = function({name,age,height}={}){ this.name = name ; this.age = age ; this.height = height ;};// 2. 原型添加方法Person.prototype.showName = function(){ console.info(`${thi原创 2020-08-18 21:59:05 · 384 阅读 · 0 评论 -
JavaScript 练手小技巧:图片放大镜效果
先看效果图:(为了减少体积,压缩了画面质量,也可以参考淘宝,天猫之类的产品详情展示页的放大镜效果)整体思路1、整个结构分为 小图(左边),大图(右边)两部分。为了方便计算,大图的宽高是小图的 2 倍。2、小图有个遮罩 mask 部分,大图的区域是这个 mask 宽高的 2 倍。整个效果就是:mask 在哪里,大图就展示哪里。3、mask 和大图的图片,都要能任意移动,所以它们都是绝对定位的。4、mask 要跟随鼠标,因此要获取鼠标在小图中的坐标。坐标的获取,可以参考我这篇文章1.原创 2020-08-16 22:34:22 · 425 阅读 · 8 评论 -
秒懂JavaScript之事件委托
事件委托,又叫事件代理。一般来说,如果标签需要添加事件,我们都会直接给它添加事件处理程序就好了。let ul= document.getElementById("ul"); let myFun = function(event){ console.info( lies.length );};ul.addEventListener("click",myFun);但是,如果是很多的标签需要添加事件处理呢?比如我们有 100 个 li,每个li都有相同的click点击事件,可能我...原创 2020-07-24 23:53:39 · 225 阅读 · 0 评论 -
JavaScript 练手小技巧:如何判断设备是否联网
Navigator 对象的 onLine 属性,可以判断设备(电脑,手机,平板)是否在线。 navigator.onLine 返回布尔值,表示浏览器的联网状态。正常联网(在线)返回 true,不正常联网(离线)返回 false。// 判断浏览器是否上网if (navigator.onLine) { alert('online')} else { alert('offline');}同时,当浏览器网络状态发生改变的时候,会触发 window 的 online 和 offl原创 2020-07-08 00:41:58 · 396 阅读 · 0 评论 -
JavaScript 练手小案例:原生JavaScript制作 Canvas 随机刮奖,抽妹子图
啥也不说,先看效果图。刮奖是一个很有意思的东西,充满了神秘,因为谁也不知道挂出来的是什么,总是期待有惊喜。网上的刮奖大多用的“虚假刮奖”,就是上面一个 canvas 层,下面一个图片层。把canvas “挖空”,露出了下面的图片。虽然,也可以实现刮奖效果,但是总觉得太low。要用一个canvas 就搞定,才完美。今天,我就来写一个 canvas 随机刮妹子 的案例。第一步:HTML<div class="box"> <canvas class="myc原创 2020-06-26 17:17:38 · 1355 阅读 · 0 评论 -
IBM的AJAX入门系列文章
多年前,在 IBM 网站上看到的 AJAX 系列文章,甚是经典。当年 IBM 开发者社区的截图。保存的本地文件,样式走样了。但是不影响经典的内容。时隔多年,居然这些文章还在。虽然界面几经改版,但是经典的内容用不下架。IBM 真是良心啊~~http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ http://www.原创 2020-05-22 23:29:14 · 357 阅读 · 0 评论 -
一文看懂 ES6 解构赋值
一、什么是解构赋值ES6中,通过解构赋值,可以将属性 / 值从对象 / 数组中取出,赋值给其他变量的操作就是解构赋值。在下图上可以发现左侧和右侧都必须是数组,左侧可以定义 n 个变量,那么与之对应的右侧也需要有相应个数的变量值,我们左侧的变量从右侧取值的操作就是解构赋值。二、数组解构在上面的图示里可以看出来,数组解构就是从数组中提取值,只要等号两边的模式相同,左边的变量就会在右侧的数组里查找对应位置的值进行赋值操作。数组结构的应用主要有: 对一维数组解构 对多维数组解原创 2020-05-22 20:43:54 · 3419 阅读 · 0 评论 -
前端课程视频列表-新增移动端开发基础【2020年8月15日】
因为疫情,在家上网课。借用了网络平台,感觉录制的视频可以成一个系列了。做一个清单出来,方便后面的同学观看。课程概述 webstorm浏览器设置 webstorm 软件基本使用 ...原创 2020-04-28 15:53:30 · 1430 阅读 · 2 评论