前端
关注
分享
扫一扫
文章平均质量分 78
☆*往事随風*☆
决定成功的是细节，而决定失败的是格局
展开
-
解决Vue热更新失效问题
首先去查看是否是因为自己的代码和配置出现了错误，从而导致热更新失效。如果自己的代码和配置都没有问题，那就有可能是你的某个配置或属性影响了sockjs-node发送请求，从而导致热更新失败。如下图所示：sockjs-node发送请求的作用就是实现Vue的实时更新，如果开发中发现实时更新失败，可以考虑先来这里看看是否出现问题。原创 2023-04-22 16:04:40 · 4340 阅读 · 1 评论 -
Vue中动态获取设置了contenteditable属性的div的输入数据
contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。true 或空字符串，表示元素是可编辑的。false 表示元素不是可编辑的。如果没有设置该属性的值（例如），则其值被视为空字符串。如果没给出该属性或设置了无效的属性值，则其默认值继承自父元素：即，如果父元素可编辑，该子元素也可编辑。注意，虽然该属性允许设定的值包括 true 和 false，但该属性仍是一个枚举 属性而非布尔属性。原创 2022-10-14 10:46:05 · 4118 阅读 · 0 评论 -
Vue中使用 Aplayer 和 Metingjs 添加音乐插件
Vue中使用 Aplayer 和 Metingjs 实现添加音乐插件播放器原创 2022-08-02 22:53:39 · 2823 阅读 · 10 评论 -
解决 Vue 中报错：TypeError: Object(...) is not a function
解决 Vue 中报错：Object(...) is not a function原创 2022-07-27 17:46:06 · 18947 阅读 · 2 评论 -
js + canvas 实现签字板功能(签名支持下载到本地)_☆往事随風☆的博客
js + canvas实现签字版效果一、前言二、效果展示三、设计思路四、代码示例一、前言使用 js + canvas 制作一个简易的签字板。类似于我们平常在网上签字的效果。二、效果展示点击在线试用三、设计思路签字功能主要是利用了canvas中的绘制功能，为了能够实现绘制，我们需要获取到鼠标的按下时的坐标和移动偏移量。前者是绘制的起点，后者是绘制的线条。四、代码示例1.html代码示例<canvas id="test" width="600" height="600">原创 2021-10-16 22:20:53 · 1661 阅读 · 3 评论 -
js+canvas实现AI五子棋小游戏_☆往事随風☆的博客
使用 js+canvas+less 制作一个简易的五子棋小游戏,游戏自带AI电脑下棋，并且带有悔棋功能。这里只介绍一下js部分，其它部分请查看源码。原创 2021-09-09 10:10:43 · 2933 阅读 · 4 评论 -
原生js和jQuery分别实现轮播图_☆往事随風☆的博客
原生js和jQuery分别实现轮播图一、原生js实现轮播图（1）实现功能（2）html示例代码（3）css示例代码（3）js示例代码（4）说明（5）效果演示二、jQuery实现轮播图（1）实现功能（2）html示例代码（3）css示例代码（4）js示例代码(5)效果展示三、最后要说的话一、原生js实现轮播图（1）实现功能1.能够自动平滑的循环轮播。2.点击导航圆点控制轮播。（2）html示例代码<!-- 轮播图外部容器，显示要展示的图片 --> <div id=原创 2021-09-01 21:38:13 · 414 阅读 · 0 评论 -
原生js实现视频播放器_☆往事随風☆的博客
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码原创 2021-08-20 20:33:24 · 3372 阅读 · 0 评论 -
BootStrap使用方法&&为BootStrap3添加jquery.min.js文件（简单易懂）_☆往事随風☆的博客
为BootStrap3添加jquery.min.js文件一、前言二、BootStrap简介三、BootStrap3的使用方法（1）先去官网找到BootStrap3这个版本的文档。（2）配置BootStrap3文件（3）向js文件夹中添加jquery.min.js文件（4）按照下面这种方式引入BootStrap3所需的文件四、总结一、前言很多同学在初次使用BootStrap3开发网页时，都会遇到这样一个问题，那就是在项目中引入jquery.min.js这个文件时却发现在BootStrap3的框架文件中没原创 2021-08-04 20:37:40 · 7688 阅读 · 2 评论 -
弹性盒版下拉菜单导航条_☆往事随風☆的博客
弹性盒版下拉菜单导航条文章目录弹性盒版下拉菜单导航条一、前言二、整体代码三、效果展示四、总结一、前言利用css3中的弹性盒制作一个带有下拉菜单的导航条。二、整体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2021-07-26 14:27:22 · 581 阅读 · 0 评论 -
js实现键盘控制div移动（可加速）_☆往事随風☆的博客
文章目录前言一、基本思路二、代码分析1.首先为div开启绝对定位2.为document绑定键盘按下和抬起事件3.获取对应键盘的Unicode编码4.设置变量保存速度和键盘Unicode编码5.通过定时器设置移动速度和方向三、整体代码四、效果展示五、总结前言利用js实现键盘控制div移动，同时按下ctrl和方向键可以实现加速移动。一、基本思路通过js中的键盘事件来对div的移动做出响应，这里以上下左右键为例，首先获取到这四个按键的Unicode编码，然后在定时器中设置对应的移动方向和速度。二、.原创 2021-07-26 12:53:01 · 2005 阅读 · 0 评论 -
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一、DOM是什么？二、对象的HTML DOM 树三、图片切换练习1.要求2.实现思路3.示例代码1.html示例代码如下：2.css示例代码如下：2.js示例代码如下：4.整体代码5.运行结果总结前言利用js实现点击按钮切换图片的功能，并且能够记录当前所展示的图片的位置，通过这个练习来巩固一下对DOM中的节点查询和事件绑定的知识。提示：以下是本篇文章正文内容，下面案例可供参考一、DOM是什么？DOM全称:（DocumentObjectMode）文档对象模型，js中通过DOM来对h.原创 2021-05-22 12:42:17 · 10669 阅读 · 9 评论 -
js实现进度条的拖拽_☆*往事随風*☆的博客
文章目录前言一、代码分析1.搭建一个进度条2.对进度条进行一定的样式修改3.对进度条应用js代码4.js整体代码5.运行结果总结前言利用js实现一个进度条拖拽的demo。一、代码分析1.搭建一个进度条html代码如下（示例）： <!-- 外部容器 --> <div class="wrappers"> <!-- 包裹进度条 --> <div class="wrapper"> <原创 2021-06-14 19:53:32 · 3524 阅读 · 0 评论 -
纯css实现轮播图（自动轮播和手动轮播）效果_☆*往事随風*☆的博客
纯css实现轮播图效果提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录纯css实现轮播图效果一、前言二、基本思路三、实现步骤1.创建一个容器来进行轮播图的展示2.创建一个容器来存储图片3.在存储容器中放入图片4.为图片设置动画5.效果展示6.整体代码四、总结一、前言轮播图在网页中是一种必不可少的元素，轮播图的使用，使网页的内容展示更加生动，大大提高了用户体验，一般我们都会使用js来实现这一功能，但今天我们主要介绍一下如何使用css来实现网页轮播图的功能。二、基本思路原创 2021-04-03 16:23:46 · 118555 阅读 · 35 评论 -
js实现点击按钮图片自动切换_☆往事随風☆的博客
文章目录前言一、基本思路二、代码分析1.创建数组保存图片的存储路径2.获取按钮对象3.调用定时器4.关闭定时器三、整体代码四、效果展示前言利用js实现一个图片自动切换的功能。一、基本思路将准备好的多张图片的地址存储到一个数组中去，然后通过调用循环定时器来遍历数组，修改图片的src属性，进而实现图片的自动切换。二、代码分析1.创建数组保存图片的存储路径这里除了创建一个数组外还要定义一个变量来存储当前图片的索引，我们之后是通过这个索引来切换相应的图片。代码如下（示例）：// 创建一个数组.原创 2021-07-26 11:52:59 · 3354 阅读 · 1 评论