博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

随笔分类 -  web前端

摘要:三目表达式 语法为: 条件表达式?表达式1:表达式2 它的逻辑是根据前面判断条件,如果为真,则执行第一个;如果为假,则执行第二个。 <div class="check-part" style="overflow:auto;" > <a-checkbox v-for="(item,index) in 阅读全文

posted @ 2022-02-18 18:50 yqphare 阅读(1483) 评论(0) 推荐(0)

摘要:Carousel 走马灯 在之前的走马灯效果的实现中,由于使用的是js原生代码实现走马灯效果,导致实现效果页面不美观,代码量大。 今天要介绍的是ELement ui 组件中的 Carousel 走马灯。 其实现简单,容易上手,且效果美观。 首先安装element ui 之后再 这样我们就可以在vue 阅读全文

posted @ 2022-01-10 11:02 yqphare 阅读(1506) 评论(0) 推荐(0)

摘要:在vue中,为了要实现数字滚动显示的效果,尝试了使用jquery代码,但是效果只能在html中展示,在vue中多次尝试还是没有效果。 研究过后,发现,vue中带有一种数字滚动。animate-number 效果: 动态效果(0-200) 动态数字效果案例: https://wangdahoo.git 阅读全文

posted @ 2021-12-20 15:00 yqphare 阅读(7975) 评论(0) 推荐(0)

摘要:BOM 浏览器对象模型 BOM可以使用我们通过js来操作浏览器 在BOM中我们提供一组对象,用来完成对浏览器的操作 BOM对象 Window 代表的是整个浏览器的窗口,同时window也是网页中全局对象 Navigator 代表的当前浏览器的信息,通过该对象可以识别不同的浏览器 Location 代 阅读全文

posted @ 2021-12-18 12:50 yqphare 阅读(39) 评论(0) 推荐(0)

摘要:1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 window.onload= function(){ 9 //创建 阅读全文

posted @ 2021-12-17 22:41 yqphare 阅读(49) 评论(0) 推荐(0)

摘要:还是老样子,通俗的来说:按照严格程度 :var<let<const 进行比较对比,能够更好的理解: 1、关于定义 var 可以多重定义 例如:var A="嘿嘿" var A=" 哈哈" 不会报错 值为 哈哈 let 不能重复定义,但可以修改值 例如 :let A="嘿嘿" let A="哈哈" 会 阅读全文

posted @ 2021-12-16 23:09 yqphare 阅读(200) 评论(0) 推荐(0)

摘要:闭包简单的说就是 一个包含在函数内的一个函数,当内函数在包含函数之外被调用时,则会形成闭包! 里面那个console.log匿名函数在test之外被调用了,所以形成了闭包!!! 但是console.log这个匿名函数在test函数内部定义,匿名函数会去其周围寻找a的值,找到为1; 闭包的值会在定义函 阅读全文

posted @ 2021-12-16 22:34 yqphare 阅读(35) 评论(0) 推荐(0)

摘要:搞了半天,原来原型和原型链就类似于 c++中的继承与派生,这个懂了就很好理解了。 先定义:原型 每个对象都有一个方法,叫做隐式原型(原型),就是所谓的原型,原型就是指向其类的指针。目的就是为了方便对象自身找不到方法或属性的时候找父类的对象和方法。 现在通俗理解: 对象找方法/属性,自身没有,找不到, 阅读全文

posted @ 2021-12-16 21:53 yqphare 阅读(521) 评论(0) 推荐(0)

摘要:CSS动画 今天在写代码时候,遇到了css动画效果如何实现的问题,经过查阅和实践,总结出一下结论。 transition transition 指定动画变化的对应属性 以及动画的执行时间。 例如:transition:width 1s; 意思就是当width发生变化时,变化执行1s。 这种可以实现简 阅读全文

posted @ 2021-11-27 20:41 yqphare 阅读(2181) 评论(0) 推荐(1)

摘要:CSS的粘性定位sticky可以起到吸顶灯的作用,用法如下 <body> <div> <nav style="postion:sticky; top: 0;"> </div> <div><div> </body 但是我在一次实践中使用该属性把导航栏做成吸顶灯效果时,却无法实现。经过一番操作后,我终于 阅读全文

posted @ 2021-11-09 11:11 yqphare 阅读(906) 评论(0) 推荐(0)

摘要:背景颜色的渐变 通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过度的效果 渐变是图片,需要通过background-image来设置 linear-gradient() 线性渐变:颜色沿着一条直线发生变化 例如: linear-gradient(orange,skyblue); o 阅读全文

posted @ 2021-10-31 16:55 yqphare 阅读(652) 评论(0) 推荐(0)

摘要:CSS-sprit 雪碧图 可以将 多个小图片统一保存到一个大图片中,然后通过调整background-position来显示响应的图片 这样图片会同时加载到网页中 就可以避免出现闪烁的问题 这个技术在网页中应用十分广泛,被称为css-sprite ,也成为雪碧图 雪碧图的特点: 一次性将多个图片加 阅读全文

posted @ 2021-10-30 17:06 yqphare 阅读(151) 评论(0) 推荐(0)

摘要:通过设置背景图片的不同属性进行设置背景 background-image 设置背景图片 -可以设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色 -如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满 -如果背景的图片大于元素,则会一部分背景无法完全显示 -如果背景图片和元素一样大, 阅读全文

posted @ 2021-10-28 20:42 yqphare 阅读(485) 评论(0) 推荐(0)

摘要:iconfont 关于阿里云图标库使用的介绍 对于添加到网页中的iconfont可使用以下几种方式: 首先需要进入阿里云图标库官网进行对应的下载iconfont-阿里巴巴矢量图标库 将需要的图标加入到购物车 再添加至项目通过项目中进行下载 打开所下载的压缩包会有如下目录 全选复制到所需项目的文件夹下 阅读全文

posted @ 2021-10-13 17:21 yqphare 阅读(632) 评论(0) 推荐(0)

摘要:粘滞定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="view 阅读全文

posted @ 2021-10-11 19:54 yqphare 阅读(593) 评论(0) 推荐(0)

摘要:固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="view 阅读全文

posted @ 2021-10-11 19:46 yqphare 阅读(1065) 评论(0) 推荐(0)

摘要:绝对定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="view 阅读全文

posted @ 2021-10-11 19:43 yqphare 阅读(1283) 评论(0) 推荐(0)

摘要:相对定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="view 阅读全文

posted @ 2021-10-11 19:38 yqphare 阅读(588) 评论(0) 推荐(0)

摘要:恢复内容开始 html水平居中 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta 阅读全文

posted @ 2021-10-11 18:59 yqphare 阅读(42) 评论(0) 推荐(0)