- 博客(37)
- 收藏
- 关注
RSS订阅原创 Echarts的使用方法
简介ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。ECharts官网：https://echarts.apache.org/zh/index.html下载及使用1. 使用 npm 下载npm install echarts --save使用：import * as echarts from 'echarts';// 基于准
2022-04-07 21:50:53
537
原创 vue3的使用 (1)
简介Vue 3 在 2022 年 2 月 7 日成为新的默认版本。Vue3优点：- 性能提升，运行速度事vue2.x的1.5倍左右- 体积更小，按需编译体积比vue2.x要更小- 类型推断，更好的支持Ts（typescript）这个也是趋势- 高级给予，暴露了更底层的API和提供更先进的内置组件- 组合API (composition api) ，能够更好的组织逻辑，封装逻辑，复用逻辑创建项目1. 使用vite创建vite是一个更加轻量（热更新速度快，打包构建速度快）的vue项目脚手架
2022-03-08 23:38:43
584
原创 uni-app 框架的使用
简介uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。官方网站：https://uniapp.dcloud.io/开始使用开发工具推荐使用 HBuilderX优点：HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。能直接创建uni-app项目。专为vue打造，提供比其他工具更优秀的vue支持，
2022-02-16 20:56:09
9569
原创 mock.js使用方法
1. 简介随机生成相应格式的数据。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。2. 安装npm install mockjs --save3. 引入mock// (1) import引入import Mock from 'mockjs'// (2) require引入let Mock = require('mockjs')4. 使用属性名 和 生成规则 之间用竖线 | 分隔。生成规则 是可选的。生成规则 有 7 种格式：'name|min-max':
2022-02-02 19:51:09
3674
原创 前端常见面试题 —— BFC是什么？
1. 什么是BFC？W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, tablecells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文）。2. 触发条件一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 下列方式会创建块格式化上下文：根元素()浮动元素（元素的 fl
2021-12-12 22:16:05
1258
原创 JavaScript -- es6新增数组方法（2）
1. arr.reduce()迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值参数1：callback:previousValue 必选 --上一次调用回调返回的值，或者是提供的初始值（initialValue）currentValue 必选 --数组中当前被处理的数组项index 可选 --当前数组项在数组中的索引值array 可选 --原数组参数2：initialValue: 可选 --初始值实行方法：回调函数第一次执行时，preValue 和 curVa
2021-12-05 18:39:23
285
原创 JavaScript es6新增数组方法
1. forEach() let arr = ["a", "b", "c", 1, 2, 3]; arr.forEach((value, index, arr) => { console.log(value, index, arr); })输出：
2021-11-28 23:30:57
787
原创 JavaScript -- console对象
1.特殊输出 console.log('消息内容！'); //输出普通信息 console.info('消息内容！'); //输出提示信息 console.error('消息内容！');//输出错误信息 console.warn('消息内容！'); //输出警告信息2.console.table 格式化表格console.table可以将一段同格式的数组转换为一个表格输出在控制台，方便只管的查看。...
2021-11-10 20:12:16
2310
2
原创 ES6入门（5）-- class
class简介ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。创建classJavaScript 语言中，生成实例对象的传统方法是通过构造函数。 function Fun() { this.a = 1; this.b = 2; }
2021-11-06 12:58:18
488
原创 js实现深度克隆
深度克隆克隆或者拷贝分为2种： 浅度克隆 、 深度克隆 。浅度克隆 ：基本类型为值传递，对象仍为引用传递。深度克隆 ：所有元素或属性均完全克隆，并于原引用类型完全独立，即，在后面修改对象的属性的时候，原对象不会被修改。实现深度克隆：代码及注释：// 参数deep: true 表示深度克隆 否则 浅克隆 Object.prototype.clone = function(deep){ // 获取到调用函数的对象 // this
2021-10-16 21:41:03
1793
原创 ajax跨域的方法
1. 跨域的原因同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。“同源"指的是"三个相同”： 协议相同 域名相同 端口相同URL结果原因http://store.company.com/dir2/other.html同源只有路径不同http://store.company.com/di
2021-10-12 20:24:32
367
原创 了解Bootstrap框架
Bootstrap简介Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。推荐使用v3版本，是目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。下载官方网站：https:/
2021-10-05 13:19:49
383
原创 了解ajax
AJAX1. 什么是ajaxAjax即Async Javascript And XML（异步JavaScript和XML）。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。是综合HTTP异步通信 、JS、XML、以及JSON等多种网络技术的一种编程模型。AJAX ~= JS+ xml+JSON + HTTP通信，本质就是在HTTP协议的基础上以异步的方式与服务器进行通信。2. ajax的优点（1）ajax别称 叫做无刷新技术 比如地图、局部加载
2021-10-03 12:52:02
146
原创 js 节流和防抖
节流与防抖在JavaScript中，频繁的触发事件会对DOM处理造成性能消耗，会加重浏览器的负担，降低用户体验。所以，我们可以采用函数防抖（debounce）和函数节流（throttle）的方式来减少调用频率，对实际效果也不会有太大影响。函数防抖 (debounce)短时间内多次触发同一事件,会重新开始计时，知道等待时长到达后执行。触发事件后等待一段时间后执行，如果等待时再次触发事件，将会重新进入等待时间。// 函数防抖 function debounce(){
2021-10-01 17:44:15
91
原创 jQuery 实现轮播图
jQuery 轮播图使用jquery实现轮播图要比用原生js简单许多，代码也少很多。思路1.外层盒子设置为一个图片大小2.内层盒子为所有图片的宽度，图片左浮动3.外层盒子设置overflow:hidden;4,让内层盒子移动。代码：<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
2021-09-30 10:03:49
3243
1
原创 js小游戏
canvas ，js 实现一个简单的飞机大战<!DOCTYPE html><html><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-09-13 15:38:41
1907
原创 js 简单圆盘时钟
实现一个简单的圆盘时钟预览图：代码：css：<style> .disc { position: relative; margin: 200px auto; width: 300px; height: 300px; border: 1px solid #000; border-radius: 50%; }
2021-09-04 16:36:01
4105
1
原创 js测试题2
1. 判断执行的结果function fun(n, o) { console.log(o) return { fun: function(m) { return fun(m, n); } }; } var a = fun(0); // undefined a.fun(
2021-08-31 21:00:16
343
原创 js 简单轮播图
使用transform = translateX()实现的图片切换<style> .box { position: relative; overflow: hidden; margin: 200px auto; width: 600px; height: 400px; } .img {
2021-08-21 14:44:10
116
原创 js 动态显示当前时间
调用Date对象，获取当前时间。然后使用定时器每隔一秒执行一次，即可实现动态时间。 h1 { color: red; font-size: 40px; font-weight: 400; text-align: center; }<h1></h1> <script> var h1 = document.getElementsByTa
2021-08-21 14:34:04
143
原创 js初级，菜单栏的展开与收缩
js初级，菜单栏的展开与收缩点击菜单分类选项，展开或关闭菜单的子选项。<style> ul { margin: 0; list-style: none; padding: 0; } .wrap { width: 200px; border: 1px solid #ccc; text-a
2021-08-15 15:45:05
1845
1
原创 js测试题1
1. 下面代码输出的结果为？console.log(0 === ""); // falseconsole.log(0 === "0"); // falseconsole.log(null == undefined); // trueconsole.log(false == "false"); // falseconsole.log(false === "0"); // false2. 以下代码输出结果是什么？console.log(1+ "2"+"2"); // '122' + 号两边
2021-08-15 15:30:50
288
原创 两列布局，三列布局
两列布局，三列布局1. 用css、html编写一个两列布局的网页，右侧宽度为200px，左侧自动扩展。<style> .container { height: 200px; border: 1px solid #000; } .left { float: left; width: 200px; height:
2021-08-05 20:43:26
228
原创 css隐藏元素的一些方式
css隐藏元素的一些方式1.display:none;display 属性规定元素应该生成的框的类型；设置display:none后，此元素不会被显示。使用 display:none属性后，元素的宽度、高度等各种属性值都将“消失”。<style> div { background-color: cornflowerblue; } .box2 { display: none;
2021-08-05 20:24:39
209
原创 3d旋转相册
3d旋转相册1.首先所有的图片的容器绝对定位，叠放在一起，然后一次设置rotateY依次增加45deg ， 然后为每个图片的容器设置translateZ，向Z轴方向移动500px，所有图片会从对应的角度向外移动，像圆形一样展开。2.创建动画，让rotateY旋转360deg。然后给盒子添加动画，时间为16s，设置linear和infinite，让动画匀速无限次播放。3.给最后一张图片设置反向旋转，就可以使其看起来是静止的。源代码： <style> @keyframes
2021-08-01 17:09:58
792
原创 关于css中的一些居中方式
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-08-01 13:33:27
214
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人