MySQL之增删改查

1.增加

INSERT INTO 表名（字段一，字段二，字段三）VALUES（值一，值二，值三）

2.删除

DELETE FROM 表名 WHERE 条件

条件可用：AND OR NOT IN

3.修改

UPDATE 表名 SET 修改内容 WHERE 条件语句

4.查询

SELECT 字段 FROM 表名 WHERE 条件语句

倒序查询 SELECT * FROM 表名(users) ORDER BY id DESC

默认正序 SELECT * FROM 表名（users） ORDER BY id ASC

联表查询：将两张表连在一起查询
SELECT * FROM 表名一 JOIN 表名二 ON 条件

Database

微软CEO纳德拉：比起设备本身，对人们如何使用设备更感兴趣

　　微软 CEO 纳德拉近日接受了《澳大利亚财经评论》的采访，谈及了对公司移动业务及 Google、亚马逊等对手的态度。纳德拉同时表明，微软仍未放弃推出一款有说服力的移动设备来赢得这个市场的青睐，但并不为此感到焦急。 　　

一款失败的产品，并不是员工的职业污点

　　在采访中，纳德拉首先谈及了对公司人工智能业务及云服务业务的自信，声称凭借这两项业务的盈利能力，微软并不急于全身心投入智能手机市场与苹果、三星正面碰撞。

　　纳德拉认为，在他接任微软 CEO 的两年半里，微软最大的变化资源更集中，让微软的几个强势领域更加突出。“你得有冒险的胆量去实践一些可能不一定对的事情。”纳德拉称：“就以 Surface 为例，三年前超过一半的人都在质疑，这东西真的有人需要吗？现在呢？就连我们的对手都在认可这款产品。”
　　纳德拉把微软形容为“一家拥有成熟产品开发模式”的公司，员工的一个失败的产品或者想法不再被视为是职业污点，这对于保持长期的创新灵感非常重要。

微软手机到底要等到什么时候？

　　谈到失误，微软最近让人联想到的失误是去年 7 月的那次高达 76 亿美元的资产减记：为了应对 72 亿美元收购诺基亚后的资金紧张，微软“忍痛”对智能手机业务开展“整体性重组”，并进行 76 亿美元的减值计提，裁员约 7800 人。
　　虽然此后微软多次表态不会放弃手机业务，但这次“大地震”的后遗症在纳德拉的这次采访中仍然可见。

　　“我们不希望被对手牵着走，问题是，我们自己能为客户带来什么？这是我看待公司业务的方式，对待 AI 业务也是如此。”纳德拉在采访中坦言：“如果没有真正的革新，微软并不急于推出更多的设备，比起设备本身，微软对人们如何使用设备更感兴趣。”
　　这一点也从微软在云服务、企业办公平台、人工智能等方面的日益重视可见，纳德拉这次也算是官方承认了微软“越来越软”的倾向。而从结果看来，从人满为患的硬件设备领域“战略性撤退”后，微软也确实走出了更 B 端、更服务化的一条新路。

　　和外界的翘首以盼截然不同，纳德拉在采访中没有提及 Windows Phone 更多进展，但似乎并不为此忧心。

云计算：微软的合纵连横

　　凭借 Azure 云的全面拓展，微软云业务在公司里的地位上升已经非常显著。光是在澳大利亚，目前微软已经把云服务深入到区块链旅游公司、板球俱乐部等多种多样的客户。
　　在这次采访中，纳德拉更明确点出，微软正在被“基于云计算的人工智能业务”引领着，走向新时代。

　　但纳德拉也承认，目前站在这个领域顶峰的还有“另外的几家公司”。他指的当然是目前在云计算领域与微软开展激烈竞争的 Google 云、亚马逊 AWS 云、IBM 等老对手。

　　纳德拉在采访中透露了微软应对这些对手的一个重要方式：对初创公司客户保持关注，它们对云计算和企业服务的巨大需求仍是一块未开发完全的富矿。

　　“第四次工业革命除了创造了一些美国西海岸（指硅谷）的科技巨头们，还创造了活跃在全球各个角落的初创企业。”言谈中，纳德拉对吸纳初创企业客户的渴望尽显。

News

CSS中常用的技巧

积水成河

1.登录 | 注册 那些事

相信大家对这个不陌生，登录 | 注册 有很多种写法，我想对你搜easy，你可以直接给文本内容，也可以用定位等等。。。今天我要讲的是用padding让登录 | 注册更唯美。

<div>登录<span></span>注册</div>    
样式
span{
    font-size:0;
    padding:11px 6px 1px;
    margin-left:12px;
    border-left:2px solid;
}

效果：

logreg

2.四个不同方向的小三角

<div class="triangle top"></div>
<div class="triangle bottom"></div>
<div class="triangle right"></div>
<div class="triangle left"></div>
样式
.triangle{
      border:solid 10px transparent;
      float: left;
}
.top{
     border-bottom-color: red;/*上*/
}
.bottom{
     border-top-color: red;/*下*/
}
.right{
     border-left-color: red;/*右*/
}
.left{
     border-right-color: red;/*左*/
}

3.自定义光标样式

text是移动到文本上的那种效果

wait是等待的那种效果

default是默认效果

e-resize是向右的箭头

ne-resize是向右上的箭头

n-resize是向上的箭头

nw-resize是向左上的箭头

w-resize是向左的箭头

sw-resize是左下的箭头

s-resize是向下的箭头

se-resize是向右下的箭头

pointer 小手效果

auto是由系统自动给出效果

自定义图片用：cursor: url(图片路径),pointer; 图片格式有可能有兼容性问题自己需要注意。

4.box-shadow

box-shadow的特效

<div class="div2">boxshadow不占空间</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
.div2{
		border:3px solid red;
		width:50px;
		height:80px;
		margin:50px auto;
		background-color:gold;
		/*box-shadow: inset 10px 10px 0px -5px blue;*/
		/* box-shadow:水平偏移量 垂直偏移量 模糊度  颜色*/
		/* box-shadow:inset 水平偏移量 垂直偏移量 模糊度 阴影扩张半径 颜色*/
		/* inset 表示向内阴影  总体扩张宽度=偏移量+阴影扩张半径*/
		box-shadow:0 0 0 5px blue,0 0 0 10px green,0 0 0 15px orange,inset 0 0 0 5px pink;
		border-radius:20px; 
	}

效果

shadow

5.outline

outline不占空间，其效果可以和阴影媲美哦，但是什么情况适用什么，还需要你判断。

1
2
3
4
5
6
7
8
9
.div1{
		border:3px solid red;
		width:50px;
		height:80px;
		margin:50px auto;
		background-color:gold;
		outline:5px solid blue;/*描边 边框外面一层*/
		outline-offset:5px;/*描边和边框之间的距离  当值为负值的时候outline会收缩*/
	}

效果

outline

今天先整理到这，以后再添加，希望对你有帮助。

CSS

画堂春

作者：纳兰性德

一生一代一双人，争教两处销魂。相思相望不相亲，天为谁春？

浆向蓝桥易乞，药成碧海难奔。若容相访饮牛津，相对忘贫。

我：

一曲悲欢离合，一朝花开花落。

一生几十年载，珍惜眼前中人。

一万小时定律

       今天浏览掘金，看到前端的10000小时这篇文章就把它读下去了，虽然我对这篇文章感兴趣，但我更对一万小时定律感兴趣，于是就百科一下，与大家分享。

来源

       作家格拉德威尔在《异类》一书中指出：“
人们眼中的天才之所以卓越非凡，并非天资超人一等，而是付出了持续不断的努力。1万小时的锤炼是任何人从平凡变成世界级大师的必要条件。“

       ”他将此称为“一万小时定律”。要成为某个领域的专家，需要10000小时，按比例计算就是：如果每天工作八个小时，一周工作五天，那么成为一个领域的专家至少需要五年。这就是一万小时定律。

理论依据

       英国神经学家DanielLevitin认为，人类脑部确实需要这么长的时间，去理解和吸收一种知识或者技能，然后才能达到大师级水平。顶尖的运动员、音乐家、棋手，需要花一万小时，才能让一项技艺至臻完美。
一万个小时是怎么算出来的？

　　格拉德韦尔一直致力于把心理学实验、社会学研究，对古典音乐家、冰球运动员的统计调查改造成流畅、好懂的文字。在调查的基础上，他总结出了“一万小时定律”，他的研究显示，在任何领域取得成功的关键跟天分无关，只是练习的问题，需要练习1万小时——10年内，每周练习20小时，大概每天3小时。每天3小时的练习只是个平均数，在实际练习过程中，花费的时间可能不同。上世纪90年代初，瑞典心理学家安德斯·埃里克森在柏林音乐学院也做过调查，学小提琴的都大约从5岁开始练习，起初每个人都是每周练习两三个小时，但从8岁起，那些最优秀的学生练习时间最长，9岁时每周6小时，12岁8小时，14岁时16小时，直到20岁时每周30多小时，共1万小时。 　　 　　

　　“一万小时法则”在成功者身上很容易得到验证。作为电脑天才，比尔·盖茨13岁时有机会接触到世界上最早的一批电脑终端机，开始学习计算机编程，7年后他创建微软公司时，他已经连续练习了7年的程序设计，超过了1万小时。
为什么是一万个小时？

　　“一万小时法则”的关键在于，一万小时是最底限，而且没有例外之人。没有人仅用3000小时就能达到世界级水准；7500小时也不行；一定要10000小时——10年，每天3小时——无论你是谁。这等于是在告诉大家，一万小时的练习，是走向成功的必经之路。
　　
　　
　　音乐神童莫扎特，在6岁生日之前，他音乐家的父亲已经指导他练习了3500个小时。到他21岁写出最脍炙人口的第九号协奏曲时，可想而知他已经练习了多少小时。象棋神童鲍比·菲舍尔，17岁就奇迹般奠定了大师地位，但在这之前他也投入了10年时间的艰苦训练。
　　
　　在大量的调查研究中，科学家发现，无论是在对作曲家、篮球运动员、小说家、钢琴家还是象棋选手的研究中，这个数字——一万，反复出现。
　　 　　　　
　　这是“一万小时法则”被提出的事实论据。

总结

其实对于成功者来说，不管练习的过程枯燥与否，有趣与否，他们都必将付出远远超出常人的代价。心甘情愿花上一万个小时来打通任督二脉的人，大都不是寻常之辈。

人生就是这样，没有不劳而获的事情，人们往往看到了别人的成功，却看不到别人的付出。。。。不经历风雨怎能见彩虹！

在前端的道路上是枯燥的，偶尔读读文章，可以净化你的心灵，沉淀你的心，努力吧，前端路漫漫兮，吾将上下而求索，愿你我在前端道路上更近一层楼。

哲学

Canvas系列之七彩画板

以前总是在画画软件上画画，今天自己也写了一个

七彩画板当然要有七中颜色了，你也可以获取更多地颜色

先让我们看看效果如何：

画板

点击画笔开始绘画，点击颜色选择画笔的颜色，点击橡皮擦清除

结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="wrap">
	<canvas id="canvas" width="600" height="500">画笔写字</canvas>
	<button>橡皮擦</button>
	<button>画笔</button>
	<div class="font"><h3>欢<br/>迎</h3></div>
	<ul>
		<li style="background-color:red;margin-left:100px;"></li>
		<li style="background-color:orange"></li>
		<li style="background-color:yellow"></li>
		<li style="background-color:green"></li>
		<li style="background-color:cyan"></li>
		<li style="background-color:blue"></li>
		<li style="background-color:purple"></li>
	</ul>
</div>

先让我们获取元素 这里使用了ES6的写法

如果不了解，可参考：lxjwlt’s blog

var canvas=document.querySelector('#canvas');
var ctx=canvas.getContext('2d');

var font=document.querySelector('.font');
var btn=document.querySelectorAll('button');
var li=document.querySelectorAll('li');

接下来就是画笔以及画笔的颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
btn[1].onclick=function(){
	font.style.display='none';
	canvas.style.cursor="url('pen.png'),pointer";
	//选择画笔的颜色
	var color='';
	for(var i=0;i<li.length;i++){
		li[i].onclick=function(){
			color=this.style.backgroundColor;
			console.log(color)
		}
	}
	canvas.onmousedown=function(){
		window.onmousemove=function(event){
			ctx.fillStyle=color;
			ctx.fillRect(event.offsetX,event.offsetY,5,5);
		}
	}
	canvas.onmouseup = function(){
		window.onmousemove=function(){}
    }
}

下面让我们完成橡皮擦

```js

    btn[0].onclick=function(){
    canvas.onmousedown=function(){
        window.onmousemove=function(event){
            ctx.clearRect(event.offsetX,event.offsetY,20,20);
        }
    }
    canvas.onmouseup = function(){
        window.onmousemove=function(){}
    }
    canvas.style.cursor="url('xpc.cur'),pointer";
    }
```

画板已经完成，查看源码请前往：my github,希望对你有所帮助

Canvas

Canvas系列之刮刮乐

看到几个朋友在玩刮刮乐，刚好最近在看canvas，就想着做一个刮刮乐，奖额自己定，想中多少就多少，是不是很嗨皮呢。。。。。。。当然，彩票虽好，但不要贪杯哦。。。。好的，言归正传，开始绘制了

绘制之前我们看看效果图：

guaguale

一点简单地结构

1
2
3
4
5
6
7
8
<div class="box">
<h2>刮 刮 乐</h2>
<div class="jiang">奖</div>
<div class="prize">
	<div class="content">500万</div>
	<canvas id="canvas" width="300" height="200"></canvas>
</div>
</div>

再来一斤的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.box{
	margin: 60px 100px;
	width:300px;
	height:500px;
	border:1px solid red;
	background:rgba(255,0,0,.8);
}
h2{
	text-align: center;
	font-size: 30px;
	color:cyan;
}
.jiang{
	width:200px;
	height: 200px;
	border-radius: 50%;
	background-color:rgba(255,0,0,.3);
	line-height: 200px;
	text-align: center;
	font-size: 60px;
	color:gold;
	margin:20px auto; 
}
.prize{
	height:200px;
	position: relative;
}
.content{
	width:300px;
	height: 200px;
	background-color:rgba(0,0,255,0.1);
	line-height: 200px;
	text-align: center;
	font-size: 60px;
	color:purple;
	margin:20px auto; 
}
#canvas{
	position:absolute;
	top: 0;
	left: 0;
	cursor: url('xpc.cur'),pointer;
}

相信大家看到这个设置了

cursor: url('xpc.cur'),pointer;
改变光标的样式

光标样式可以任你设置，但是也可以自定义设置哦，设置一个你喜欢的图案，用url引进去，后面加一个pointer，当然了，浏览器兼容图片的样式不同的，你要小心了。。。。。。这里我用的是.xpc格式的 png jpg 。。。。。。

好了，把剩余的都拿走把

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var canvas=document.querySelector('#canvas')
var ctx=canvas.getContext('2d')
ctx.fillStyle='lightgray'
ctx.fillRect(0,0,300,200)
ctx.save()
ctx.font='30px serif'
ctx.fillStyle='black'
ctx.fillText('刮奖区',100,60)
ctx.save()
ctx.font='50px serif'
ctx.strokeStyle='red'
ctx.strokeText('大吉大利',50,150)
canvas.onmousedown=function(){
		window.onmousemove=function(event){
			ctx.clearRect(event.offsetX,event.offsetY,20,20);
		}
	}
canvas.onmouseup = function(){
	window.onmousemove=function(){}
   }

祝君，下次玩刮刮乐中大奖！

Canvas

Canvas系列之五角星

实现

绘制N个颜色不同，旋转角度不同，位置随机出现的五角星

绘制画布就不讲啦 上篇已提到，很简单的

好吧 绘制也很简单，我把它封装成函数了

函数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function fivepStar(x,y,R,color=true,angle=true,stroke=true){
		context.beginPath();//开始
		var k=Math.sin(18*Math.PI/180)/Math.sin(36*Math.PI/180);
			k=k.toFixed(2);
			r=k*R;//大圆与小圆的关系
		/**************五角星偏转角度**************/
		if (angle===true) {
			angle=random(0,361);//五角星随机偏转角度,以(1,0)为参考点
		}else{
			angle=angle;//自定义角度
		}
		/**************五角星颜色**************/
		if (color===true) {
			color='rgba('+random(0,256)+','+random(0,256)+','+random(0,256)+','+Math.random()+')';//随机颜色
		}else{
			color=color;//自定义颜色
		}
		//五角星十点坐标
		for(let i=0;i<5;i++){
			context.lineTo(R*Math.cos((72*i+angle)*Math.PI/180)+x,R*Math.sin((72*i+angle)*Math.PI/180)+y);
			context.lineTo(r*Math.cos((72*i+36+angle)*Math.PI/180)+x,r*Math.sin((72*i+36+angle)*Math.PI/180)+y)
		}
		//五角星起点坐标
		context.lineTo(R*Math.cos(angle*Math.PI/180)+x,R*Math.sin(angle*Math.PI/180)+y);
		context.fillStyle=color;
		context.fill();
		if (stroke) {
			context.stroke();
		}
		context.closePath();
		function random(m,n){
			var num=Math.max(m,n)-Math.min(m,n);
			return Math.round(Math.random()*num+Math.min(m,n));
		}
	}

其中

* x为五角星中心横坐标
* y为五角星中心纵坐标
* R为五角星外五点外接圆半径
* color五角星颜色 默认随机颜色rgba格式
    如果需要自定义颜色，直接把参数改为自定义颜色为字符串类型
     如果需要随机且不需要透明可去代码rgba处把Math.random()改为1
* angle五角星偏转角度,以(1,0)为参考点 默认随机偏转
    如果不需要随机可自定义偏转角度 参数为数值类型
* stroke五角星边框 默认有 如果不需要参数改为false
**

封装随机函数

function random(m,n){
        var num=Math.max(m,n)-Math.min(m,n);
        return Math.round(Math.random()*num+Math.min(m,n));
    }

前往此处：my github,可以下载源码

Canvas

Canvas系列之贪吃蛇

准备

canvas画布 食物 蛇 键盘事件

1.canvas画布

绘制就很简单啦 你可以给点你喜欢的样式

1
2
3
<canvas width="600" height="400">
	你的浏览器不支持canvas，请使用chrome或更高版本的浏览器！
</canvas>

当然，你要先获取画布哦

1
2
var canvas=document.querySelector('canvas');
	var ctx=canvas.getContext('2d');

2.随机放置食物

x表示食物的大小 map是存放蛇身单元位置

var foodx=foody=?;定义食物的起点坐标

1
2
3
4
5
6
7
8
9
10
11
12
function food(x){
	foodx=Math.ceil(Math.random()*canvas.width/x)*x-x;
	foody=Math.ceil(Math.random()*canvas.height/x)*x-x;
	//判断不让食物随机到蛇身上
	map.forEach(function(e){
		if (e.x==foodx&&e.y==foody) {
			food(10);
		}
	})
	ctx.fillStyle='#000';//食物颜色
	ctx.fillRect(foodx,foody,x,x);//绘制矩形
}

3.蛇的移动及绘制

1.先做一个移动方向的判断

2.在做一个是否撞墙和撞自身的判断，这里用了forEach,你也可以用for循环代替

3.一个保证起始蛇身的判断

4.接下就就是绘制每一个蛇身单元，多个蛇身单元组成蛇身

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function moveSnake(){
		switch(direction){
			case 37:x-=size;break;//左
			case 38:y-=size;break;//上
			case 39:x+=size;break;//右
			case 40:y+=size;break;//下
		}
		//判断是否撞墙，撞墙则结束
		if (x<0||y<0||x+size>canvas.width||y+size>canvas.height) {
			end();
		}
		map.forEach(function(e){
			if (e.x==x&&e.y==y) {
				end();
			}
		})
		if (map.length>snakeLength) {//保持蛇长
			var last=map.shift();//删除数组第一项，并返回该元素
			ctx.clearRect(last.x,last.y,size,size)
		}
		//把单元蛇身保存并绘制
		map.push({"x":x,"y":y});
		ctx.fillStyle='cyan';
		ctx.fillRect(x,y,size,size);
		if (x==foodx&&y==foody) {
			food(10);
			snakeLength++;
			i++;
			score.value=i*10;
		}
	}

这里写了当游戏结束时，显示的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function end(){
	clearInterval(timer);
	if (score.value<100) {
		alert('继续努力哦!\nGAME OVER')
	}else if (score.value>=100) {
		alert('哎呦，不错!\nGAME OVER')
	}else if (score.value>=400) {
		alert('非常棒!\nGAME OVER')
	}else if (score.value>=800) {
		alert('你已无人能挡!\nGAME OVER')
	}else if (score.value>=1600) {
		alert('无敌战神!\nGAME OVER')
	}
	window.location=window.location;//刷新页面
	return;
}

增加游戏难度

你可以发挥你的想象来则加游戏难度，比如增加蛇的运动速度，canvas的画布变小等等

接下来就要讲讲键盘事件了

下面是键盘对应值：
keycode

按下键盘改变方向，这里我做了个space控制游戏的开始和暂停设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var code=null;
var space=true;
document.onkeydown=function(event){
	if (event.keyCode==32) {
		if (space) {
			timer=setInterval(moveSnake,60);
			space=!space;
		}else{
			clearInterval(timer);
			space=!space;
		}
		return;
	}
	//判断如果是相反键则失效
	if (Math.abs(code-event.keyCode)==2) {
		code=code;
	}else{
		code=event.keyCode;
	}
	switch(code){
		case 37:direction=37;break;//左
		case 38:direction=38;break;//下
		case 39:direction=39;break;//右
		case 40:direction=40;break;//上
	}
}

如果需要源码，请前往：我的 github,转载请注明出处，谢谢！

Canvas

简易时钟

基于css3、html的简约时钟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="time">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<nav class="hours"></nav>
	<nav class="minutes"></nav>
	<nav class="seconds"></nav>
</div>

1.表盘样式

表盘由一个div和12个span组成

2.时 分 秒

由三个div组成

js部分

1
2
3
4
5
6
7
8
9
10
11
var timer=setInterval(fun,1000);
function fun(){
	var time=new Date();
	var hours=time.getHours();
	var minutes=time.getMinutes();
	var seconds=time.getSeconds();
	var ms=time.getMilliseconds();
	document.querySelector(".hours").style.transform='rotateZ('+(hours*30+minutes/2+seconds/120)+'deg)';
	document.querySelector(".minutes").style.transform='rotateZ('+(minutes*6+seconds/10)+'deg)';
	document.querySelector(".seconds").style.transform='rotateZ('+seconds*6+'deg)';
}

效果图

clock

这个时钟很简单的，css样式随便你写，如果有需要，请传送到我的：github

CSS
很惭愧<br><br>只做了一点微小的工作<br>谢谢大家