苦瓜式的幽默-CSDN博客

原创原生js实现轮播图效果(无缝滚动)

原生js实现轮播图效果(无缝滚动)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit

2020-12-31 08:42:56 543 1

原创显示年月日时分秒星期几农历

【代码】显示年月日时分秒星期几农历。

2023-06-27 14:10:18 82

原创 html元素生成pdf 支持自动切割分页

【代码】html元素生成pdf 支持自动切割分页。

2023-06-27 14:08:12 956

原创 vue audio音频手写实现进度条拖拽快进下一首切换音乐列表音量增减

vue audio音频手写实现进度条拖拽快进下一首切换音乐列表音量增减。

2022-08-05 17:33:25 1652

自从使用Vue2之后，就使用官方推荐的axios的插件来调用API，在使用过程中，如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。具体原因:最近公司在做一个项目, 服务端数据接口用的是java输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown。按照搜索引擎给出来的解决方案，解决不了我的问题.最近在研究AOP这个开发编程的概念，axios开发说明里边提到的栏截器(axios.Inter

2021-09-21 00:04:01 2239 1

原创将element ui el-table中的数据导出到excel中

好久没有写博客了，差一点给它忘啦！今天遇到一个小需求在后台管理中需要将搜索到的数据一键导出到excel中。需求虽然做出来，但是有一点点小问题。首先1. 下载第三方库： npm install --save xlsx file-saver2.在放置需要导出功能的组件中引入import FileSaver from 'file-saver'import XLSX from 'xlsx'3.需要给el-table指定一个标示，就设置一个id4.在methods中写...

2021-09-20 23:53:47 1275 2

原创谈谈vue2.0和vue3.0区别在哪里

结构部分程序主入口文件 main.js vue2.0 import Vue from 'vue' import App from './App.vue' import router from "./router" import store from "./store" new Vue({ store, router, render: h => h(App), }).$mount('#app..

2021-08-04 20:42:45 563 4

原创小程序手机号一键登录

1. onshow 函数中调用函数 wx.login获取 code码2. 用户点击一键登录同意后需要在函数形参中拿到 iv encryptedData 以及错误信息3.判断错误信息若成功就将code encryptedData iv 三个参数作为参数调用后端接口4.状态码 200 存储手机号 token 用户名用户id 用relaunch 跳转到首页状态码不是200提示用户错误信息// pages/login/login.js\const app = getAp...

2021-06-22 08:56:01 933 1

原创一张图彻底解决原型链问题

一张图彻底解决原型链问题

2021-03-17 20:46:49 83

原创深拷贝(浅拷贝+递归)

深拷贝(浅拷贝+递归)<script> // 浅拷贝+ 递归 + 判断数组和对象 let obj1 = { username: 'zbj', hobbies: ['吃', '喝', '背翠兰'] } //let obj = ['吃','喝','背翠兰',[111,22,33]] //let obj = 123 //判断obj的数据类型Array还是Object 其它的类型直接返回 funct.

2021-03-17 19:35:11 79

原创 jQuery实现轮播图

jQuery实现轮播图<!DOCTYPE html><html lang="en"><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-03-11 21:40:45 108

原创模拟滚动条

js实现模拟滚动条<!DOCTYPE html><html lang="en"><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-02-17 15:00:27 209

原创碰撞检测

js 碰撞检测<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style&gt...

2021-01-27 14:07:07 2002 7

原创跟随鼠标移动的盒子

跟随鼠标移动的盒子(包括检测边界值)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><s.

2021-01-26 19:57:35 2402 5

原创 js随机点名

js随机点名<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div:n.

2021-01-17 14:40:56 246 3

原创 js快速排序

js快速排序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &l

2021-01-17 14:38:38 103 1

原创 split方法和join方法实现查找替换

js split方法和join方法实现查找替换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>

2021-01-17 14:36:47 251 1

原创 js有趣的倒计时小案例

js有趣的倒计时小案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *

2021-01-16 21:04:44 245 1

原创 js倒计时

js实现简单的倒计时<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./3.小于1.

2021-01-16 19:03:16 159 2

原创 js快速排序(中间排序)

JS快速排序(中间排序) var arr = [1, 19, 9, 9, 8, 22, 14, 52, 20, 37]; var re = qs(arr); console.log(re); function qs(array) { // 如果array长度是0 1时结束代码 if (array.length <= 1) { return array;.

2021-01-13 17:16:17 619

原创 jsTab栏切换

原生js实现复杂Tab栏切换（非常经典）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><

2021-01-10 14:03:24 426 1

原创基于bootstrop技术的前端响应式网站(包含源码)

经典的响应式网页(纯bootstrop技术)手机端pad端

2021-01-03 18:44:31 197

原创 CSS3实现旋转木马

CSS3实现旋转木马<!DOCTYPE html><html><head> <title></title> <style type="text/css"> body { perspective: 1000px; } .wrap { transform-style: preserve-3d; animation:run 5s linear infinite; position: re.

2021-01-01 14:29:58 201 1

原创 CSS3过度鼠标经过实现炫酷图片效果

CSS3过度鼠标经过实现炫酷图片效果<!DOCTYPE html><html><head> <title></title> <style type="text/css"> body {background: #000; } .box { overflow: hidden; position: relative; width:450px; height:320px; border:

2021-01-01 14:24:52 254 2

原创 CSS3D之旋转立方体

CSS3D实现两层立方体旋转嵌套<!DOCTYPE html><html><head> <title></title> <style type="text/css"> body { perspective:1000px; background: #000; } .wrap { animation: run 5s linear infinite; transform-style:.

2021-01-01 14:18:54 201 5

原创 css3动画3D旋转实现宇宙炫酷旋转

css3动画+3d旋转实现宇宙旋转<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>..

2020-12-31 11:27:56 1036

原创 css3D实现旋转木马和立方体切换

css3D实现旋转木马和立方体切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl...

2020-12-31 10:56:58 169 1

原创 JS实现简单的随机点名系统

JS实现简单的随机点名系统<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&gt...

2020-12-31 10:40:09 2099

原创点击按钮生成4位随机验证码

点击按钮生成4位随机验证码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>

2020-12-31 10:37:08 922

原创点击按钮随机生成任意颜色任意大小任意位置的圆

点击按钮随机生成任意颜色任意大小任意位置的圆<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&gt

2020-12-31 10:34:38 666 1

原创鼠标经过实现过度照片墙效果

鼠标经过实现过度照片墙效果<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .box { position: relative; width:1350px; height:450px; background: #999; margin: 0 auto; } .box1 { top: 90

2020-12-31 10:31:39 125 1

原创鼠标经过实现10种效果的遮罩层

鼠标经过实现10种效果的遮罩层<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .box { float: left; position: relative; width: 300px; height:300px; border: 3px solid #000; border-radius.

2020-12-31 10:28:16 356

原创品优购PC+京东,苏宁,携程,移动端+阿里百秀响应式

品优购PC+京东,苏宁,携程,移动端+阿里百秀响应式全部项目文件和源码我已经上传到github:https://github.com/way1022/-.git品优购PC端部分完成页面：移动端京东完成页面(流式布局)移动端携程完成页面(flex布局)移动端苏宁完成页面(rem+媒体查询+less)响应式阿里百秀支持pc端手机端ipad端（使用bootstrop框架）...

2020-12-31 10:21:08 350

原创五分钟快速掌握网格布局 (grid)

grid网格布局Grid 网格布局概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所...

2020-12-30 11:02:50 462

原创响应式知识点

响应式响应式布局概念2010 年 5 月由国外著名网页设计师 Ethan Marcotte 所提出页面的设计与开发应当根据用户行为以及设备环境 ( 系统平台、屏幕尺寸、屏幕定向等 ) 进行相应的响应和调整。技术要点标签设置<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><!-- 如果可能，调用 chome 内核

2020-12-29 15:51:50 199 1

原创移动端项目

移动端项目移动端浏览器及内核分析手机浏览器种类：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是基于Android修改的。viewportwidth:设置viewport的宽度（即之前所提及到的，浏览器的宽度），这里可以为一个整数，又或者是字符串〃device-width〃。...

2020-12-27 15:08:26 504

原创 flex布局,less语言

弹性盒子和less预处理语言弹性盒子弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。display:flex/inline-flex设置flex布局后，子元素的float、clear和vertical-align属性将失效.box{ display: flex; }.box{ display: inline-flex; }容器属性(设置在父元素上面)flex-directio...

2020-12-24 21:16:50 293

原创前端IE 浏览器常见兼容问题

IE 浏览器常见兼容问题兼容问题 ie中图片边框问题图片放在a标签中 img { border:none} ie8以下浏览器中背景复合属性的写法问题 .bg { background:url("./images/bg.jpg")no-repeat center} //解决方案：在url和no-repeat 直接加上空格.bg { background:url...

2020-12-22 21:04:06 670 1

原创 CSS3新增选择器和属性

CSS3新增选择器属性选择器以box开头 <style> div[class^="box"] { background:red; }</style><div class="box">box</div><div class="abox">abox</div><div class="boxa">boxa</div><div class...

2020-12-22 20:59:16 211

测评活动-学生测评.html

空空如也