![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
云晓-
数据治理,数据分析,相信自己,终有所成。坚持学习!
展开
-
Syntax Error: TypeError: this.getOptions is not a function错误解决
今日使用Vue做项目时,开启server服务,显示编译失败,错误信息如下经过查找原因,发现是版本号太高的原因可在 package.json 中 查看 各个依赖的版本号之前less-loader是 8. 多开头的,最新的版本,该图片是卸载重新安装之后的版本号1、卸载 less-loadernpm uninstall --save less-loader2、安装一个低版本的(我安装的是7.3.0的,没有问题)npm install -D less-loader@7.3.0...原创 2021-05-06 15:44:56 · 7441 阅读 · 1 评论 -
用Vue制作tab栏切换 简单高效
初学Vue ## 标题用Vue制作tab栏切换 代码简直太简洁了实现步骤如下:1、实现静态UI效果用传统的方式实现标签结构和样式HTML结构CSS样式2、基于数据重构UI效果将静态的结构和样式重构为基于Vue模板语法的形式,处理事件绑定和js控制逻辑将提供的数据 写入data 中把数据渲染到页面给tab栏添加事件完整代码结构:<!DOCTYPE html><html lang="en"><head> <meta cha原创 2021-04-09 15:49:41 · 1054 阅读 · 0 评论 -
使用js 实现模态框拖拽
1 -2 - 仿京东放大镜3 - 仿淘宝固定右侧侧边栏4 - 封装简单动画函数1 - 封装缓动动画2 - 轮播图(PC端+手机端)3 - 返回顶部(PC端+手机端)4 - 筋头云案例5 - 移动端拖动元素6 - 记住用户名原创 2021-04-03 15:50:53 · 388 阅读 · 0 评论 -
使用js实现 自动更新倒计时功能
效果图如下:1、搭建结构根据效果图,可知分为上(h1)下(div)两部分,倒计时部分,由4个框组成,故使用span进行包裹<h1 class="title">距离光棍节,还有</h1> <div class="box"> <strong> <span class="day"></span>天</strong> <strong> <span class="hou原创 2021-04-03 15:03:03 · 684 阅读 · 0 评论 -
仅用js 实现 Tab栏切换效果
效果如图:1、首先搭建结构(html)tab栏切换 有2个大的模块:上面的模块选项卡(tab_list)、下面的模块内容(tab_con) <div class="tab"> <!-- 下面的模块内容会与上面的模块选项卡变化而变化,所以 两者的数量应该一一对应,相匹配。 --> <div class="tab_list"> <ul> <li class="cu原创 2021-04-03 14:14:08 · 2768 阅读 · 0 评论 -
ToDoList实现过程,完整代码
实现效果入下图所示1、搭建结构(HTML)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2021-04-01 00:00:53 · 1180 阅读 · 0 评论 -
王者荣耀手风琴
明确完成的效果,同时准备好相应的图片后,应该按照以下三个步骤进行。1、写 html。本案例中,首先有一个大盒子(大盒子背景为图片,在css样式中进行书写),盒子里面装着几个样式相同的小盒子(所以用Ul下面的 li 表示);然后,小li里面应该装有两张图片(一张大图片,一张小图片,小图片定位到大图片左边);最后,这些图片都可以点击,应该是链接,所以用链接将两张图片包裹起来。 <div class="king"> <ul> <li cl原创 2021-03-25 18:02:54 · 233 阅读 · 0 评论 -
随机选成员(不能重复)
目的:随机选取4位不可重复的成员名字思路:1、定义一个新数组,用来存放选取的成员2、使用 获取指定范围内的随机整数 方法3、检测新数组中是否存在该成员,没有的话就添加4、因为确定了选取的个数,所以还创建一个变量,用来存放选取的成员个数<script> var arr = ["鹿晗", "王俊凯", "易烊千玺", "彭于晏", "周杰伦", "杨紫", "张一山"]; var narr = []; // 获取指定范围内的随机整数原创 2021-03-09 22:30:17 · 380 阅读 · 0 评论 -
数组去重
数组去重思路:遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加。运用到的知识:1、遍历旧数组 :利用for 循环2、检查该元素在新数组里面是否出现过:利用indexOf 方法indexOf(‘要查找的字符’,开始的位置) 返回指定内容在原字符串中的位置,如果没找到旧返回-1,开始的位置是index索引号<!DOCTYPE html><html lang="en"><head> <meta原创 2021-03-09 22:03:37 · 86 阅读 · 0 评论 -
冒泡排列
冒泡排列:是一种算法,把一系列的数据按照一定的顺序进行排列显示。(从小到大或从大到小)假设有5位顺序混乱的数字,要求按照从小到大排序基本思路:1、一共进行了几趟 ;2、每趟比较过几次;3交换变量其次了解交换变量的思路:假设需要交换变量A、B的值1、首先创建一个变量temp;2、将变量A 赋值给 temp;3、将变量B 赋值给A;4、将变量temp中的值给B。下面是冒泡排序的代码:<!DOCTYPE html><html lang="en"><head&g原创 2021-03-09 21:50:33 · 127 阅读 · 0 评论 -
JavaScript基础 思维导图
为了梳理相关知识点,用思维导图进行总结该图片可能不够清晰,源文件已上传至资源(JavaScript语法.xmind),有需要者可以直接下载。原创 2021-03-09 21:33:56 · 418 阅读 · 0 评论 -
用CSS做简单动画——奔跑的大白熊
动画动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。动画分两步:1、先定义动画;2、再调用定义好的动画效果为:一只奔跑的大白熊从屏幕左面奔跑至屏幕中间(可直接下载源码,请从资源中免费下载)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-.原创 2021-02-21 20:56:07 · 883 阅读 · 0 评论 -
初学CSS—引入方式
CSS中的三种引入方式1、行内式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--标题--> <title>行内</title></head><body> <!--行内样式--> <h1 style="color: pink; font-size: 18px;">世纪佳缘<原创 2021-01-11 12:53:20 · 154 阅读 · 0 评论 -
前端学习——HTML
1、html基本知识如下图所示2、练习网页(基础)附:相关思维导图以及综合练习案例(素材及练习网页)链接:https://pan.baidu.com/s/1Zh_nbsmRceEdWTVpfme_-w提取码:ghnb...原创 2020-04-07 00:02:34 · 195 阅读 · 0 评论