html/js/css相关知识
关注
分享
扫一扫
html/js/css相关知识
米心
这个作者很懒，什么都没留下…
展开
-
前端SVG简单实现圆弧进度条
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="566.93px" height="566.93px" viewBox="0 0 566.93 566.93" enable-background="new 0 0 566.93 566.93" xml:space="pre...原创 2020-06-11 09:01:37 · 631 阅读 · 0 评论 -
前端SVG简单实现进度条
效果图：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> svg { transform: rotate(-90deg); } ...原创 2020-06-10 20:11:07 · 588 阅读 · 0 评论 -
前端上传图片（后台已thinkphp3.2为例）
1.html文件2.js处理3.php后台接收图片原创 2020-04-08 09:23:03 · 527 阅读 · 0 评论 -
前端图片压缩 js
demo直接下载<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img id="hehehe" /&...原创 2020-03-30 16:31:37 · 227 阅读 · 0 评论 -
React 简易学习（八、路由）
1.打开github，找到react-router-dom信息2.引入react-router-dom包 在渲染文件中，代码格式如下 import React from 'react'; import Header from './Header'; //路由包 import {HashRouter, Route, Switch} fr...原创 2020-03-20 10:26:18 · 146 阅读 · 0 评论 -
React 简易学习（七、字体图标）
1.引入资源 在项目的最大布局文件中引入字体包 import { IconFontStyled } from './static/iconfont/iconfont.js'2.调用 然后使用方法如下 <div> <i className={iconfont}>//此处写字体图标代码</i&...原创 2020-03-20 10:26:25 · 192 阅读 · 0 评论 -
React 简易学习（六、数据存储）
1.打开github redux：存储项目数据 react-redux：协助调用redux中的数据 redux-thunk：协助action导出非对象 immutable：数据就是一旦创建，就不能更改的数据，保证store里面的数据不被修改 redux-immutable：讲子界面中的reducer数据统一到总reducer时需要转换使用此包1...原创 2020-03-19 09:32:40 · 1414 阅读 · 0 评论 -
React 简易学习（五、数据请求）
1.打开github，找到axios信息2.引入axios包 在渲染文件中，首先引入包 import axios from 'axios'; 然后使用方法如下 axios.get('/api/headerList.json').then((res) => { //处理数据 }).catch(() ...原创 2020-03-19 09:27:22 · 111 阅读 · 0 评论 -
React 简易学习（四、动画）
1.打开github，找到react-transition-group信息2.安装 打开命令提示符，输入： npm install react-transition-group --save3.在渲染文件中的操作 在渲染文件中，首先引入包 import { CSSTransition } from 'react-transition-...原创 2020-03-19 09:25:41 · 140 阅读 · 0 评论 -
Reach 简易学习（三、组件和样式）
1.打开github，找到styled-components信息2.安装 打开命令提示符，输入： npm install styled-components3.全局样式创建与使用 首先，创建一个style.js，引入包： import { createGlobalStyle } from 'styled-components';...原创 2020-03-19 09:23:38 · 375 阅读 · 0 评论 -
React 简易学习（二、工作目录介绍）
node_modules: 依赖包public: 网页标签页的图片，如果你需要做测试用的模拟接口数据，也可以将你的json文件放在这个目录下src: 项目工作目录.gitignore: 用来配置不需要加入版本管理的文件package.json: 项目配置文件package-lock.json: 在 `npm insta...原创 2020-03-19 09:20:50 · 104 阅读 · 0 评论 -
React 简易学习（一、安装配置环境）
1.安装 Node.js2.使用npm安装react 在命令提示符下输入： npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org cnpm install...原创 2020-03-19 09:19:43 · 184 阅读 · 0 评论 -
使用高德地图定位你的位置（转载）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascri...原创 2020-03-19 09:05:54 · 662 阅读 · 0 评论 -
使用百度地图定位当前位置（转载）
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, us...原创 2020-03-19 09:04:20 · 879 阅读 · 0 评论 -
document InnerHTML input后 之前Input输入的数据都消失了
使用jq . $().append(htmlStr)就可以避免这个问题原创 2020-03-19 09:01:18 · 775 阅读 · 0 评论 -
js 时间减 获得年月（计算工龄，年龄）
function dateSubMonth(date) { var date1 = new Date(date); var date2 = new Date(); var monthCount = parseInt(date2.getFullYear() - date1.getFullYear()) * 12 - date1.getMonth() + date2.getMo...原创 2020-03-19 09:00:08 · 1615 阅读 · 0 评论 -
js获得网址后的参数
示例网址：https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=98869528_hao_pg获得参数iegetQueryString("ie");即可获取//获得网址后的数据function getQueryString(name) { var reg = new Re...原创 2020-03-18 10:46:01 · 647 阅读 · 0 评论 -
html HR分割线
1、<HR>2、<HR align=center width=300 color=#987cb9 SIZE=1>align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度二、特效（效果并不是孤立的，可相互组合）1、两头渐变透明：<HR style="FILTER: alpha(...原创 2020-03-18 10:29:41 · 544 阅读 · 0 评论 -
html移动端隐藏滚动条
::-webkit-scrollbar { display: none;}原创 2020-03-17 10:51:42 · 342 阅读 · 0 评论 -
google地图打点
1.去googleapi申请你的key<script src="http://maps.googleapis.com/maps/api/js?key=你的key&sensor=TRUE"></script>2.html<div id="googleMap" style="width:100%;height:calc(100% - 44px);"&g...原创 2020-03-17 11:15:31 · 1030 阅读 · 0 评论 -
html 鼠标键盘按键监听
document.onkeydown = function(event) { var oEvent = event ? event : (window.event ? window.event : null); isKeyPressed(oEvent);}document.onkeyup = function(event) { var oEvent = event ? e...原创 2020-03-17 11:08:37 · 1324 阅读 · 0 评论 -
iframe子调父 父调子
父html<body> <label id="windowLabel">lab</label> <button onclick="winClkWin()">调用window</button> <button onclick="winClkFrm()">调用frame</...原创 2020-03-17 10:57:37 · 370 阅读 · 0 评论 -
移动端滚动调优化
overflow: auto; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch;//优化代码原创 2020-03-17 10:52:29 · 189 阅读 · 0 评论 -
设置html文字选中样式和不能选中
.noSelect{user-select:none;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;}原创 2020-03-17 10:50:51 · 571 阅读 · 0 评论