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

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 完美前端阅读(68) 评论(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 完美前端阅读(79) 评论(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 完美前端阅读(82) 评论(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 完美前端阅读(123) 评论(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 完美前端阅读(42) 评论(0) 推荐(0)

js 特效js库妙味，轮播

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

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

js 文字搬运工

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

posted @ 2021-10-26 22:48 完美前端阅读(69) 评论(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 完美前端阅读(112) 评论(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 完美前端阅读(71) 评论(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 完美前端阅读(193) 评论(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 完美前端阅读(123) 评论(0) 推荐(0)

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

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

posted @ 2021-10-26 22:35 完美前端阅读(85) 评论(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 完美前端阅读(183) 评论(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 完美前端阅读(246) 评论(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 完美前端阅读(82) 评论(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 完美前端阅读(185) 评论(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 完美前端阅读(52) 评论(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 完美前端阅读(201) 评论(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 完美前端阅读(83) 评论(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 完美前端阅读(91) 评论(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 完美前端阅读(128) 评论(0) 推荐(0)

js ajax

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

posted @ 2021-10-26 22:09 完美前端阅读(143) 评论(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 完美前端阅读(367) 评论(0) 推荐(0)

angular 监听路由

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

posted @ 2021-10-26 22:06 完美前端阅读(577) 评论(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 完美前端阅读(94) 评论(0) 推荐(0)

angular http请求

摘要：完整的代码, 可以复制引用 appMoudel配置部分 // 导入HttpClient模块 import { HttpClientModule } from '@angular/common/http'; // 在NgModule中添加HttpClientModule到imports数组 impor 阅读全文

posted @ 2021-10-26 22:04 完美前端阅读(84) 评论(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 完美前端阅读(632) 评论(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 完美前端阅读(189) 评论(0) 推荐(0)

ionic 手势说明

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

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

ionic 和 angular 生命周期

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

posted @ 2021-10-26 21:54 完美前端阅读(169) 评论(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 完美前端阅读(240) 评论(0) 推荐(0)

完美前端

导航

公告