2021 年 10月随笔档案 - 完美前端

vue3 axios

摘要：完整的代码, 可以复制引用 import axios from 'axios'; // 引入axios库 import router from '../router'; // 引入vue-router import Utils from '../utils/utils'; // 引入自定义的工具函数阅读全文

posted @ 2021-10-27 23:03 完美前端阅读(247) 评论(0) 推荐(0)

vue3 路由

摘要：完整的代码, 可以复制引用 vue-router库的相关功能 // 导入vue-router库的相关功能 import { createRouter, createWebHistory } from "vue-router"; // 导入Vuex store import store from ". 阅读全文

posted @ 2021-10-27 23:02 完美前端阅读(277) 评论(0) 推荐(0)

vue3 main.js

摘要：// 导入Vue 3的createApp函数 import { createApp } from 'vue'; // 导入主组件、路由、Vuex存储、axios配置和API工具 import App from './App.vue'; import router from './router/ind 阅读全文

posted @ 2021-10-27 23:00 完美前端阅读(1653) 评论(0) 推荐(0)

css html 移动端适配 font-size: 13.33vw rem + vw

摘要：#### 使用 `vw` 实现响应式布局方法一：使用CSS计算功能这种方法是通过CSS中的`calc()`函数来计算`font-size`的值。 /* 根据750宽度的设计稿计算font-size，即1rem = 100px; */ html { font-size: calc(100vw / 阅读全文

posted @ 2021-10-27 21:26 完美前端阅读(1121) 评论(0) 推荐(0)

js 拖拽跑马灯公告

摘要：完整的代码, 可以复制引用实现了一个通知条 (mequeText) 的滚动效果。当页面加载完成后，这个通知条开始从右往左滚动。当鼠标悬停在上面时，它停止滚动，并且当鼠标移出时它重新开始滚动。此外，用户还可以通过鼠标按下并拖动来手动移动这个通知条。 <!DOCTYPE html>; <html la 阅读全文

posted @ 2021-10-27 16:13 完美前端阅读(99) 评论(0) 推荐(0)

js 美东时间

摘要：显示美东时间的HTML结构 <p class="fr">;美东时间 <span id="mdsj">;</span>; (UTC -5:00)</p>; JavaScript 动态显示美东时间的方法 // 定义GetTime函数，动态地在页面上显示美东的当前时间 function GetTime(o 阅读全文

posted @ 2021-10-27 16:08 完美前端阅读(311) 评论(0) 推荐(0)

js 浏览器全屏

摘要：切换全屏状态 // 定义一个变量用于跟踪是否处于全屏状态 this.isFull = !this.isFull; // 定义一个对象，其中包含用于进入和退出全屏模式的各种浏览器方法 var documentMethods = { // 用于进入全屏的方法列表 enter: ['requestFull 阅读全文

posted @ 2021-10-27 16:07 完美前端阅读(89) 评论(0) 推荐(0)

jq 个人的特效库

摘要：功能介绍 // 这个文件是在2016年9月5日创建的, 博主个人在项目里使用的特效库, 基于jquery, 需引入函数实现 //当鼠标移动到列表项或点击列表项时，使该列表项变为选中状态。 //移入or点击默认选中 /** * 根据用户的操作（点击或移入），对列表项进行选中操作。 * @param 阅读全文

posted @ 2021-10-27 16:03 完美前端阅读(101) 评论(0) 推荐(0)

js 个人的特效库

摘要：功能介绍 // 这段代码是在2016年6月5日创建的, 博主个人在项目里使用的特效库函数实现 // 获取指定 class 名称的元素集合 // 参数 oParent：父元素对象，从该元素下查找指定 class 名称的元素 // 参数 className：要查找的 class 名称 // 获取 cl 阅读全文

posted @ 2021-10-27 16:02 完美前端阅读(26) 评论(0) 推荐(0)

html css input自定义

摘要：完整的代码, 可以复制引用<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compa 阅读全文

posted @ 2021-10-27 15:59 完美前端阅读(334) 评论(0) 推荐(0)

js返回两个数组差异值

摘要：初始化数据 // 定义三个数组: // arr：主数组，包含了多个消息对象 // arr2：包含了部分消息ID和未读标记的数组 // arr3：初始为空，后面用于存放过滤后的结果 let arr = [ { messageId: 1154198777724319, appid: "xiniv2", 阅读全文

posted @ 2021-10-27 15:59 完美前端阅读(917) 评论(0) 推荐(0)

js 数组去重

摘要：数组去重方法1 // 初始化一个包含重复元素的数组 var arr = ['1', '2', '3', '4', '5', '2', '2', '2', '2']; var arr2 = []; // 遍历数组，利用indexOf来判断新数组arr2中是否已存在当前元素 for (var i = 0 阅读全文

posted @ 2021-10-27 15:42 完美前端阅读(71) 评论(0) 推荐(0)

js 数组排序,不用sort()

摘要：数组冒泡排序 // 冒泡排序方法 // 初始化一个无序的数组 var arr = [4, 95, 19, 1, 33, 3, 2]; // 外层循环：每一轮进行比较 for (var i = 0; i < arr.length; i++) { // 内层循环：每一轮进行俩俩比较 for (var j 阅读全文

posted @ 2021-10-27 15:40 完美前端阅读(412) 评论(0) 推荐(0)

js小技巧

摘要：利用分割方法计算字符出现次数 // 利用分割计算字符出现的次数 // 初始化一个字符串 var str = 'border-bottom-color'; // 通过split方法将字符串按照'o'字符分割，然后计算得到的数组长度减1，就是'o'出现的次数 var n = str.split('o') 阅读全文

posted @ 2021-10-27 15:39 完美前端阅读(25) 评论(0) 推荐(0)

js 事件委托

摘要：HTML 结构 <ul> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> </ul> 事件委托示例 // 获取第一个ul元素 var oUl = document.getElementsByTagName('ul')[0 阅读全文

posted @ 2021-10-27 15:13 完美前端阅读(99) 评论(0) 推荐(0)

js 千分符三个分成一份 10,123,456.789

摘要：方法1：JS千分位格式化 // 将数字转换为字符串 var aa = String(10123456789); var arr = []; // 获取数字长度对3取余的结果 var num = aa.length % 3; var num2 = 0; var tem = ''; // 若不为0，则表阅读全文

posted @ 2021-10-27 15:12 完美前端阅读(130) 评论(0) 推荐(0)

css htm5 canvas时钟

摘要：完整的代码, 可以复制引用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="ht 阅读全文

posted @ 2021-10-26 23:03 完美前端阅读(57) 评论(0) 推荐(0)

js jq 带焦点切换轮播

摘要：完整的代码, 可以复制引用 // jquery-3.6.0.min.js <div class="ddd">  <div class="input"> <input type="button" value="1" class="red"> <input type="bu 阅读全文

posted @ 2021-10-26 23:02 完美前端阅读(77) 评论(0) 推荐(0)

js css 钟表

摘要：HTML 结构 <div id="wrap"> <ul id="list"> // 使用JavaScript动态生成时钟的刻度  </ul> <div id="hour"></div> <div id="min"></div> <di 阅读全文

posted @ 2021-10-26 23:01 完美前端阅读(74) 评论(0) 推荐(0)

css3 骰子

摘要：<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>3D立方体动画</title> <style> /* 设置外部容器样式 */ .wrap{ w 阅读全文

posted @ 2021-10-26 23:00 完美前端阅读(121) 评论(0) 推荐(0)

css 字体

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 使用 @font-face 规则自定义字体 */ @font-face{ / 阅读全文

posted @ 2021-10-26 22:57 完美前端阅读(41) 评论(0) 推荐(0)

js 特效js库妙味，轮播

摘要：功能介绍 // 这段代码是在2016年6月5日创建的, 博主个人在项目里使用的特效库 /* 获取指定class的元素集合 * 用法示例：var cda = getClass(document, 'da')[0]; * * @param {Object} oParent - 父元素对象，从该元素内查找阅读全文

posted @ 2021-10-26 22:51 完美前端阅读(69) 评论(0) 推荐(0)

js 文字搬运工

摘要：HTML 结构： <div class="left"> <p class="p1">携程旅行网是中国领先的在线旅行服务公司，向超过9000万会员提供酒店预订、酒店点评及特价酒店查询、机票预订、飞机票查询、时刻表、票价查询、航班查询、度假预订、商旅...</p> <span class="sp1">< 阅读全文

posted @ 2021-10-26 22:48 完美前端阅读(66) 评论(0) 推荐(0)

js 图片放大镜

摘要：样式定义 * {padding: 0; margin: 0;} /* 重置页面默认样式 */ .div1 {position: relative; margin: 0 auto; width: 432px; height: 224px; border: 1px solid #000;} .div2 阅读全文

posted @ 2021-10-26 22:46 完美前端阅读(111) 评论(0) 推荐(0)

js 图片按需加载

摘要：样式定义 * {padding: 0; margin: 0;} /* 重置页面默认样式 */ body {} li {list-style: none;} #ul {margin: 300px auto 0; width: 360px;} li {float: left; margin: 10px; 阅读全文

posted @ 2021-10-26 22:40 完美前端阅读(68) 评论(0) 推荐(0)

js 求最大最小值

摘要：寻找最小值及其索引 // 定义数组 var arr = [999, 992, 997, 22, 38, 8, 923, 232, 1023]; // 初始化最小值和最小值索引 var minArr = arr[0]; // 将最小值初始化为数组的第一个元素 var minIndex = 0; // 阅读全文

posted @ 2021-10-26 22:37 完美前端阅读(182) 评论(0) 推荐(0)

js macbook 底部菜单效果

摘要：HTML <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <div class="box"> <div id="ml0" class="div1"> 阅读全文

posted @ 2021-10-26 22:36 完美前端阅读(118) 评论(0) 推荐(0)

js 秒味主页菜单圆球拖拽自由落体

摘要：CSS 样式 * { padding: 0; margin: 0; // 全局样式重置，去除默认的边距和填充 } body { overflow: hidden; // 隐藏超出部分 } li { list-style: none; // 去除列表前的小圆点 } ul { width: 700px; 阅读全文

posted @ 2021-10-26 22:35 完美前端阅读(80) 评论(0) 推荐(0)

js 秒味导航菜单滑动tab特效

摘要：CSS 样式 * { padding: 0; margin: 0; // 全局样式重置，去除默认的边距和填充 } body {} li { list-style: none; // 去除列表前的小圆点 } ul { width: 700px; font-size: 0; position: rela 阅读全文

posted @ 2021-10-26 22:33 完美前端阅读(175) 评论(0) 推荐(0)

js 弹窗组件的开发

摘要：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>*{ margin:0; padding:0;}.logi 阅读全文

posted @ 2021-10-26 22:31 完美前端阅读(244) 评论(0) 推荐(0)

js 切换轮播

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{padding:0;margin:0;} li{list-style:none;} div{height 阅读全文

posted @ 2021-10-26 22:23 完美前端阅读(79) 评论(0) 推荐(0)

js 商城加减按钮

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习</title></head><style>*{padding:0;margin:0;}em,i{font-style:normal;font-size:20p 阅读全文

posted @ 2021-10-26 22:22 完美前端阅读(181) 评论(0) 推荐(0)

js 添加删除元素留言案例

摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><ul id="ul"></ul><input type="button" value="留言" id=" 阅读全文

posted @ 2021-10-26 22:18 完美前端阅读(46) 评论(0) 推荐(0)

js 复选框隔行变色每一行颜色不一样

摘要：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta charset="utf-8"> <title>Title 阅读全文

posted @ 2021-10-26 22:17 完美前端阅读(197) 评论(0) 推荐(0)

js 抖动

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><style> *{padding:0;margin:0;} li{list-style:none;} div{width:100px 阅读全文

posted @ 2021-10-26 22:15 完美前端阅读(82) 评论(0) 推荐(0)

js 点击div运动动画传参

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><style> *{padding:0;margin:0;} li{list-style:none;} div{width:100px 阅读全文

posted @ 2021-10-26 22:14 完美前端阅读(87) 评论(0) 推荐(0)

js 图片倒计时

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><style> *{padding:0;margin:0;} li{list-style:none;}</style><script> 阅读全文

posted @ 2021-10-26 22:13 完美前端阅读(122) 评论(0) 推荐(0)

js ajax

摘要：1. AJAX浏览器支持与创建对象 // XMLHttpRequest 是现代浏览器支持的AJAX实现 // ActiveXObject("Microsoft.XMLHTTP") 是针对老版本IE的AJAX实现 // 下面的代码演示了如何创建一个AJAX对象，根据浏览器的不同 var xml; if 阅读全文

posted @ 2021-10-26 22:09 完美前端阅读(141) 评论(0) 推荐(0)

angular 路由守卫

摘要：完整的代码, 可以复制引用进入时候的守卫创建LoginGuard/login.guard.ts import { CanActivate, Router } from "@angular/router"; import { Injectable } from "@angular/core"; i 阅读全文

posted @ 2021-10-26 22:07 完美前端阅读(362) 评论(0) 推荐(0)

angular 监听路由

摘要：支持的事件类型： // NavigationStart：导航开始 // NavigationEnd：导航结束 // NavigationCancel：取消导航 // NavigationError：导航出错 // RoutesRecoginzed：路由已认证在判断事件类型需要导入对应的事件类型，如阅读全文

posted @ 2021-10-26 22:06 完美前端阅读(565) 评论(0) 推荐(0)

angular service

摘要：完整的代码, 可以复制引用 // 创建服务命令 // 使用Angular CLI创建服务 // npm ng g s service 在app.module.js中导入和提供服务 import { ServiceService } from './service/service.service'; 阅读全文

posted @ 2021-10-26 22:05 完美前端阅读(88) 评论(0) 推荐(0)

flutter ios打包

摘要：Flutter iOS打包安装node.js sudo chmod -R 777 git // 释放git文件夹的读写权限 Cordova项目配置 // 不要使用cnpm来安装cordova sudo npm install -g cordova cordova create xuanwu com 阅读全文

posted @ 2021-10-26 22:01 完美前端阅读(629) 评论(0) 推荐(0)

flutter 安卓打包

摘要：flutter 安卓打包 1. Nodejs 和 Npm 安装与版本控制 // 安装Nodejs Nodejs 版本：node-v6.11.1-x64.msi // 安装Npm Npm 版本：5.5.1 // 注释：安装指定版本的nodejs后，npm版本可能不是最新的。可以通过以下命令进行升级。阅读全文

posted @ 2021-10-26 22:01 完美前端阅读(173) 评论(0) 推荐(0)

ionic 手势说明

摘要：#### ionic4 手势事件使用教程 Ionic4 官方文档中并没有为我们明确地提供手势相关事件的使用方法。然而，Ionic4 的源代码中实际上是支持了各种手势事件的，包括 tap、press、pan、swipe、rotate 和 pinch 等事件。 Ionic4 支持的手势事件： tap 阅读全文

posted @ 2021-10-26 21:56 完美前端阅读(126) 评论(0) 推荐(0)

ionic 和 angular 生命周期

摘要：生命周期函数 Ionic4 中内置的生命周期函数： ionViewWillEnter—当进入一个页面时触发(如果它从堆栈返回) ionViewDidEnter—进入后触发 ionViewWillLeave—如果页面将离开触发 ionViewDidLeave—在页面离开后触发 ionViewWillU 阅读全文

posted @ 2021-10-26 21:54 完美前端阅读(161) 评论(0) 推荐(0)

angular EventEmitter事件驱动通讯

摘要：ionic4.x 中使用 EventEmitter 事件驱动实现页面通讯 1. Eventemitter Github 地址： https://github.com/primus/eventemitter3 2、安装配置 EventEmitter： npm install --save evente 阅读全文

posted @ 2021-10-26 21:53 完美前端阅读(234) 评论(0) 推荐(0)

vue uniapp v-html跑马灯

摘要：// 通知组件的布局 <view class="notice"> <view class="notice-left"></view> <view class="notice-right"> <view class="notice-right-content" :style="{left: -left 阅读全文

posted @ 2021-10-23 20:55 完美前端阅读(248) 评论(0) 推荐(0)

uniapp web-view配置

摘要：[HTML5+ WebView对象文档](https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject)plus.webview.create( "xxx.html", //url:String类型,可选,新窗阅读全文

posted @ 2021-10-20 17:13 完美前端阅读(5897) 评论(0) 推荐(0)

js b列表每第6个依次循环插入 a列表的数据

摘要：// 假设 a = [{id: 1},{id:2},{id:3}] // list = [{id:11},{id:22},{id:33},......] // 每6个增加数组a中的数据 function insertItemsFromA(data, itemsToInsert) { if(items 阅读全文

posted @ 2021-10-16 15:16 完美前端阅读(245) 评论(0) 推荐(0)

uniapp v-html跑马灯

摘要：// 组件布局  <view class="home-notice"> <view class="game-notice-icon-box"> <image class="game-notice-icon" src="/static/game-notice.png" mode=" 阅读全文

posted @ 2021-10-08 15:58 完美前端阅读(2288) 评论(0) 推荐(0)

JS判断是否是苹果系统(ios)和安卓系统(Android)客户端

摘要：判断浏览器UserAgent // 获取浏览器的 userAgent let u = navigator.userAgent; // 判断是否是 Android let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; / 阅读全文

posted @ 2021-10-04 22:58 完美前端阅读(899) 评论(0) 推荐(0)

js模拟双击

摘要：双击 // 定义点击次数计数器 let i = 0; // 绑定点击事件到box元素 box.onclick = function() { // 每点击一次，计数器增加1 i++; // 设置一个500ms的定时器来重置点击次数 setTimeout(function() { i = 0; }, 5 阅读全文

posted @ 2021-10-01 14:49 完美前端阅读(624) 评论(0) 推荐(0)

node.js http-server 搭建本地 http 和 https服务器

摘要：使用vue-cli创建的项目，能够实现浏览器中自动刷新，实时查看项目效果，其中的原理在于，webpack在本地启动了一个本地服务器，将本机当作一台服务器；打包后的文件是一个html静态页面，在本地文件夹中直接打开的一般都素hifile协议，当代码中存在http或者https的链接时，html页面就阅读全文

posted @ 2021-10-01 14:38 完美前端阅读(612) 评论(0) 推荐(0)

10 2021 档案

导航

公告