baiwen5243-CSDN博客

转载移动端动画——requestAnimationFrame

window.requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()当你准备更...

2019-09-30 16:30:00 602

转载移动端touch事件——单指拖拽

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scal...

2019-09-24 14:42:00 273

转载移动端屏幕适配——通用适配方案

html字体大小随屏幕大小的改变而改变，封装函数如下：通用适配中解决了边框1px的问题。(function(){ 'use strict'; // dpr->scale = 1/dpr var docEl = document.do...

2019-09-21 22:36:00 238

转载移动端屏幕适配——简单适配方案

html字体大小随屏幕大小的改变而改变，封装函数如下：(function(){ 'use strict'; setRemUnit(); window.addEventListener('resize',setRemUnit); function setRemUnit(){ var docEl = docu...

2019-09-21 20:18:00 135

转载使用栅格系统开发响应式页面——logo+nav实例

小屏时：中屏及以上时：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>4-4编程练习（2）</title> <link rel=...

2019-09-18 21:39:00 842

转载移动端常用单位——rem

移动端常用单位：①px：像素大小，固定值②%：百分比③em（不常用，但是在首行缩进时可以使用）：相对自身的font大小（当自身的字体大小也是em做单位时，才会以父元素的字体大小为基准单位）④rem（移动端主流）：相对根节点(html)的font大小⑤vw（视口宽度）：相对视口宽度比例，1vw相当于视口宽度的百分之一⑥vh（视口高度）：相对视口高度比例，1vh相当于...

2019-09-16 23:22:00 722

转载媒体查询media query

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>媒体查询-策略</title> <style> *{ ...

2019-09-16 22:41:00 113

转载 canvas——绘制解锁图案

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>手机解锁</title> <meta name="viewport" content="width=...

2019-09-12 00:50:00 1065

转载 canvas——离屏

离屏操作：1.创建一个新的离屏canvas;2.把一些复杂额绘画操作（背景），画在离屏canvas上；3.将离屏canvas通过drawImage（离屏canvas对象，x1,y1,offcanvas.width,offcanvas.height,x2,y2,canvas.width,canvas.height）拷贝到原始的canvas上，减少不断绘制复杂操作...

2019-09-10 16:26:00 380

转载 canvas——动画实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>canvas</title> <style type="text/css"> canvas { border: ...

2019-09-09 22:17:00 170

转载 canvas绘制圆弧

Math.PI/3是60度，true的话是逆时针旋转，false的话是顺时针旋转转载于:https://www.cnblogs.com/rickdiculous/p/11494599.html

2019-09-09 22:08:00 91

转载 canvas二次贝塞尔&三次贝塞尔操作实例

Canvas Quadratic Curve Examplecanvas = document.getElementById("canvas");ctx = canvas.getContext("2d")ctx.lineWidth = 6;ctx.strokeStyle = "#333";ctx.beginPath();ctx.moveTo(100...

2019-09-09 22:05:00 218

转载 validity属性返回对象中的属性值

转载于:https://www.cnblogs.com/rickdiculous/p/11469825.html

2019-09-05 21:12:00 374

转载 form表单中id与name的区别

以前经常写form表单时，不写id和name，总觉得没有什么用。后来一看后台套完的页面发现，他们都补上name，不知道所以然，就查了一下资料，吓我一跳，要是照我那样写根本不会有数据传到服务器。原来表单提交用户输入的数据，是根据表单元素的name值来控制表单控件的。那么表单控件里面的id是干嘛的？就是为了区别不同的表单控件，还有一个作用，就是点击表单控件提示信息时也能让表单控件获得焦点的效...

2019-09-05 20:14:00 1027

转载 indexedDB数据库完整创建流程

1、打开数据库使用 IndexedDB 的第一步是打开数据库，使用indexedDB.open()方法var request = window.indexedDB.open(databaseName, version);这个方法接受两个参数，第一个参数是字符串，表示数据库的名字。如果指定的数据库不存在，就会新建数据库。第二个参数是整数，表示数据库的版本。如果省略，打开...

2019-09-04 18:11:00 371

转载 indexedDB数据库创建

1、首先需要使用使用indexedDB.open()方法，打开数据库2、通过createObjectStore方法创建表，创建表之后，这个表通过createIndex方法创建索引3、通过transaction方法创建事务，新建事务以后，通过IDBTransaction.objectStore(name)方法，拿到事务对...

2019-09-04 16:19:00 308

转载 HTML5存储 ——Web Storage（localStorage 和 sessionStorage）

一、localStorage对象临时储存API方法：1、localStorage.setItem(key,value)---设置存储内容2、localStorage.getItem(key)---获取存储内容3、localStorage.removeItem(key)---删除存储内容4、localStorage.clear()---一次性清空所有的key5、loca...

2019-09-01 21:28:00 122

转载高德地图——移动端请帖

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&...

2019-08-31 23:03:00 122

转载高德地图——控件的添加&删除

控件属性visible //bool 默认trueov=new AMap.OverView();ov.hide(); //ov.show(); 显示/隐藏---表示控件的添加与删除<!DOCTYPE html><html> <head> <meta charset="utf-8"...

2019-08-31 21:25:00 973

转载地图控件:overview、scale、toolbar

地图常用控件：1、AMap.MapType：地图类型切换插件，用来切换固定的几个常用图层2、AMap.OverView：地图鹰眼插件，默认在地图右下角显示缩略图3、AMap.Scale：地图比例尺插件4、AMap.ToolBar：地图工具条插件，可以用来控制地图的缩放和平移地图插件添加：map.addControl( new AMap.插件名（） )...

2019-08-31 20:59:00 259

转载高德地图——切换路线的不同实现（驾车、公交、骑行）

根据效果图做一个小工具栏 , 分别有驾车 ,公交和骑行三个路线类型的切换按钮。地点输入框包括起点和终点 ,最下面要有一个可以搜索线路规划的按钮。思路：1.使用new AMap.Map创建一个地图。2.在<script>标签中引入驾车 ,公交和骑行的线路规划插件 ,插件如下AMap.Driving,AMap.Transfer,AMap.Riding3.为...

2019-08-31 18:23:00 1329

转载高德地图——公交路线规划（关键字&坐标）

&plugin=AMap.Transfer1、关键词方式---不支持途径（仅支持2个数据）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script type="text/javascript" ...

2019-08-31 15:09:00 527

转载高德地图——骑行路线&骑行指定

&plugin=AMap.Riding也是[]中放json，包含keyword和city，不能有途经1、骑行路线（关键字）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script ...

2019-08-31 14:56:00 879

转载货车路线规划的两个方法——途径多点

&plugin=AMap.TruckDriving如果要多个点，一个数组放多个数据就行了TruckDriving货车驾驶第一种方法：使用坐标<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text...

2019-08-30 22:19:00 1417

转载高德地图——步行路线&步行路线的坐标规划

步行操作与开车一样唯一区别就是src末尾加入&plugin=AMap.Walkling以及new AMap.Walking（｛｝）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <sc...

2019-08-30 21:40:00 582

转载高德地图——驾驶路线（2种方法）

方法一：规定地点<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&...

2019-08-29 21:37:00 564

转载高德地图——2D转换3D

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key...

2019-08-29 20:41:00 1745

转载高德地图——添加比例尺控件

AMap.Scale 距离控件AMap.ToolBar 比例尺插件 &plugin=AMap.Scale,AMap.ToolBarmap,addControl(new AMap.Scale());添加控件map,addControl(new AMap.Scale());添加比例尺<!DOCTYPE html><html&g...

2019-08-29 19:49:00 689

转载高德地图——标记随着新的点击而切换位置

要求：1.为地图任意设置一个中心点和地图显示级别，并在中心点添加一个标记。2.为鼠标设置一个小手状的样式。3.为地图绑定点击事件，在点击的地方添加一个标记，同时要把之前的标记清除。( 具体效果查看效果视频 )任务(步骤):1使用new AMap.Map()创建一个地图。2. 为地图任意设置一个中心点和地图显示级别，并使用AMap.Marker()...

2019-08-29 19:35:00 711

转载高德地图——添加标记的两种方法&删除地标记的两种方法

添加标记：1、marker.setMap(map);2、marker.add([marker]);删除标记：1.marker.setMap(null);2 map.remove([marker1,marker2]);（前提是map用add添加的标记）<!DOCTYPE html><html> <head&gt...

2019-08-29 18:34:00 3469

转载高德地图——多点标记

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key...

2019-08-29 17:51:00 558

转载高德地图——searchNearBy（）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a7...

2019-08-29 16:15:00 1472

转载高德地图——根据兴趣点切换地图

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>高德地图</title> <script type="text/javascript" src="ht...

2019-08-28 22:07:00 299

转载高德地图&兴趣点（poi）

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>高德地图</title> <script type="text/javascript" src="https://we...

2019-08-28 21:47:00 736

转载高德地图搜索提示

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>高德地图</title> <script type="text/javascript" src="https://we...

2019-08-28 21:24:00 229

转载高德地图综合实例

<!DOCTYPE html><html><head><meta charset="utf-8"><title>高德地图练习题</title><script src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a71878...

2019-08-28 15:20:00 233

转载 jquery mobile cdn

<head><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>...

2019-08-18 21:01:00 137

转载 eval（）函数的使用

1.eval() 函数作用：可以接受一个字符串str作为参数，并把这个参数作为脚本代码来执行。2.参数情况：（1）如果参数是一个表达式，eval() 函数将执行表达式；（2）如果参数是Javascript语句，eval()将执行 Javascript 语句3.注意：（如果执行结果是一个值就返回，不是就返回undefined，如果参数不...

2019-08-18 19:27:00 732

转载 Ajax的GET,POST方法传输数据和接收返回数据

//首先创建一个Ajax对象function ajaxFunction(){var xmlHttp;try{ // Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){try{// Internet ExplorerxmlHttp=new ActiveXObject(...

2019-08-17 15:19:00 251

空空如也

空空如也