- 博客(72)
- 收藏
- 关注
原创 canvas基础--圆
绘制圆与绘制矩形的步骤基本一样:以一个小案例示范吧:```var myCanvas = document.getElementById("myCanvas");var context = myCanvas.getContext('2d');// 前两个参数为圆心的坐标,第三个参数:半径,第四个:开始角度,第五个:圆结束角度//,第六个参数:是否逆时针(true为逆时针,fa
2018-05-23 11:24:19
257
原创 canvas基础--文字和渐变
### 一、绘制文字###### 1.绘制实心文字```//老规矩,获取元素 var myCanvas = document.getElementById("myCanvas");var context = myCanvas.getContext("2d");//开始路径 context.beginPath();//设置字体:样式(斜体)、大小(单位是
2018-05-23 11:24:08
683
原创 canvas基础--矩形
上回我们了解了线条,由线→面,今天我们来说**矩形**画矩形之前呢,我们先思考如何才能画一个矩形?很简单,就是四条线段凑到一起,围成一个面,那么我们在写的时候是不是真的要画四条直线呢?当然不要---确定初始位置,改变终点位置,三次就好。备注:一下我们画图形,都是按照顺时针画的哟。还是按照我们之前学画直线的方法:获取元素myCanvas调用方法:getContext("2
2018-05-23 11:23:54
435
原创 Canvas--简易写字板
###### 相信canvas大家都听说过,今天我们就来用canvas写个简易画板。###### **首先**,我们得在body的内部写个canvas标签```//注意:这里要给canvas标签一个边框,以便我们看到画布这里写提示版本信息:您的浏览器版本太低,点击下载最新版本```###### 标签部分已经完成了。接下来就是js部分了:#
2018-05-23 11:23:41
269
原创 原生仿写Jquery
```// 参数分三种情况:// 1. 字符串:选择器// 2. function:ready方法// 3. 原生对象:原生对象转JQ对象function JQ(arg){// 用来放原生对象的数组this.elements = [];switch (typeof arg){case "string":// 通过getEle获取的有两种情况: id是一个
2018-05-23 11:23:27
297
原创 前台与PHP与Mysql
三者之间的联系:前台获取数据库里面的数据,提交数据到数据库,都要通过php(就是我们说的后台),php充当桥梁。下面就以简单的“订餐”来介绍三者之间具体要做什么事。一、前台1、前台,通俗来说就是展示给用户看的页面,那么我们在写页面的时候就要考虑到,我们要展示什么,在页面的展示位置以及数据从哪来。今天要说的这个小例子就是:我们先利用Ajax向后台发送请求,后台执行连接数据库操作,将获
2018-05-23 11:23:05
661
原创 Ajax专题
备注:下面的小练习仅供参考。Ajax是能够在不刷新页面的情况下,让网页局部更新的技术。使用Ajax请求数据分为三步:1.创建对象var xhr = new XMLHttpRequest();2.发送请求xhr.open("GET","hot.json(这里写与后台文件的路径)",true);3.等待响应,每次网络请求的状态代表都会调用这个方法
2018-05-23 11:22:44
186
原创 判断用户名是否重复的注册
还是用的小黄人和模拟表单提交,以避免刷新页面。因为之前已经介绍过注册的方法,这里就直接上代码。需要注意的只有一点,就是我们用了两次定义XMLHttpRequest()对象(就是两套)。注意仔细看哦。前台代码:varbtn=document.getElementById("btn");varmyname=document.getElementById("m
2018-05-23 11:22:15
9760
原创 jquery Ajax的使用
备注:首先声明一下,这里的$.ajax的使用还不能实现跨域。什么是jquery Ajax 呢?其实就是对XMLHttpRequest()对象的封装,最基本的方法就是ajax();其参数是一组对象.固定的写法:上述的data:{word:"abc"},word 代表变量名,后面为变量的值,那我们在后天接受数据的时候,就要写$_POST['word']。su
2018-05-23 11:20:41
131
原创 简易版弹幕(PHP——xhr实现)
1.首先外面分析实现弹幕在页面上出现需要哪些步骤:①需要有个文本框供我们输入内容,然后有个按钮,点击发送我们输入的内容到后台(这里我们就模拟表单提交数据,使用formdata对象)。注意:formdata括号里面的第一个参数“Word”是自己随意定义的变量,第二个参数是要提交的数据。这里的word是我们写好的一个input输入框。完成了这一步,数据提交就完成了,
2018-05-23 11:20:01
1451
原创 callback函数实现快递查询
php部分:$kuaidi= array();$kuaidi['1000'] = array('info'=>"王小三的快递",'status'=>"配送中");$kuaidi['1001'] = array('info'=>"王三的快递",'status'=>"配送中");$kuaidi['1002'] = array('info'=>"张三的快递",'s
2018-05-08 16:16:14
593
原创 用XMLHttpRequest()对象实现注册页面
一、在PHP文件中这样写:// print_r($_FILES);//注意:这句一般要注释掉,不然结果报错//首先上传头像,上传不成功,注册失败if(!empty($_FILES['pic']['name'])){$result = move_uploaded_file($_FILES['pic']['tmp_name'],$_FILES['pic']['name']);}
2018-05-08 16:15:46
414
原创 cookie和localStorage
一、cookie首先,我们随意获取一个元素(用js的方式):var btn = document.getElementsByTagName('input')[0];再者:判断条件,以确定存储了数据if(getCookie("count")){//把存储的值展示到元素的value值之上。btn.value = getCookie("count");
2018-05-08 16:14:57
184
原创 PHP基础
一、下列所有的操作都必须包括在里面,不推荐这种标签写法。1、变量的声明:$变量名;例如:$name;2、变量的赋值:$name = "haha";$app = 5;.....很多种类型的值,与javascript相同。3、输出变量(到浏览器页面):echo $变量名;例如:echo $name;4、创建新的数组:$数组名 = array();例如:$arr = ar
2018-05-08 16:14:16
161
原创 PHP里那些函数
一、这里的函数用法与javascript一样,只是写法不一样而已。注意:函数可以定义若干个形参,形参可以设定默认值,但是具有默认值的形参要排在无默认值的后面。function myfunc($param2,$param="luxp"){ echo $param."hello world";//点"."表示拼接}//输出结果
2018-05-08 16:13:33
159
原创 PHP文件上传
文件上传就要用到form表单:注意form的enctype属性,属性值为:multipart/form-data,才能完成上传,格式如下:上传文件执行步骤如下:1、先判定提交的数据是否为空,在不为空的情况下,再执行上传操作:if(!empty($_FILES['upload'])){//下图语句.........}
2018-05-08 16:13:13
115
原创 简单的网页计数器
实现美刷新一次,计数器加1: $fp = fopen("count.txt","a+");$data = fgets($fp);$data = empty($data)?0:$data;fclose($fp);$data++;$fp = fopen("count.txt","w");fwrite($fp,$data);fclose($fp);e
2018-05-08 16:12:40
2463
原创 canvas高级--图形变换
### 一、图形变换:旋转、位移、缩放##### 1.旋转:rotate(Math.PI/i);* 角度自定;* 必须要用Math.PI去设置角度,不能给数字* 旋转之后实际上是将坐标系旋转了,一定要注意!!!##### 2.位移:translate(x,y);* 位置自定;(也可以超出画布的大小,但是看不到图就不怪我了)* 位移之后实际上也就是将坐标系的原点改变了。一
2018-05-08 15:56:54
322
原创 正则表达式
正则表达式定义:正则,就是某种规则、要求 正则属性:设置条件,如:是匹配一个还是匹配多个 创建正则的两种方法:1、直接量/字面量,g代表多次匹配,就是匹配到所有符合条件的 /这里写自己要查找的内容/,如下: /flower/ var reg1 = /flower/g;2、对象var reg2 = new RegExp("flow
2018-04-02 10:45:02
135
原创 不用js,照样能计数
备注:纯粹是掘金里面看来的。仅供欣赏。。。计数器动态的计算商品的数量,我们经常会借用js来实现;我想告诉css也能实现这个效果,他比js用起来简单多了1.counter-reset: 属性创建或者重置一个或多个计数器;2.counter-increment: 属性递增一个或多个计数器值;3.content: 与:befor
2018-04-02 10:44:33
127
原创 webpack的配置及使用
webpack webpack:是近的一加载器兼打包工具,它能把各种资源,例如J (含J X)、 coffee、样式(含less/sass)、图片等都作为模块来使用和处理。一、全局安装webpack:```npm install webpack -g ```二、编写webpack.config.js配置文件```// CommonJS //导出模块//
2018-04-02 10:44:04
166
原创 jQuery版的购物车
注意引入jquery.js文件:百度搜索jquery,点击进入找到jquery-3.2.1.min.js,引入自己的文件中。// 六个触发事件地方// 全选 单选 删除 删除所有 加 减// 全选$("#selectAll").click(function(){$(".checkt").prop("checked", this.check
2018-04-02 10:43:17
779
原创 开启jquery之旅
什么是jquery呢?在笔者理解看来,jquery就是利用封装好的js文件,用更少的代码实现复杂的功能,其本质上就是另一种形式的原生javascript.一、在使用jquery之前,我们需要注意以下几点:1、注意:通过JQ获取到的元素是JQ对象,通过元素的document.getXXX获取到的元素是原生对象。2、 !!!原生对象不能调用JQ的方法和属性。3、!!!J
2018-04-02 10:42:52
287
原创 滚轮事件
varscrollFunc=function(e) {e=e|| window.event;if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件if (e.wheelDelta>0) { //当滑轮向上滚动时alert("滑轮向上滚动");}if (e.wheelDeltaalert("滑轮向下滚动");}
2018-04-02 10:42:20
303
原创 事件捕获和冒泡
简单获取三个嵌套的元素用来举例:① 事件捕获-事件传递的顺序-从父级到子级② 事件冒泡-事件处理的顺序-从子级到父级var box = document.getElementsByClassName('box')[0]; //父var item = document.getElementsByClassName('item')[0]; //儿子va
2018-04-02 10:41:52
105
原创 事件绑定
事件绑定:又称(事件委托、事件代理),就是另外一种绑定事件的方法,而且可以绑定多个事件。主要是为了解决:同一类型的事件,后者会覆盖前者的问题;例如:var redDiv = document.getElementById('redDiv');redDiv.onclick = function(){console.log(1);}redDiv.onclick
2018-04-02 10:41:34
184
原创 干货:常见的网页上的瀑布流
三种写法:1.最简单的(用ul来限定):css部分:ul{margin: 0 10px;padding: 0;list-style: none;width: 200px;border:1px solid purple;float: left;}ul li{background: grey;margin-bottom: 10px;font-size: 50px;tex
2018-04-02 10:41:13
601
原创 移动端事件
移动端事件:①onclick: 移动端也可以使用onclick事件,但是查阅资料上说会有300ms的延迟,究竟是不是有待考究。②ontouchstart: 相当于PC端的onmousedown,详细可参照先前写的文档--“事件”。下同③ontouchend: 相当于PC端的onmouseup.④ontouchmove: 等价于PC的 onmousemove。注
2018-04-02 10:40:43
208
原创 BOM
BOM:浏览器对象模型BOM,提供了访问浏览器的接口。这些功能大多和网页内容无关,多年来,由于缺乏规范导致BOM中的不同方法在不同浏览器中的实现有所差异,直到html5,才将BOM的主要方面纳入规范。BOM常用的特性包括:一、window对象window对象在浏览器中具有双重角色:它既是ECMAscript规定的全局global对象,又是javascript访问浏览
2018-02-26 16:54:55
131
原创 干货:仿写某培训公司官网移入移出效果
CSS部分:.item{float: left;width: 200px;height: 200px;background-color: red;margin: 2px;perspective: 1000px;overflow: hidden;}.item div{width: 200px;height: 200px;background-color: blue;transform
2018-02-26 16:53:29
121
原创 回调和递归
回调:定义:把函数当做参数传递到另一个函数内部去调用,就叫回调。应用场景:用于导航栏,当我们点击链接是才开始加载资源,避免同时加载多个资源,占用大量空间造成卡顿。举例:function request(fn){//这里的fn就相当于showCar、showWomenconsole.log("发送网络请求");setTimeout(function()
2018-02-26 16:53:06
3845
原创 单击和双击
在body内部写一个div,然后给其设置样式,js部分代码如下:var redDiv = document.getElementById("redDiv");var timer;//单击就是我们一直以来用的最熟练的onclick.redDiv.onclick = function(){clearTimeout(timer);timer = setT
2018-02-26 16:52:37
422
原创 干货:实现拖拽效果
备注:加粗字段就是实现元素跟随鼠标移动的事件。var redDiv = document.getElementById('redDiv');var box = document.getElementsByClassName('box')[0];var body = document.getElementsByTagName('body')[0];redDiv.onm
2018-02-26 16:52:12
454
原创 键盘事件对象(keyCode)
键盘事件对象:即每一个按键。值得注意的是:我们在按键的时候,keydown 支持特殊按键,但是不区分大小写,而keypress不支持特殊按键,但是区分大小写。获取事件对象:document.onkeydown = function(ev){// 获取事件对象,可以使用window.event,注意:在火狐获取不到console.log(window.event);
2018-02-26 16:51:53
2810
原创 事件(鼠标、键盘、表单)
鼠标事件:redDiv.onclick = function(){console.log("click点击事件");}out和over会在鼠标从父级移入子级元素的时候触发enter和leave会在鼠标移入或移出父子级整体的时候才会触发redDiv.onmouseout = function(){console.log("out鼠标移出");
2018-02-26 16:49:33
230
原创 闭包及其应用场景
在说闭包之前,我们先来了解一下变量的作用域。局部变量,是在函数内部声明,局部变量不可以在函数外部使用。本质原因:函数在被调用的时候会入栈,并且分配空间,函数内部的变量都是在这块空间内部声明的。当函数运行完毕之后就会出栈,系统回收空间,函数内部的变量所占的空间也会被收回,所以不能在函数外部使用函数内部定义的变量。闭包:通俗来说,函数里面套函数就可以形成闭包。闭包里面使用局部变量和函数参数的时
2018-02-26 16:49:15
1131
原创 传说中的DOM
DOM对象:// 获取节点.var redDiv = document.getElementsByTagName('div')[0];// 创建标签类型节点var span = document.createElement("span");// span.innerText = "2016年8月8号";// 创建文本类型的节点
2018-02-26 16:48:54
107
原创 干货:碰撞检测
看代码就好,就不多解释了。。。。。说明:(写两个小球,背景色分别为黑色和红色,都相对于其父级绝对定位),以下是js部分的代码。var red = document.getElementsByClassName('red')[0];var black = document.getElementsByClassName('black')[0];var box = doc
2018-02-26 16:48:29
108
原创 干货:数组方法的仿写
这里提到一个新的知识点:Array.prototype.*; 只要是数组都能调用Array.prototype.*里面的方法/属性,下面用实例说明:Array.prototype.uName = "都是数组";Array.prototype.sum = function(){// console.log("这是新加的函数",this);var sum = 0
2018-02-02 19:37:37
232
原创 数组和字符串的对象和常用方法
1.数组对象: arr.length;2.数组方法:push(元素1,元素2,...);//即在数组的尾部添加元素,括号内为元素1,元素2,.....里面可以添加任意多个元素pop();//在数组的尾部弹出元素.注意:弹出元素的时候,括号内不能添加参数shift();//在数组的头部弹出元素unshift(
2018-02-02 19:36:58
216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人