![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
热爱前端的小君同学
正在努力学习前端的小白
展开
-
H5项目中使用微信JS-SDK(以H5项目批量上传图片为例,兼容IOS及安卓)
H5项目中使用微信JS-SDK(以H5项目批量上传图片为例,兼容IOS及安卓)原创 2023-02-24 10:23:36 · 5741 阅读 · 0 评论 -
项目缓存问题处理
项目缓存问题处理原创 2023-02-24 10:20:06 · 1104 阅读 · 0 评论 -
浏览器审查hover元素
1、在浏览器中f12打开开发者工具,鼠标移入到元素上 显示出来tooltip框后,使用ctrl+shift+c快捷键打开小箭头就可以看到tooltip框样式2、开发者工具中有一个Sources,里面有一个暂停功能,打开开发者工具后,先把tooltip框展示出来,再用快捷键F8暂停,tooltip框就不会消失了,可以一直查看样式转载自:https://www.cnblogs.com/my466879168/p/12769014.html...原创 2021-09-09 19:36:36 · 2457 阅读 · 0 评论 -
react-beautiful-dnd实现拖拽排序+合并+拆分的功能(完整代码)
import './App.css';import React, { useState, useCallback, memo, useMemo, useRef, Component } from 'react';import { DndProvider, useDrag, useDrop } from 'react-dnd';import { HTML5Backend } from 'react-dnd-html5-backend'import update from 'immutabili原创 2021-06-06 23:05:26 · 1753 阅读 · 0 评论 -
antd modal拖拽,自定义modal拖拽react-draggable
"antd":"^4.9.4"时,可以直接使用如下代码:import React, { Component } from "react";import { Modal, Button } from 'antd';import Draggable from 'react-draggable';class Drag extends Component { constructor(props) { super(props); this.state = { visibl.原创 2021-02-20 10:00:02 · 2691 阅读 · 0 评论 -
react和react native中获取两个日期之间相隔多少天的不同写法
react中直接通过import moment from "moment"然后按照如下代码即可实现let startDate = moment("2020-5-20"); let endDate = moment(new Date()) let workDayCount = endDate.diff(startDate,'days')react native中var msDiff = new Date().getTime() - new Date("May 2原创 2021-02-19 14:01:21 · 1430 阅读 · 0 评论 -
Hooks学习笔记
实例代码import React, { useState } from "react";function Example() { const [count, setCount] = useState(0); return ( <div> <p>{count} times</p> <button onClick={() => setCount(count + 1)}> Click Me </but...原创 2020-10-22 22:48:54 · 164 阅读 · 0 评论 -
styled-components学习笔记
import React, { Component } from "react";import { Button } from "antd";import { connect } from "react-redux";import { getStep } from "./action";import styled from "styled-components";const StyleButton = styled.button` width: 120px; height: ...原创 2020-10-22 22:24:19 · 196 阅读 · 0 评论 -
AWS Lambda小白学习-持续更新中
一、官网学习链接:https://docs.aws.amazon.com/zh_cn/lambda/latest/dg/API_Reference.html原创 2020-09-01 14:49:01 · 263 阅读 · 0 评论 -
用js、react写了一个带搜索框的多选择器,附完整代码(最新更新:找到了一个类似的组件)
效果图完整代码App.jsimport React, { Component } from "react";import { Input , Checkbox } from 'antd';import { CloseOutlined } from '@ant-design/icons';import _ from "lodash";import "antd/dist/antd.css";import "./App.css"const selectData = [ { val原创 2020-06-19 15:39:08 · 1519 阅读 · 0 评论 -
代码命名规则
参考网址:https://github.com/ryanmcdermott/clean-code-javascript#table-of-contents原创 2019-12-02 16:12:05 · 352 阅读 · 0 评论 -
真正在react中实现iframe引用外部链接高度自适应(实测,有用,附完整代码)
react: iframe fit content height网上找了一天,没有看到真正有用的,重复来重复去都是那两个方法。最后自己解决了,方法记录下来,方便大家学习使用。完整代码如下:App.jsimport React, { Component } from "react";import "./App.css";class App extends Component {...原创 2019-11-28 16:54:55 · 6168 阅读 · 5 评论 -
react长列表优化组件: react-virtualized,附完整demo
下载安装参考网址:https://github.com/bvaughn/react-virtualized 代码App.jsimport React, { Component, } from "react";import "./App.css"import { List, WindowScroller } from 'react-virtualized';import 'react...原创 2019-11-13 17:40:49 · 3379 阅读 · 0 评论 -
npm常见命令语句
安装npm install 模块:安装好后不写入package.json中npm install 模块 --save 安装好后写入package.json的dependencies中(生产环境依赖)npm install 模块 --save-dev 安装好后写入package.json的devDepencies中(开发环境依赖)卸载删除本地模块时你应该思考的问题:是否将在package...原创 2019-11-11 17:46:33 · 972 阅读 · 0 评论 -
Moment.js常见用法总结
获取当前月周等的起始时间可以参考:https://segmentfault.com/a/1190000015240911 moment格式参考网址:https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/01-format/ 获取当前月最后一天const endOfMonth = moment(2019-10).e...原创 2019-11-02 13:25:18 · 1511 阅读 · 0 评论 -
react值得推荐的组件
获取url参数:query-string引用import queryString from 'query-string';实际使用// url is 'https://www.example.com/user?id=123&type=4';let url = this.props.location.search;//this.props.location.search只能用于获...原创 2019-10-23 10:38:28 · 734 阅读 · 2 评论 -
semantic-ui-react使用
引入import { Checkbox, Table, Button, Icon } from "semantic-ui-react";import "semantic-ui-css/semantic.min.css";下载npm install semantic-ui-react --savenpm install semantic-ui-css --save必须引入样式文件...原创 2019-10-12 17:09:32 · 3043 阅读 · 0 评论 -
前端面试题目(都是一些总结的,从各处摘抄的题目)
前端遇到哪些兼容性问题,怎么解决?答:(1)不同浏览器margin和padding不同,解决方法:*{margin:0;padding:0}统一格式(2)ie6中,父级元素浮动以后,内部元素内容撑不开宽度。解决方法:元素内部的块级元素也设置浮动(3)标签嵌套不规范,如p和h1-h5里面嵌套div,解决方法:请正确的嵌套元素标签(4)ie6小于19px,会当成19px处理,也就元素宽高...转载 2018-03-15 17:45:49 · 1515 阅读 · 0 评论 -
web零基础学习笔记
常见编码有:ANSI 、GBK 、GB2312、 UTF-8、 GB18030 、UNICODE;一般用UTF-8,<meta charset="UTF-8" />内框架(iframe标签),相当于将一个网页嵌入到另一个网页中。对iframe的高度使用百分比的时候,需要将html,body的高度设置为100%<pre>最常见的应用就是用来表示计算机源代码,代码里面<&...原创 2018-03-21 16:49:29 · 1494 阅读 · 0 评论 -
利用CSS设置文字的阴影效果
text-shadow 为网页字体添加阴影,通过对text-shadow属性设置相关的属性值。属性与值的说明如下:text-shadow: [X-offset,Y-offset,Color,Blur]; X-offset:指阴影居于字体水平偏移的位置。Y-offset:指阴影居于字体垂直偏移的位置。color:指阴影的颜色;Blur:指阴影的模糊值。代码如下:<div class="text...原创 2018-04-08 09:33:57 · 15941 阅读 · 0 评论 -
hover事件
jquery代码如下: <script> $(".text").hover(function(){ var inde=$(this).index(".text"); $(".text .caption a").eq(inde).show(); $(".text .caption h3").eq(inde).hide(); $(".text...原创 2018-04-08 14:09:54 · 3532 阅读 · 0 评论 -
javascript动态设置一个div图层覆盖住另一个div图层,并设置成透明
原文出处:https://blog.csdn.net/newborn2012/article/details/16897569有时候我们在网页上提交数据到后台保存时,希望前台在保存过程中有一个正在保存的提示,这时可以使用一个透明div图层覆盖住编辑数据的图层,并显示等待的图标,表示正在保存中,当前数据暂时不能再编辑了,这种效果对于用户来说比较友好,下面就来总结一下关键的实现技术:1,创建一个div...转载 2018-03-29 10:18:07 · 3436 阅读 · 0 评论 -
bootstrap栅格系统
注意:最后加起来是12列<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1"&g原创 2018-04-08 09:26:42 · 164 阅读 · 0 评论 -
CSS counter计数器(content目录序号自动递增)详解
CSS Counters用到的属性前面也提到过,使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成,他需要几个属性一起使用才会有效果。使用的到属性包括: **counter-reset**:此值是必需的。必须用于选择器,主要用来标识该作用域,其值可以自定义。 **counter-increment**:用来标识计数器与实际相关联的范围。 **content**...转载 2018-04-23 11:19:48 · 3275 阅读 · 1 评论 -
CSS3选择器:nth-child和:nth-of-type之间的差异
CSS3选择器:nth-child和:nth-of-type之间的差异这篇文章发布于 2011年06月21日,星期二,23:04,归类于 css相关。 阅读 129753 次, 今日 49 次by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709一、深呼吸,直接内容:n...转载 2018-04-23 12:14:27 · 158 阅读 · 0 评论 -
利用旋转的知识制作出隧道效果
效果图如下:代码如下:<!doctype html><html onselectstart = "return false"><!-- 能够控制页面不能被选择 --><head> <meta charset="UTF-8"> <title>2</title> &am原创 2018-04-25 10:07:17 · 474 阅读 · 0 评论 -
实现div跟随鼠标移动、点击、拖动而产生的变化
代码一:实现鼠标能够拖动div<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body>原创 2018-05-03 16:11:44 · 6836 阅读 · 0 评论 -
bootstrap学习笔记
学习网站:https://v3.bootcss.com/ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi原创 2018-04-26 17:38:28 · 156 阅读 · 0 评论 -
前端学习第二阶段:javascript
1. JS代码写在哪里:script里面;写在外部.js后缀文件里面,通过script标签引入;写在标签里面注意:在引入js文件的script里面,一定不能再写js代码; 标签里面写js代码一般情况下不推荐(在某些插件里面,可能全部都是通过这种方式引入)script标签的放置位置: body或者head里面,只要注意一点:如果script里...原创 2018-04-27 17:30:45 · 751 阅读 · 0 评论 -
SASS用法指南
原文地址:http://www.ruanyifeng.com/blog/2012/06/sass.html学过CSS的人都知道,它不是一种编程语言。你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。很自然地,有人就开始为CSS加入编程元素,这被叫...转载 2018-05-21 15:44:05 · 175 阅读 · 0 评论 -
实际项目中不懂的地方(不断更新)
一、yike模板1.index_index.html(1)<extend name="Public:base" />Public就是base.html所在的文件夹,比如放Frame文件夹里,就应该是<extend name="Frame:base" />子模板(其实是当前操作的入口模板)中使用继承模板继承是3.1.2版本添加的一项更加灵活的模板布局方式,模...原创 2018-05-24 18:27:14 · 281 阅读 · 0 评论 -
html页面插入百度谷歌地图,react中插入百度地图
一、百度地图1、打开“百度地图生成器”的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html2、在“1.定位中心点”中,查找具体位置3、在“2.设置地图”中,按照自己的需求修改地图的外观:a、地图的宽和高b、地图上显示的按钮(缩放、缩略图、比例尺)c、鼠标和键盘对地图的操作4、在“3.添加标注”中,添...原创 2018-06-30 18:43:36 · 9694 阅读 · 1 评论 -
Swiper4.x的全部配置选项、方法、函数,具体使用
参考网址:http://www.swiper.com.cn/api/index.html一、Swiper4.x的全部配置选项、方法、函数1.swiper一般选项1.1initialSlide设定初始化时slide的索引。设置为1后,Swiper初始化时默认显示第2个轮播图1.2direction设置Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)...原创 2018-07-16 14:49:43 · 20474 阅读 · 4 评论 -
实现点击单张图片,鼠标移动上去,两种状态下可放大
实现点击单张图片时要求可放大 1.官网jquery压缩版引用地址: 3.1.1版本: <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 3.0.0版本: <script src="https://code.jquery.com/jquery-3.0.0.min...原创 2018-07-10 09:39:55 · 800 阅读 · 0 评论 -
社交分享(facebook分享、twitter分享、link分享、google分享)
facebook分享<a href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location.href)+'&t='+encodeURIComponent(document.title),'_blank','toolbar=yes, l...原创 2018-07-03 18:21:45 · 17056 阅读 · 1 评论 -
判断当前客户端是pc端还是移动端还是Ipad
实现手机和电脑两种不同的布局,判断手机还是电脑:window.onload一个页面只能有一个<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m...原创 2018-07-03 18:22:41 · 5906 阅读 · 0 评论 -
商品详情页商品放大镜效果
源码下载地址:https://gitee.com/meijunna/lunbohtml<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3...原创 2018-07-11 12:15:58 · 3706 阅读 · 0 评论 -
前两个图片使用样式一,后面的图片使用样式二
<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c原创 2018-07-11 22:45:55 · 248 阅读 · 0 评论 -
如何使用浏览器的source进行js问题查看
1.在页面内按f12,然后在出现的编辑窗内选择“Source”2.在出现问题的那一行代码前,点击代码前的数字,数字变为蓝色背景,这就打好了断点3.然后刷新页面4.然后按f10 ,跳下一行,然后把鼠标移动到那个取值上,看看取的是什么。调到下一行才能看到当前行的值鼠标移到需要看取值的地方,看值5.如果出了问题,那么粘贴代码到console控制台看具体错误 ...原创 2018-07-12 16:37:53 · 5574 阅读 · 3 评论 -
超过高度部分用省略号代替//////同一行超出宽度部分用省略号代替
js代码<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script type="text/javascript"> $(function () { $(".text_para").each(function (i) { ..原创 2018-07-06 10:23:12 · 725 阅读 · 0 评论