- 博客(60)
- 收藏
- 关注
RSS订阅原创 HbuliderX升级到最新版本后，运行报404错误
今天使用HBuilderX软件的时候，见右下方提示有新版本，于是就点了“检查更新”，升级完成后，运行页面在浏览器预览的时候，总是报404错误，文件找不到。
2024-04-01 14:26:11
204
原创 分钟倒计时效果实现
原以为这样做代码简洁一目了然，结果运行时发现出现了一个新问题，举例说明，min会从2变成02，002，0002，00002，这可不是我希望的，然后想到了一个解决办法，使用字符串的slice(-2)或substr(-2)方法，截取后2位字符，可以解决这个问题。之前在一篇文章中写过倒计时的代码，剩余多少天时分秒，后来见过别人写的一种分钟倒计时代码，它的思路和我实现的思路不同，不是求出两个时间之间相差多少秒，然后转成天、时、分、秒，而是分和秒同时为0时，定时器停止，具体代码如下。
2024-03-26 11:36:10
422
原创 javascript实现的生肖查询
使用switch语句实现的生肖查询，只要输入年份，就可以查询是什么生肖。代码不难，适合初学者练习。/* 左上角 左下角*//* 右上角 右下角*/
2024-03-04 16:39:23
935
原创 javascript实现的星座查询
今天在这个网站http://xzxys.wiicha.com/看到查询星座幸运色的效果，想研究一下代码，结果右键禁用。后来参考了一下别人的代码，琢磨着先实现了一下星座查询的功能，输入月份和日期四位数后，可以查询属于哪个星座，星座效果如下。用CSS代码美化了一下输入框，js代码主要是使用了indexOf判断是否有不合法输入，对这个方法用得不太熟，特意拿来练手，12个月份使用switch语句判断。完整代码如下：<!doctype html><html> <head>
2024-03-03 21:50:06
936
原创 JavaScript实现的计时器效果
在这段代码中，刚开始实现的时候，没有把timer设置为全局变量，而是在函数中使用了var关键字，这样timer是局部变量，结果定时器无法停止。后来去掉关键字var，timer成为全局变量好了，于是最后把timer放在函数外，直接定义为全局变量，这样程序可读性好一些。//开启定时器，前面不能加关键字var ,那会变成局部变量，定时器不能清除，不会从0开始。1.点击“开始”后，按秒计时且“开始”文字变为“停止”；2.点击“停止”，计时停止，文字变为“开始”；//全局变量，从0开始计时，初始值为0。
2024-03-03 10:30:35
867
原创 使用滤镜属性将网页从彩色变黑白
在某些情况下，例如为了表达哀悼或纪念， 许多网站会将页面颜色从彩色调整为黑白灰色。我到网上查找答案，发现有些是通过javascript或jQuery实现的，我试了一下居然无效。后来找到一个方法，是仅用一行CSS代码就能搞定的，只要对body使用滤镜filter: grayscale(100%);
2024-03-02 19:19:19
393
原创 “点击查看显示全文”遇到的超链接默认访问的问题
超链接有默认的访问行为，我觉得自己找到了问题所在，去看了一下html代码，果然，在敲代码的时候，href=“”，里面什么也没有，我改成了href=“#”，就正常了。第二种方法，如果不修改html代码，还可以使用preventDefault()阻止默认行为，传递参数event，在javascript中加上一句 e.preventDefault() ，代码如下。我觉得这是一个很简单的效果，也就几行代码的事，结果点击了以后立刻隐藏不见，控制台代码也不报错，耽误了我很长时间，最后才发现问题出在超链接身上。
2024-02-24 22:36:36
401
原创 vue3中使用return语句返回this.$emit()，在同一行不执行,换行后才执行，好奇怪！
在制作TodoList、TodoInput时很顺利，只是在完成TodoButton这个组件时出了点问题。在点击”全部“、”已完成“、”未完成“三个按钮时，预期的效果不出现，被点击的按钮颜色不变化，没反应。我去翻了return语句的语法格式，发现return和后面的返回值可以是不换行的。上面的代码如果从return的后面换行，改成下面的格式，程序就可以正常的执行。我试了好几次，都是如此。
2023-10-06 17:18:14
357
原创 JavaScript实现广告倒计时和跳过广告
最近打开手机上的app，映入眼帘的都是一个几秒的广告，带有倒计时，当然如果不喜欢的话可以点击跳过，跳过广告其实质应该就是关闭广告。以前用JavaScript做过一个定时关闭的广告，于是把代码完善了一下，加上倒计时效果和实现跳过部分的代码。
2023-09-08 19:30:10
674
原创 JavaScript中的Date()对象getTime()输出-28800000
后来计算了一下，一天是86400000毫秒，这28800000是一天的1/3，应该是8，也就是-8小时。然后我就明白怎么回事了，我以前把重点放在1970年1月1日00:00:00上，没注意还有个UTC。我们所在的时区是东八区，不是格林尼治时间，所以有8个小时的差距是对的。自认为对JavaScript的日期时间对象Date()比较熟悉了，用它做过数字时钟、倒计时等不少案例，Date.getTime()表示自 1970 年 1 月 1 日 00:00:00 UTC（the Unix epoch）以来的毫秒数。
2023-05-15 10:21:04
309
1
原创 MacBookPro 遇到pip: command not found问题的解决
也就是说，把pip写成pip3就好了，就这么简单。命令1:curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py。我惊讶的发现，明明已经装了pip，版本还是22.3.1。后来看到一篇文章说，如果安装的是python3版本，那么理论上是有pip的，可以通过下面命令查看。就这么点儿事，害我折腾了一个下午，总算找到原因，可以安装第三方插件了。文章看了十几篇，逐一尝试，行不通，报各种错或警告。我很郁闷，于是上网搜索尝试各种命令，
2023-01-08 20:56:41
3810
10
原创 MacBookPro安装mysql遇到的几个问题
经过一番折腾，顺利的下载了需要的版本mysql-8.0.31-macos12-x86_64.dmg，双击安装时，系统提示“该软件来源不明，不建议安装”，下载下来却不能安装？用Mac的好处是不用开关机，无弹窗无广告，坏处是在安装某些第三方的软件时，总是和视频教程上的winows版不一致，需要自己上网找资料尝试怎么安装。在安装的过程中，需要输入mysql的输入密码，开始我不想设置复杂的密码，怕给后期自己练习使用添麻烦，所以输了123456，然后finish始终是灰度的不能用。绊绊磕磕的安装成功了。
2023-01-06 15:34:59
1261
原创 PyCharm中设置translation插件为有道翻译
安装完PyCharm后，为了便于后期的学习，我又按照视频教程中所讲安装了translation插件，结果选中需要翻译的单词时，右击，从菜单中选择“翻译”，却翻译不出来，一直在转圈，系统说是因为网速原因。我看了一下，默认的是“谷歌翻译”，我又换成了“微软翻译”，还是不行，一直在转圈。我看选项中还有“有道翻译”，因为我平常一直用有道词典，所以就选了“有道翻译”这一项进行设置。创建完成以后，把应用ID和应用密钥复制粘贴到PyCharm中，完成设置。点了配置，没有账号，新创建了一个有道的账号，然后“创建应用”
2023-01-01 18:47:51
5545
5
原创 mac电脑中设置python3为python运行程序
最近几天心血来潮想学习一下python，安装时倒是很顺利，直接在终端中输入python3，能够正常执行。如果想要使用python命令，而非python3命令运行python程序，需要执行以下命令。于是从网上找办法，原来是MacOS默认的SHELL连接软件是zsh，需要执行chsh命令，把zsh更改为bash。可是按照视频教程里所讲执行这个命令时，终端报错，不能运行。2.查看mac自带的SHELL连接文件，如图所示，有7个。5.运行python，显示如下图所示的界面，问题解决。
2023-01-01 13:38:33
3229
5
原创 Vue2.x版本的购物车改成Vue3.x版本
前段时间学习制作了一个vue2.6.11版本的购物车，今天试着改成了vite（vue3.2.38版本）的。然后把原先vue2.x中出现的文件、组件等都拷贝或替换到新的项目中。网页不能正常运行，逐个报错，按照报错信息，依次安装了缺少的文件。感觉两个版本在子组件向父组件传递数据时有变化，main.js文件跟2.x版相比有变化，其他的没怎么变。
2022-10-08 13:38:55
266
原创 Vue3中样式渗透:deep()为什么无效
问题就出在这个根节点上，如果App.vue中没有这个根节点，那么:deep()不起作用，把根节点加上，:deep()样式就生效了。
2022-10-03 22:13:32
20159
7
原创 创建基于 Vite 的新项目
前些日子学习安装了Vue- CLI，现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。试着安装了一下，感觉更简单了。
2022-10-02 13:48:33
2541
原创 使用v-model绑定属性改变RGB颜色，使用计算属性生成颜色值，演示颜色的变化
最近学习Vue的 计算属性，用到颜色值，经过改造后，发现特别适合用来演示颜色的变化。效果如图所示，只需要拖动滑块，就可以实时看到颜色的变化及其颜色值。
2022-09-25 21:47:42
906
原创 改变Bootstrap4、Bootstrap5中复选框的颜色
Bootstrap4中复选框颜色的修改要稍微复杂一点，需要使用～兄弟选择器，还要使用::before,所用的类名也不同。原本我参考的代码写的是:active，经测试无效，我抱着试试看的态度改成了:checked,实现了目标效果哦。直接复制下面代码，改改颜色值即可。...
2022-08-15 20:04:07
2199
原创 Vue.config.productionTip = false为什么不起作用？
Vue.config.productionTip = false不起作用
2022-08-12 22:12:34
3581
35
原创 跳动的文字：CSS3动画、倒影、变量
今天看到一个案例，实现文字的动态跳跃，是用CSS3写的，其中用到了animation属性，还学习了一个新属性box-reflect，不过写的时候，在谷歌浏览器中需要用-webkit-box-reflect，可以实现文字的倒影效果，不由得感慨css的功能越来越强大了。效果如下：使用变量的用法我平常用的不多，用变量代替可以使css代码更简洁，值得学习。我做了一下测试，发现倒影的颜色是由span标记里的颜色决定的，倒影-webkit-box-reflect里设置的颜色不起什么作用。......
2022-06-27 19:43:53
651
原创 弹性布局的一个意外发现
今天学习javascript特效，却意外的发现了弹性布局的一个特性，鼠标移入目标区域，会生成一个新的蓝色的层，覆盖这个区域，鼠标离开，这个蓝色的层也会离开并消失。只是在学习的过程中，偶然发现，这个效果的实现还有赖于display:flex,为了让文字在区域内水平和垂直都居中，使用了弹性布局。后来我偶然去掉了display: flex; ，发现蓝色的层经过这个区域的时候，会把文字遮盖住，我把文字的z-index层级设置的最高也没用。...
2022-06-17 18:09:06
147
原创 js实现的带有滚动效果的返回顶部（仿CSDN）
实现了网页右下方常见的“返回顶部”效果。返回顶部用到了一个自定义的函数animate()，这个函数有三个参数，分别是移动过的对象，移动的目标，以及回调函数。这个函数是实现窗口垂直滚动的。程序实现了以下功能：1.右下角css使用fixed定位，这样页面上下滚动时，工具栏不动。2.返回顶部图标初始状态不可见，向下滚动超过500px时，显示，小于500px时，隐藏。3.鼠标移动到返回顶部图标时，图标变为......
2022-06-16 16:23:27
709
原创 原生js实现的放大镜效果
之前看了pink老师的视频，做了图片的放大效果，但是只有放大效果，不完整，后来又学了轮播图案例，把这两个结合起来，实现了完整的放大镜效果。因为点击左右箭头需要滚动，需要用到animate.js文件pink老师的视频中，使用了两张图片，一大一小来实现放大。如果这样子来做的话，加上下面的小图，得需要27张图像，我这里给改了，只使用了一张428像素的图片，只不过使用css改变大小，左侧尺寸400px，右侧放大后的尺寸是800px，这样只需要9*2=18张。......
2022-06-12 11:37:29
328
原创 原生js实现的动态生成表格数据、添加数据、删除数据
该代码实现了以下功能：1.表格中开始呈现的数据是从数组读取数据生成的；2.点击“添加数据”按钮，弹出“添加数据”窗口；3.输入姓名、朝代、事迹，点击“添加”，可在表格后追加一行新的数据；4.点击“删除”，可以删除该行数据。...
2022-06-11 19:21:45
2225
原创 排他思想在轮播图中的应用
之前是在选项卡菜单中用到了排他思想，当前选项卡样式与其他选项卡不同，怎么办呢？先用for循环遍历一遍，把所有的选项卡样式清掉，然后再设置当前的选项卡样式。这两天学习轮播图的制作，发现在轮播图中，多处用到了排他思想。1.点击小圆点时,当前小圆点对应的样式红色（.current），对应的图片显示，其他图片隐藏. for (let i = 0; i < num; i++) { ol.children[i].addEventListener('click', function() { for
2022-05-14 15:52:44
254
原创 js轮播图效果，透明度渐变实现，超链接总是访问最后一个
昨天学习了轮播图的制作，是定义了动画左右滚动实现的，这需要在最后追加一个列表项，以实现无缝滚动。学完后到小米官网看了一下，发现其轮播图不是滚动效果的，我觉得这个实现起来更简单，可以通过设置display或opacity属性实现。我先用了display属性，采用绝对定位，把几张图片重叠在一起，所有列表项初始状态为none，第一项的初始状态为block，当点击某个小圆点时，使用排他思想，所有项状态为display:none，当前项为display:block。程序正常运行了。我又想把css属性换成不透明度o
2022-05-14 14:13:32
752
原创 滑块验证成功后，对勾对号显示为根号
最近学习了一个滑块拖动验证解锁解锁的例子，代码比较好懂，只是遇到了一个问题，验证通过以后，✅在网页中预览的时候，显示成根号的样子。可同样的代码，在我的电脑上显示为根号，在别人的电脑上显示的是对勾，没有任何问题，虽然电脑不同，用的也都是谷歌浏览器。具体什么原因造成的，我还不太确定。后来，这个问题倒是解决了，那就是给滑块的innerHTML赋值的时候，不直接敲成对勾，而是采用特殊字符编码，我从下面这篇文章里HTML特殊字符编码对照表查到了对勾对应的编码是"✓"，这样就可以准确的显示成✅了。源代码使用sli
2022-05-11 09:19:05
763
原创 缓动动画如果不取整，为什么不能到达终点，而是距离终点有3.6px
今天在学习缓动动画，(目标值 - 现在的位置) / 10做为每次移动的距离 步长;在我练习的例子中，盒子初始位置距离左端100px，目标距离左端500px，我起初以为，最终运动结果会无限接近终点，但是查看html代码，发现最终盒子的位置是496.4px，这一点我起初很不理解，为什么会剩余3.6px呢？后来经过测试，发现原来是offsetLeft的四舍五入引起的。下面是我的测试用例。<!DOCTYPE html><html> <head> <m
2022-05-08 17:18:51
318
原创 mouseover与mouseenter的区别
今天看了讲mouseenter与mouseover区别的一个视频，其实不难理解，mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 ；mouseenter 事件只在鼠标移动到选取的元素上时触发，子元素不触发。看完视频做了一个小例子来验证两者的区别。代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>mouseenter与mouseover
2022-04-30 13:06:45
465
原创 选项卡案例中let与var的区别
之前学到let与var的区别是，曾经看过一篇文章，记得有这么几点：1.let不能被重新定义，但是var是可以的。验证代码如下： <script type="text/javascript"> var num1=5; var num1=6; document.write(num1); //输出6 </script>上面代码中，num1输出值为6。如果用let定义，num2会报错“ Identifier ‘num2’ has already been
2022-04-17 19:11:08
417
原创 新浪网选项卡实现的几个小细节
最近学习了几个选项卡的案例，有用javascript实现的，有用纯CSS实现的，新浪网的选项卡我之前就实现过，感觉难度也不是很大。只是今天在观察的时候把网页放大发现，我实现的效果和新浪网实现的效果在细节上有些小出入，就是当前选项卡的上边框变为橙色的时候，橙色边框的上面还有一条灰色的边框（图1），而新浪网的上边框上面是没有这条灰色细线的。如图1图2 新浪网效果这个细节如果不是把网页放大来看我都没注意到，于是我就想去掉这条灰色的线。这条灰色的线是由borer:1px solid #dbdee1生成的
2022-03-25 17:31:43
1146
原创 倒计时代码
今天学javascript,学到日期时间对象Date(),看到一个电商网站活动倒计时的案例，稍加修改。后来又想到比赛考试，2小时倒计时的例子，也试着实现了。现分享如下：一、电商网站倒计时一到了双十一或双十二或者聚划算店铺庆典活动等，电商网站都会出现倒计时的场景，如图所示，“距离结束07:53:58”，每秒钟执行一次。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <ti
2022-03-08 20:48:05
6503
原创 数字时钟setInterval()与setTimeout()
学习JavaScript经常会看到setInterval()与setTimeout()的区别，setInterval()会执行多次，setTimeout()只执行一次。最近看到一个动态显示时间，即数字时钟的例子，可以清楚地看到两者的区别。1.使用setInterval()<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>显示当前时间</title> &
2022-03-05 19:27:02
699
原创 JavaScript分时问候（if语句和switch语句）
网页上常见的根据不同 的时间显示不同的问候语，第一种用if语句实现，第2种用switch语句实现。代码很简单，适合初学者参考。<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>分时问候</title> <script type="text/javascript"> var today = new Date();
2022-03-05 18:59:32
1738
2
原创 浏览器自带的功能：显示元素自有属性，拾色器，调试等
学习网页制作有好几年了，今天才发现浏览器自带的功能真不少，今天有学生问我一个问题，说他为什么设置图片宽度100%还是占不了整个页面。这个问题的答案我是知道的，就是body默认的外边距不是0，解决方法就是使用css，把body元素的边距填充设置为0.body{margin:0;padding:0;}问题到这儿也就结束了，只是这么多年我也没深究过body元素默认的外边距到底是多少，今天忽然很想知道，于是试着使用了浏览器的检查功能，发现果然有答案：选中body元素，可以很清楚地看到右侧body自带的
2021-11-13 21:11:59
465
原创 U盘提示格式化，所有扇区unreadable sector，数据能恢复吗？
同事的一个u盘出了问题，提示格式化，同事说她上午把电脑插在电脑上还用过，下午再用就出问题了。我起初以为是文件系统的问题，用R-studio扫描想提取数据，后来发现扫描很慢，128G的u盘居然提示要扫描将近24小时，而且什么都扫不出来，扫描过的数据块显示未识别，没见到什么目录项等特征数据。后来我用winhex打开看，发现所有扇区都被填写了相同的数据UNREADABLESECTOR，如图所示插上u盘后，电脑运行变得很慢，即使点了格式化，U盘也无法格式化。请问这是什么原因造成的，u盘里的文件还能恢复吗？
2021-10-14 20:53:15
3764
12
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人