zblog主题

Solide

专注于前端开发记录

文章 248  访问 17133
最新动态
ES6

        简述:             ES6中新增的Promise对象主要解决的还是异步操作时的回调地狱问题,主要分为三个状态pending(进行中)、fulfilled(已成功)和 rejected(已失败)。    在使用时出来异步操作能改变结果,其他都无法改变 主要是pending—>fulfilled或者是pending—>re

2023-11-16  103
vue案例

             效果图:当鼠标按下按钮时 按钮文本会发生变化 并且 上面的能量条 会进行充能  每个阶段的充能颜色条不同 当松开时 能量条进行衰减 火箭进行加速先创建一个vue实例 在数据中心中 将我们需要的变量数据写好当我们按下按钮时 给对应绑定是事件进行处理视图层:首先将开关设置为true 文本改为充电中 拿到数据中心的powerUp设置为间隔定时器 每100ms 计数器charge++一次当我们松开的

2023-11-16  73
jquery案例

     效果图:在案例中 鼠标在导航上进行移动的时候 会出现一个边框 跟随鼠标进行滑动 鼠标移出则消失 点击导航时 阴影部分的方块 会滑动到点击的导航栏上面html:准备好一个盒子 导航栏用ul li表示 边框盒子 跟阴影部分 我们通过span标签使用定位的方式进行设置 <div class="box">       <ul>  &

2023-11-16  67
CSS3

   效果图:在案例中 可以看见 文字从显示 然后方法到消失 紧接着进行下一段文字的动画效果 主要是通过关键帧动画 然后分别给每一段文字进行延时html:    <div class="box">       <div style="--i: 0">   &nbsp

2023-11-15  66
vue案例

             效果图:在效果中可以清晰的看见 当鼠标移动到柱形图上面的时候 会显示 当前柱形图的全部信息 并且在右上角给三种状态设置了对应的按钮 可以自由的去操控 向显示对比的内容html:主要载具还是myChart盒子data中需要准备的数据 主要的时当前 柱形图中各个部门 以及反馈 未反馈 超时反馈三个数组声明一个方法 在内部去初始化echarts表格 并配置基本绘制图标:柱形图的排列方向以及四边边界等x轴与y

2023-11-15  71
ES6

      ES6模块概念:         在ES6中新增加了模块化,主要目的就是解决在编译时的模块之间的依赖关系,主要方法就是导出(export) @与导入(import)两个模块。特点: 在使用模块化的时候 它会自动开启严格模式,并且可以导出或者导入任何类型的变量不受限制,在加载方面 导入的模块只需要进行一次加载,重复使用的时候,会在内存中进行读取, 最大的好处就是每一个文件都是一

2023-11-14  98
jquery案例

      效果图:在案例中 每一个区域 进行不同的加载完成的效果 主要是通过在进入页面的时候 动态的去给每一个盒子添加一个遮罩层 以及上面的icon图标 然后使用动画的方式 让图标进行转动达到一种视觉上的加载效果 最后通过定时器将将遮罩层进行移除 也就是删除动态添加的demo节点 加载完成html:在css中除了视图层中的五个盒子进行样式设置外 还需要给icon图标以及 动态添加的盒子进行一个样式设置   * { &nbsp

2023-11-14  69
CSS3

    效果图:在案例中 方块进行有序的先左向右滚动 可以看见方块从第一行最先滚动 然后依次到第二行 然后第三行 我们在设置使用关键帧动画的时候可以分别对一二三行进行不同的延时设置html:在box中 设置四个子元素 让它们分别包括三个span  即效果中看见的竖排三个盒子·我们先对 每一行盒子的位置 通过margin进行设置 因为它们翻转的距离包括间距先等 所以在设置是 是等值逐渐增加     .box 

2023-11-14  83
jquery案例

       效果图:从上面的效果中可以看出 当鼠标移动滑块时 图片的box-shadow会随之进行改变 并且下面的box-shadow会显示 其更改的值html:当滑块移动时 我们给其绑定oninput事件 获取到其改变的value值然后使用value进行阴影参数的计算 分为俩边进行计算将计算出来的值  按css设置的样式合并到一起在赋值之前要进行一个判断 当滑块滑动的值 除以50 小于0.5时 shadow变量只进行largeShadow赋值

2023-11-14  64
CSS3

         效果图:从效果中可以看到 字母进行的不同节奏的颜色变化  类似于霓虹灯一样进行闪烁 html:h1标签中 将字母单独用span进行包裹在css中先将基础样式进行设置 文字主要靠关键帧动画实现效果的      body {         margin:&nbsp

2023-11-14  67