JS
文章平均质量分 74
以JavaScript脚本语言作为驱动实现的动态效果,或JavaScript的基础知识分享。
我不是费圆
不积跬步无以至千里,不积小流无以成江海
展开
-
JS、Vue鼠标拖拽
通过css定位属性,对鼠标经过位置进行计算,附加给top及left,包含js、vue源码原创 2023-07-13 18:25:12 · 1671 阅读 · 0 评论 -
JavaScript 在一个区间里求素数
1.首先这个数本身不是素数; 2.这个数可以分解为 a 和 b的乘积; 3.a 和 b 都是素数解题思路:原创 2022-10-13 21:45:00 · 1084 阅读 · 1 评论 -
JS 递归 数组嵌套回显
JS 递归 数组嵌套回显原创 2022-03-17 21:39:24 · 1204 阅读 · 2 评论 -
JS实现登录、注册,Canvas图形二维码
原生JS实现登录注册,Canvas绘制图片二维码,本地缓存模拟数据库,入门三周可以学。网页仿“卷皮网”,如有侵权,请联系删除。从构思到实践花了两周,不准备公开源码设计思路及部分引导如下:设计思路:首先你得有手,学过JS,没吃透不要紧,明白JS能做哪些事;用onblur 事件对输入的用户名进行验证,也可以用oninput ,检测到用户名存在显示欢迎文本,或让其头像昵称显示,如未检测到则提示注册;正则验证小gif图标,通过修改其src 或css隐藏、显示来动态切换,当全部正则通过,则提交按钮可原创 2020-12-22 00:01:54 · 829 阅读 · 0 评论 -
乐淘网侧边栏动画
在乐淘网买衣服时无意中发现了侧边栏的动画效果,没禁住诱惑尝试了一下,还挺难,不过做出来了。如有侵权请联系删除“乐淘网”官方线上地址,大额品牌超低折扣! 太懒了没有加图片,但效果是一样的,这里用源生JS写的,思路比较朴实无华:·定义外部变量来判断按钮的点击状态;·当按钮被点击时让侧边栏宽度还原或缩小;·遍历每一个列表项,并调用动画;·改变外部变量的值代码如下:<!DOCTYPE html><html lang="en"><head> <me原创 2020-12-14 00:18:24 · 376 阅读 · 4 评论 -
switch循环与@click
工作稳定,继续发帖。switch循环的用法: switch(this.sum){ case 1: this.msg = "素衣云袖,古道悠悠" break; case 2: this.msg = "摸不到,皆是离愁"; break; } 传入一个参数,开始循环,参数可以是数字或布尔,switch等于是 if 加执行语句的简写,比如上面这段代码,如果用 if 语句来写,那就.原创 2020-11-20 12:00:06 · 596 阅读 · 0 评论 -
ParseInt 第二个参数
parseInt() 函数可解析一个字符串,并返回一个整数。parseInt(string, radix) string 必需,要被解析的字符串。 radix 可选,表示要解析的数字的基数。 该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0,则数字将以 10 为基础来解析。 如果它以 “0x” 或 “0X” 开头,将以 16 为基数,也就是16进制。 如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。返回值:被解析后...原创 2020-11-02 08:22:43 · 3073 阅读 · 1 评论 -
JS不使用替换进行替换
首先我们从题意中可以读出:“不能使用比较、查找、替换”函数,也就是说我可以使用分割、组合方法。于是我写出了如下代码: var str = "我喜欢南极和北极,喜欢荒漠大戈壁"; str = str.split(''); console.log(str.join('')); for(var i=0;i<str.length;i++){ var temp = str[i]+str[i+1]; if(temp=="喜欢"){ str[i]="讨"; .原创 2020-10-30 19:16:36 · 426 阅读 · 0 评论 -
Canvas圆形时钟
今天带来一个圆形时钟,用JQ编写的Canvas 代码。Canvas 的神奇之处就在于,可以自行绘制图片不需要外部引入,当你深入了解这项技术的时候,你也会忍不住赞叹他的神奇之处。 虽然我一再强调,自学也是人生的一门必修课。但哪怕我接连几天不眠不休写出了 Canvas 教程,大家还是置若罔闻,要求我在代码中写下详细注释。从我的角度来讲:不写注释可以减少代码量,大批量的注释会显得十分冗余,我出的 Canvas 教程如果大家认真阅读、练习的话,读懂这些代码不成问题。就好像对着官方文档我可以手写JQuery原创 2020-10-11 12:27:59 · 3833 阅读 · 19 评论 -
Canvas监测雷达
我也学人家发一个库存,本人承诺第一次这样干。因为刚刚删改了21篇博客,怕明天周排名会掉很多。删改的博客只有小部分留下了,大部分直接清除了,其中6篇在审核中。尽管没有人要求我这样做,但物竞天择,如果我的博客整体质量很差,注定在CSDN上走不了很远。一遍遍的删改不仅能让我认识到自身的不足,明确以后的优化方向,还可以提升自己博客的整体质量,大家不用为我惋惜。效果图:<!doctype html><html><head><meta charset="utf-原创 2020-10-05 23:23:59 · 1432 阅读 · 16 评论 -
CSS全屏换肤
50行代码换5种肤色,包含透明先把代码奉上,自取自用。直接创建html文件,直接粘贴进去就能用,不能用随便骂。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width: 400px;height: 400px;background-color: red;bor原创 2020-08-12 19:50:03 · 6109 阅读 · 45 评论 -
Canvas线条花环
可喜可贺!庆祝电脑起死回生,庆祝一天好过一天。深夜给电脑安装了开发插件,第二天莫名死机,问了好多人都说主板坏掉了,需要重装系统。我先是对着 宾夕法尼亚大学 的方向拜了拜,又是一番操作,终于唤醒了老伙计度假的心。 写一个Canvas 动画送给你们,十五的月亮十六圆,多给家人一些陪伴。 今晚我会出一期Canvas 动画详细教程,如果你欣赏我的动画,可以添加收藏,请查看我的置顶文章,我将不胜感激。请看源码:<!DOCTYPE html><html lang="en" &g.原创 2020-10-02 14:54:55 · 1705 阅读 · 5 评论 -
JQ俄罗斯方块儿
今天教大家引入 jQuery 插件,学会的同学可以玩上面的俄罗斯方块儿,没学会的同学请在下方留言,表明你遇到的困难,或者私聊我寻求帮助,jQuery 能帮助我节省很多代码量,这样我才能更快更好的更新作品。点击“ 引入jQuery ”,进行插件学习。 学会的同学直接考走源码,引入运行即可<!DOCTYPE html><html><head><meta charset="UTF-8"><title>精致俄罗斯方块</title&..原创 2020-09-28 20:38:29 · 5700 阅读 · 49 评论 -
Canvas悟空推箱子
Canvas悟空推箱子 “学如逆水行舟,不进则退”,工作之余我总会浏览一些先进前端知识以增强自己的知识储备,偶尔也会试着开发或模仿小游戏、程序、app 。昨天在 站长之家 发现了这个游戏,触动很大,先是玩了一晚上,只过了13关,今天把注释写上了,截取了前40关分享给大家,希望大家在玩耍之余能抽出时间学习或了解前端,前端是门手艺,它会像筷子一样离不开人们的生活。 个人能力有限,只能解答博友们一些浅显的问题,甚至不如百度百科及时、准确,如今前端就业形式一片大好,在一线城市薪资过万,优秀的前端工程师只需要原创 2020-09-07 20:44:38 · 21602 阅读 · 61 评论 -
3D旋转标签云
3D旋转标签云原创 2020-09-04 08:34:09 · 3985 阅读 · 26 评论 -
Canvas线条动画
Canvas线条动画 简单的Canvas动画,代码只有71行,试试吧!没有谁天生就会,用这个动画,做为你的Canvas小结。 如果你觉得我的代码还算有趣,在你的学习中能有所帮助,请查看我的置顶文章,我由衷感谢!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="jquery.js"></script> <title>原创 2020-09-03 19:23:39 · 7634 阅读 · 40 评论 -
JS新版激流勇进附地图详解
8月份激流勇进没有多余的注释,把所有的东西都交给大家。球球的弹力、重力等都已标注清晰,必要的注释也已补齐,地图密码如下:①通道球体可自由通过,不受任何限制②墙壁移动受阻,行动壁垒③水减速,可在水中游动④气流默认向上,按 ↑ 可顺气流飞起⑤弹簧落在弹簧上,可增大弹力⑥泥阻碍移动,无法叠加弹力⑦皮肤像变色龙一样,有(透明)色⑧终点触摸通关⑨岩浆触摸死亡⑩特殊墙壁能阻碍移动,能转换为通道⑪机关打开所有的10,将其转原创 2020-09-02 01:18:50 · 6281 阅读 · 32 评论 -
JS迷你键盘
CSS炫酷的迷你键盘支持键盘点击事件,有响应效果<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>奇酷教学键盘</title><style> *{margin:0;padding:0;list-style-type:none;} .keyboard { display: grid; g原创 2020-08-27 19:32:11 · 7466 阅读 · 51 评论 -
情人节送给粉丝的礼物
怦然心动感谢你们一直陪伴至今,我不善于表达,我对你们的感激都在这张画布里。代码不算多,特效也很一般,往后的日子全力以赴发表优秀文章,愿你们web学习一帆风顺,所向披靡。把东坡居士的祝愿送给你们:;愿你们“但愿人长久,千里共婵娟”;愿你们“春宵一刻值千金,花有清香月有阴”;愿你们“鸳鸯被里成叠夜,一树梨花压海棠”;<!DOCTYPE html><html lang="en"><head> <meta char原创 2020-08-25 20:42:55 · 5865 阅读 · 49 评论 -
JS打砖块,童年的回忆
打砖块 —— 敲碎屏幕奖励一百块睿智的程序员,你有想过自己写一个H5小游戏吗?打砖块大家都不陌生吧,写一个给孩子玩吧!<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ width:800px原创 2020-08-25 08:34:25 · 1844 阅读 · 25 评论 -
JS--你没玩过的激流勇进
我做的激流勇进,也是你从未玩过的激流勇进我称它为:偷火种的普罗米修斯纯代码不含图片,复制粘贴即可使用新手请点击下方链接,包教包会一次就能学废<!doctype html><html><head><meta charset="utf-8"><title>Canvas激流勇进</title><style>* { margin: 0; padding: 0;}bod原创 2020-08-24 20:00:06 · 8998 阅读 · 61 评论 -
JS贪吃蛇
用JS代码实现网页版贪吃蛇小游戏老规矩,代码自用自取,复制粘贴直接使用,喜欢的话可以查看博主其它文章,贡献一丢丢的浏览量,感激不尽。<!DOCTYPE html><html><head> <title>贪吃蛇</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"&g原创 2020-08-21 00:33:45 · 12156 阅读 · 65 评论 -
阿波罗的轻语
JS中的Canvas动画几天没写博客了,今天又忙到很晚,教大家做一个波浪花环吧效果图如上所示:老规矩先把代码给大家,新建一个html文档(新建一个txt文本文档,把后缀名改为“ .html”),以记事本打开,把复制好的代码粘贴进去,“ 保存 ”,退出,双击或右键选择浏览器打开。祝大家前端学习愉快,在今后的日子中与君共勉<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g原创 2020-08-20 21:42:10 · 9196 阅读 · 31 评论 -
正则表达式入门
有些知识,我们只需要付出一点点时间,把它掌握了,会大大提高我们的效率,节省我们的时间。正则表达式就是这样的知识,但是,作为入行好几年的我来说,正则表达式一直是一头雾水,今天决定把它好好研究研究。1.什么是正则表达式正则表达式,又称正规表示式、正规表示法、正规表达式、规则表达式、常规表示法(英语:RegularExpression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。在很多文本编辑器里,正则表达式.原创 2020-08-15 15:38:20 · 834 阅读 · 0 评论 -
JS键盘码
js 里面的键盘事件经常用到,百度了比较全的键盘码,大家自用自取1 keyCode 27 = esc2 keyCode 8 = BackSpace BackSpace3 keyCode 9 = Tab Tab4 keyCode 12 = Clear5 keyCode 13 = Enter6 keyCode 16 = Shift_L7 keyCode 17 = Control_L8 keyCode 18 = Alt_L9 keyCode 19 = Pause10 keyCode 20 =原创 2020-08-15 09:15:38 · 865 阅读 · 21 评论 -
JS模块化和使用
JS模块化和使用很久以前就知道js模块化开发可以使用require.js和sea.js,就一直没去看看。最近在了解查看的,度一下require.js相关的博客和文章,写得真是操蛋的疼,都是互相抄来抄去,博主应该都没有自己实际去敲过,哪怕给我写一个完整的简单应用示例我都可以上手,结果把自己折腾得……后面也看来sea.js,简单明了,上手容易多(主要是别人写的博客文档好)。什么是模块化模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种原创 2020-08-13 08:38:37 · 4276 阅读 · 22 评论