前端
家里有个兔崽子
这个作者很懒,什么都没留下…
展开
-
利用antd进行轻量级表单开发,获取验证码
利用antd完成轻量化表单开发,主要解决的是获取验证码功能原创 2022-04-19 09:20:36 · 1527 阅读 · 0 评论 -
利用html2pdf将html生成pdf
<!DOCTYPE HTML><html><head> <title>HTML转PDF测试</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /></head><body> <button onclick="downloadPdf()">生成PDF</but.原创 2022-04-14 10:06:16 · 1362 阅读 · 0 评论 -
分享一个grid布局自动生成器
比如你有一个这样的布局需求那你可以进入这个网站:CSS Grid Generator操作完成后点击”请给我示例中的代码“原创 2022-03-07 16:44:55 · 988 阅读 · 0 评论 -
react获取常规的select和antd的Select的选中值2种方式
antd版本:4.16.13react版本:17.0.2import React, { Component } from 'react'import { Select } from 'antd';const {Option} = Selectexport default class Test extends Component {//用onChange方法先保存select值 handleSelect=(value) => { //conso原创 2021-12-22 14:10:22 · 8192 阅读 · 0 评论 -
纯js将json文件生产excel
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>j..原创 2021-11-18 17:17:36 · 167 阅读 · 0 评论 -
React中的计时器如何使用
import React, { Component } from "react";export default class App extends Component { state = { currentTime:new Date().toLocaleString() } /** * @author: xuehengfei * @description: 当前时间 */ getCurrentTime=() => {.原创 2021-07-07 09:16:06 · 894 阅读 · 0 评论 -
React开发相关插件
订阅消息:pubsub-js,方便兄弟间传递消息请求数据:axios //请求地址用`包住,不能用单引号 axios.get(`https://api.github.com/search/users?q=${keyword}`).then( promise => { console.log(promise.data); }, error => { console.log(error.message);原创 2021-07-06 15:47:16 · 444 阅读 · 0 评论 -
02_React开发之用VS Code进行开发todoList案例
找到你之前创建的react项目,右键选择open with code,如果右键找不到"open with code",请参考这里,或者先打开vs code程序,再把项目添加进来原创 2021-07-06 10:48:42 · 229 阅读 · 0 评论 -
关于form表单提交
持续更新获取input的check类型的选中的多个值 <label class="radio"><input name="zforum" type="checkbox" value="English Forum" />English Forum</label> <label class="radio"><input name="zforum" type="checkbox" value="Forum en Français" /&g原创 2020-08-24 10:34:33 · 121 阅读 · 0 评论 -
关于jquery的each的index
<div class="my"> <a href="javascript:;">1</a> <a href="javascript:;">2</a> <b>b</b> <p>p</p> <a href="javascript:;">3</a> <a href="javascript...原创 2020-08-06 09:35:10 · 893 阅读 · 0 评论 -
关于(function () { })(jQuery)与$(window).load(function () {})与$(document).ready(function () {});加载顺序对比分
<head> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <meta itemprop="dateUpdate" content="2020/7/7 11:36:24" /> <meta name="viewport" content="wi..原创 2020-07-23 14:53:38 · 190 阅读 · 1 评论 -
获取当前省份
function islocal() { $.ajax({ type: 'GET', url: 'https://restapi.amap.com/v3/ip?key=48ea1c2fb9755702721d3dbefbf94b08', dataType: 'json', contentType: 'application/json', success: function原创 2020-07-23 09:13:42 · 412 阅读 · 1 评论 -
css3 object-fit详解
上传头像的时候遇到了头像变形的问题,最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。object-fit理解CSS3 background-size出现的比较早,大家应该知道其支持的一些值,除了数值之外,其还支持几个关键字,例如:cover, contain等。object-fit也是类似的,但还是有些差异,具体有5个值:.fill { object-fit: fill; }.contain { object-...转载 2020-06-16 14:21:52 · 1061 阅读 · 0 评论 -
JS获取url地址中的参数的值
<script> function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURICompone.原创 2020-06-09 16:49:24 · 291 阅读 · 0 评论 -
如何在手机端显示导航栏横向内滚动,可以左右滑动
效果图如下<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="wid原创 2018-04-18 15:56:06 · 16355 阅读 · 0 评论 -
如何用css对字体或背景做颜色渐变效果
想在你的网站上做出漂亮的颜色渐变效果,用css能实现吗?当然<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewpor原创 2018-04-20 10:18:51 · 302 阅读 · 0 评论 -
如何让图片用css酷炫的显示出来
鼠标放到第一个图上,第二图的logo会360度从0到1放大显示出来<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="view原创 2018-04-20 11:20:34 · 988 阅读 · 0 评论 -
二维码生成
<!doctype html><html><head><meta charset="utf-8"><title>二维码生成</title><meta name="viewport" content="width=device-width,initial-scale=1,原创 2018-05-04 14:28:48 · 171 阅读 · 0 评论 -
背景图片随鼠标滑动
<div class="testBefore"><h1>BEFORE</h1></div><div class="fixedBg"></div><div class="testAfter"><h1>AFTER<转载 2018-11-12 17:13:38 · 1273 阅读 · 0 评论 -
用flex将内容在div里居中
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0px auto; }原创 2019-01-22 11:07:36 · 1822 阅读 · 0 评论 -
js的字符串方法记录一下
var x = "JohnJohn"; // x 是字符串y = x.charAt(2); // hy = x.charCodeAt(2); // 104y = x.concat(y, y); // JohnJohn104104, x+y+yy = x.indexOf('h'); // 2, 索引从0开始y = x.lastIndexOf('h'); // 6...转载 2019-02-20 16:55:50 · 113 阅读 · 0 评论 -
分享一款视频弹出插件
来源:http://fancyapps.com/fancybox/注意:目前版本是v2,兼容jquery的v2以上fancybox1.3.4以及之前的版本不兼容jquery的v1.9之后的版本该插件支持单图、多图、iframe、swf等弹出,其中如果弹出iframe需要加data-fancybox-type="iframe"需要引用的文件主要有<script src...原创 2019-09-24 11:11:46 · 1143 阅读 · 0 评论 -
css图片如何在div居中显示,多出部分隐藏
在前端布局过程中,因为图片会从数据库获取,宽高不一致,只有强制设置宽高值,但是容易导致图片变形。接下来用css来解决上述问题,不过此方法不兼容ie效果图展示:下图始终在div显示居中,不受div的大小影响代码展示:<!DOCTYPE html><html><head lang="en"> <meta charset="UT...原创 2018-04-16 12:10:26 · 5462 阅读 · 1 评论