简易计算器

闲着没事，在用到计算器的时候就想自己写一个，写的比较仓促，就写了一个简易的

功能：

实现了两个数的加、减、乘、除、求余运算,如果你是多个数运算的话，请你先计算两个数，接着与下面的数计算

效果图：

无忧

结构代码

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
<body>
	<div class="box">
		<div>
			<ul>
				<li class="data_cha"><span>x</span></li>
				<li><span>-</span></li>
				<li><span>+</span></li>
			</ul>
			<input type="text" disabled placeholder="0">
		</div>
		<table cellspacing="0" cellpadding="0">
			<tr>
				<td>AC</td>
				<td>+/-</td>
				<td class="yunsuanfu">%</td>
				<td class="yunsuanfu">&divide;</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td class="yunsuanfu">&times;</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td class="yunsuanfu">-</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td class="yunsuanfu">+</td>
			</tr>
			<tr>
				<td colspan="2">0</td>
				<td>.</td>
				<td>=</td>
			</tr>
		</table>
	</div>
</body>

js部分

用到了一点es6的语法

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
function $(x){
	return document.querySelector(x);
}
function $1(y){
	return document.querySelectorAll(y);
}
//点击x 计算器关闭
var data_cha=$('.data_cha');
var box = $('.box');
data_cha.onclick=function(){
	box.style.display='none';
}
//点击 显示 背景效果 及建立交互
var bg=$1('td');
var length=bg.length;
var input=$('input')
for(var i=0;i<length;i++){
	bg[i].index=i;
	bg[i].onmousedown=function(){
		if ((this.index)%4==3||(this.index)==length-1 ){			bg[this.index].style.backgroundColor='gray';
		}else if (this.index==1||this.index==2||this.index==0) {
			bg[this.index].style.backgroundColor='gray';
		}else{bg[this.index].style.backgroundColor='gray';
			 nput.value=input.value
			 +''+bg[this.index].innerHTML;
			bg[0].innerHTML="C";
			//正负 点击一下为负，再次点击为正	
			var n=0;
			bg[1].onclick=function(){
				n++;
				var kong='';
				if (n%2==1) {
					return input.value="-"+input.value;
				}else{
					for(i=1;i<input.value.length;i++){
						kong+=input.value[i];
					}
					return input.value=kong;
				}
			}
		}	
	}
	bg[i].onmouseup=function(){
		bg[this.index].style.backgroundColor='';	
	}
}
//点击C的时候变AC 并使文本框输入为空
bg[0].onclick=function(){
	bg[0].innerHTML="AC";
	return input.value='';
}
bg[16].onclick=function(){
	if (input.value[0]==0) {
		return input.value=input.value[0];
	}
} 
//输入值
function shuru(){
	 var num=Number(input.value);
	 return num;
}
//加减乘除定义 并取第一次输入值
var yunsuanfu=$1('.yunsuanfu');
var x,y,opt;
yunsuanfu[0].onclick=function(){
		opt="%";
		x =shuru();
		input.value='';
	}
yunsuanfu[1].onclick=function(){
		opt="&divide;";
		x =shuru();
		input.value='';
	}
yunsuanfu[2].onclick=function(){
		opt="&times;";
		x =shuru();
		input.value='';
	}
yunsuanfu[3].onclick=function(){
		opt="-";
		x =shuru();
		input.value='';
	}
yunsuanfu[4].onclick=function(){
		opt="+";
		x =shuru();
		input.value='';
	}
bg[18].onclick=function(){
		y=shuru();//取第二次输入值
	if (opt=="%") {input.value=x%y;}
	else if(opt=="-"){input.value=x-y;}
	else if(opt=="+"){input.value=x+y;}
	else if(opt=="&times;"){input.value=x*y;}
	else if(opt=="&divide;"){input.value=x/y;}
}

如有需要查看全部代码，请前往:My github

JavaScript

七个你可能不了解的CSS单位

我们很容易无法摆脱的使用我们所熟悉的CSS技术，当新的问题出现，这样会使我们处于不利的地位。

随着Web继续的发展，对新的解决方案的需求也会继续增大。因此，作为网页设计师和前端开发人员，我们别无选择，只有去了解我们的工具集并且熟悉它。

这意味着我们还要了解一些特殊的工具-那些不经常使用的，但是当需要它们的时候，它们恰恰是最正确的工具。

今天，我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位，就像像素或者相对单位,但是很可能你从来没听说过它们！让我们一探究竟吧。

rem

我们将从你已经熟悉的东西开始。em单位被定义为当前字体大小。例如，如果你在body元素上设置一个字体大小，那么在body元素内的任何子元素的em值都等于这个字体大小。

1
2
3
4
5
6
7
8
9
<body>
   	<div class="test">Test</div>
</body>
body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

在这里，我们说这个div将有一个1.2em的font-size。它是所继承的字体大小的1.2倍，在这个例子中为14px。结果为16.8px.

但是，当你在每个元素内都级联em定义的字体大小将会发生什么？在下面的代码片段中我们应用和上面一模一样的CSS.每个div从它们的父节点继承字体大小，带给我们逐渐增加的字体大小。

1
2
3
4
5
6
7
8
9
10
11
<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

虽然在某些情况下可能需要这个，但是通常你可能想基于一个唯一的度量标准来按比例缩放。在这种情况下，你应该用rem。rem中的”r”代表”root”；这等同于font-size基于根元素进行设置；在大多数情况下根元素为html元素。

1
2
3
4
5
6
html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

对网格布局的好处

rem不是只对定义字体大小有用。比如，你可以使用rem把整个网格系统或者UI样式库基于HTML根元素的字体大小上,然后在特定的地方使用em比例缩放。这将带给你更加可预测的字体大小和比例缩放。

vh和vw

响应式网页设计技术很大程度上依赖于比例规则。然而，CSS比例不总是每个问题的最佳解决方案。CSS宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样？这正是vh和vw单位所提供的。

vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。

这些规则表面上看起来有无尽的用途。例如，做一个占满高度的或者接近占满高度的幻灯片，可以用一个非常简单的方法实现，只要用一行CSS：

1
2
3
.slide {
    height: 100vh;
}

设想你想要一个占满屏幕宽度的标题。为做到这一点，你将会用vw来设置一个字体大小。这个大小将会随着浏览器的宽度按比例缩放。

vmin 和 vmax

vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。

所以你什么时候可能用到这些值？

设想你需要一个总是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将可以实现这个效果。例如，一个正方形的元素总是至少接触屏幕的两条边可能是这样定义的

1
2
3
4
.box {
    height: 100vmin;
    width: 100vmin;
}

如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成vmax。

1
2
3
4
.box {
    height: 100vmax;
    width: 100vmax;
}

ex 和 ch

ex和ch单位，与em和rem相似，依赖于当前字体和字体大小。然而，与em和rem不同的是，这两个单位只也依赖于font-family，因为它们被定为基于特殊字体的法案。

ch单位，或者字符单位被定义为0字符的宽度的“先进的尺寸”。在”Eric Meyer’s的博客”中可以找到一些非常有趣的讨论关于这意味着什么，但是基本的概念是，给定一个等宽字体的字体，一个N个字符单位宽的盒子，比如width：40ch;,可以一直容纳一个有40个字符的应用那个特定字体的字符串。虽然这个特殊规则的传统用途与列出盲文有关，但是这里创造性的可行性一定会超越这些简单的用途。

ex单位被定义为”当前字体的x-height或者一个em的一半”。给定的字体的x-height是指那个字体的小写x的高度。通常，这是这个字体的中间的标志。

对于这种单位有很多的用途，大多数是用于排版的微调。例如，sup元素,代表上标，可以用相对定位和一个1ex的底部值在行内被推高。类似地，你可以拉低一个下标元素。浏览器默认支持这些利用上标和下标特性的vertical-align规则，但是如果你想要更精细的控制，你可以像这样更明确的处理样式

1
2
3
4
5
6
7
8
sup {
    position: relative;
    bottom: 1ex;
}
sub {
    position: relative;
    bottom: -1ex;
}

ex单位在CSS1中已经存在，但是你不会找到对ch单位有像这样坚实的支持。具体支持，在Eric Meyer’s 的博客中查看CSS单位和值。

CSS

放大镜效果

今天分享一下放大镜的效果，希望对你有所帮助，若有不足请指正，望大家共同进步。

CSS样式

一些基本的css样式，你也可以根据你的爱好进行更改

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
44
45
46
47
48
*{
	margin: 0px;
	padding:0px;
}
.fangdajing{
	width: 400px;
	height: 400px;
	position: relative;
	margin:100px; 
}
.small{
	width: 400px;
	height: 400px;
	overflow: hidden;
	border: 1px solid;
}
img{
	border: none;
	border: 0px;
}
.small img{
	width: 400px;
	height: 400px;
	float: left;
}
.big{
	width: 400px;
	height: 400px;
	border: 1px solid;
	position: absolute;
	left: 412px;
	top: 0px;
	display: none;
	overflow: hidden;
}
.big img{
	position: absolute;
}
.mask{
	width: 150px;
	height: 150px;
	background: rgba(0,0,255,.3);
	position: absolute;
	left: 0px;
	top: 0px;
	cursor: move;
	display: none;
}

基本结构

一个大容器里面包括两个小容器，一个放原图和蒙版，另一个显示放大区域

1
2
3
4
5
6
7
8
9
<div class="fangdajing">
	<div class="small">
		<img src="tu.jpg" alt="小图片">
		<div class="mask"></div>
	</div>
	<div class="big">
		<img src="tu.jpg" alt="大图片">
	</div>
</div>

JS部分

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
44
45
46
47
48
window.onload=function(){
	var small=document.querySelector('.small')//定义变量为小图所在div
	var big=document.querySelector('.big')//定义变量为大图所在div
	var mask=document.querySelector('.mask')//定义蒙版
	var glass=document.querySelector('.fangdajing')//定义放大镜容器
	var img=document.querySelector('.big img')//大图
	//鼠标移入事件 移入时大图和蒙版显示出来
	small.onmouseover=function(){
		mask.style.display='block';
		big.style.display='block';
	}
	//鼠标移出事件 移出时大图和蒙版消失
	small.onmouseout=function(){
		mask.style.display='none';
		big.style.display='none';
	}
	//鼠标移动事件
	small.onmousemove=function(event){
		var oEvent=event||window.event;//兼容各个浏览器
		var x=oEvent.clientX;//鼠标距离窗口左边的距离
		var y=oEvent.clientY;//鼠标距离窗口顶部的距离
		//如果页面有上下和左右的滚动的效果，x y还要考虑这种情况
		x=x-glass.offsetLeft-mask.offsetWidth/2;
		//此x为蒙版left的大小  若外边仍有容器包裹还需减掉xxx.offsetLeft
		y=y-glass.offsetTop-mask.offsetHeight/2;
		//此y为蒙版top的大小   若外边仍有容器包裹还需减掉xxx.offsetTop
		if (x<=0) {
			x=0;
		}else if (x>=glass.offsetWidth-mask.offsetWidth) {
			x=glass.offsetWidth-mask.offsetWidth;
		}
		if (y<=0) {
			y=0;
		}else if (y>=glass.offsetWidth-mask.offsetHeight) {
		y=glass.offsetWidth-mask.offsetHeight;
		}
		mask.style.left=x+'px';
		mask.style.top=y+'px';
		// 竖向放大倍数
		var l=small.offsetWidth/mask.offsetWidth;
		// 水平方向放大倍数
		var s=small.offsetHeight/mask.offsetHeight;
		img.style.width=l*small.offsetWidth+"px";
		img.style.height=s*small.offsetHeight+"px";
		img.style.left=-l*x+'px';
		img.style.top=-s*y+'px';				
	}
}

效果图

选择的图片分辨率不高，看着有点模糊

御座

JavaScript

第一篇

之前看了好多博客，浏览了很多文章，看到很多新闻，确实感到收获很多，以前总是看，今天 自己搭建了博客，也来写一篇。

最近看文章感受很多的，无论是技术上，还是生活上。

在技术上，自己学到了很多，有的自己懂得看过之后会有两种感受：

一、原来还有这种解释，还有这种做法，技术深入学越有味道，嘎嘎嘎，我喜欢
二、还有一种，咦，这不是和我以前一样的菜鸟吗 ， 哈哈哈哈  当
然    。。。。。。。我现在还是菜鸟，大神路在前兮，我自向前走

看不懂的当然就用来涨涨知识啦，感兴趣的就深入一下，没兴趣的，就浅尝辄止。

在生活上，也学到了一些技巧，也有一些感受

在这给大家分享一句话：

我自心开，在短暂的生命中活出无限的欢乐。

Vue 安装

网址

可以直接下载并用script标签引入
今天介绍在控制中使用命令行工具来安装 没有权限时前面加sudo
1
2
3
4
5
6
7
8
9
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
执行后会有一些选项 选择no no yes;
查询npm版本号 需要可以更新
1
2
npm -v
npm install npm -g

最后执行

1
npm run dev

canvas--黑客帝国代码雨

先设置canvas画布 背景黑色

1
<canvas id="canvas" style="background:#111"></canvas>

简单的css样式

1
2
3
4
5
6
7
8
9
<style>
	*{
		padding:0;
		margin:0;
	}
	html{
		overflow:hidden;
	}
  </style>

下面是主要的js部分

首先我们要获取画布对象 然后设置画布的宽高等于浏览器的宽高

1
2
3
4
5
6
7
8
var canvas = document.getElementById("canvas");
var context =canvas.getContext("2d");
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

设置字体大小 并计算列数

1
2
var fontSize = 16;
var list = Math.floor(W /fontSize);

定义一个变量记录每列文字的y轴坐标 给每个文字初始化一个起点位置

1
2
3
4
var drops = [];
for(var i=0;i<list;i++){
	drops.push(0);
}

定义打印的文字

1
var str="javascript html5 canvas";

最后是绘画函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
	function draw(){
		//先给canvas设置一些样式
		context.fillStyle = "rgba(0,0,0,0.05)";
		context.fillRect(0,0,W,H);     //满屏填充
		context.font = "700 "+fontSize+"px  微软雅黑";
		context.fillStyle ="#00cc33";
		//并写入画布中
		for(var i=0;i<list;i++){
			var index = Math.floor(Math.random() * str.length);
			var x = i*fontSize;
			var y = drops[i] *fontSize;
			context.fillText(str[index],x,y);
			//时间改变的时候就改变每次文字的起点
			if(y >= canvas.height && Math.random() > 0.99){
				drops[i] = 0;
			}
			drops[i]++;
		}
	};
	//最后调用该函数 并每30毫秒调用一次
	draw();
	setInterval(draw,30);
};

最后的效果是这样的

Alt text

js~点击轮播

首先先写个HTML

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
div.second
        div
            p 合作机构
            div.hezuo
                div.tupian
                    ul
                        li
                            img(src="/images/mechanism1.png")
                        li
                            img(src="/images/mechanism2.png")
                        li
                            img(src="/images/mechanism3.png")
                        li
                            img(src="/images/mechanism4.png")
                        li
                            img(src="/images/mechanism5.png")
                        li
                            img(src="/images/mechanism6.png")
                        li
                            img(src="/images/mechanism7.png")
                        li
                            img(src="/images/mechanism1.png")
                        li
                            img(src="/images/mechanism2.png")
                        li
                            img(src="/images/mechanism3.png")
                        li
                            img(src="/images/mechanism4.png")
                        li
                            img(src="/images/mechanism5.png")
                        li
                            img(src="/images/mechanism6.png")
                        li
                            img(src="/images/mechanism7.png")
            span.dayu &gt
        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
.second{
	width:1230px;
	height: 300px;
	background: white;
	position: absolute;
	left:10%;
	top: 820px;
}
.second p{
	width:60px;
	position: absolute;
	left:60px;
	top: 60px;
}
.hezuo{
	height:50px;
	line-height: 50px;
	width:960px;
	color: #65707a;
	position: absolute;
	top:45px;
	left:173px;
	overflow: hidden;
}
.tupian{
	width:12880px;
	height:50px;
	float:left;
	position: absolute;
}
.tupian li img{
	width:150px;
	float: left;
	margin-left:10px;
}
.dayu{
	display: block;
	font-size: 20px;
	position: absolute;
	right:62px;
	top:57px;
}

前面的html和css比较简单,主要的是js部分.

首先我们获取点击和移动的对象

1
2
var dianji=document.querySelector(".dayu");
var box=document.querySelector(".tupian");

然后定义一些变量
var width是移动元素的父级的宽度,定义一个定时器timer,n是速度,i是对象元素的距离

1
2
3
4
var width = 160*7;
var n=0;
var i =0;
var timer =null;

然后写个点击事件,并做个判断,当i大于等于移动元素时停止,当n大于父级宽度的时候返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
dianji.onclick=function(){
    clearInterval(timer);
    timer=setInterval(function(){
        n+=4;
        i++;
        if( i == 40){
            clearInterval(timer);
            i=0;
        }
        if(n >= width){
            n=0
        }
        box.style.left =-n +'px' ;
    },5)
};

ok 点击向左移动就完成了 ,向右移,同理

最后的效果是这样的

Alt text

gulp 入门教程

安装gulp

在安装gulp之前你需要安装Node.js。
如果你还没有安装Node,你可以在这里下载。
安装完Node.js,使用Terminal(终端，win下是cmd)用下面命令安装Gulp

1
$ sudo npm install gulp -g

创建gulp项目

cd gulp 进入项目

1
npm init

然后会产生一个package.json文件 这里不需要改动

下一步

1
npm install gulp gulp-sass gulp-jade --save

执行完之后，gulp将创建node_modules文件夹，里面有个gulp文件夹。

然后下载配置文件

1
2
3
npm install gulp-watch
npm install gulp-clean-css
npm install gulp-uglify

手动新建gulpfile.js
然后配置gulpfile.js文件

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
var jade=require("gulp-jade");
var sass=require("gulp-sass");
var watch=require("gulp-watch");
var gulp=require("gulp");
var cleancss=require("gulp-clean-css");
var miniJS=require("gulp-uglify");
gulp.task("default",["watch"],function(){
})
gulp.task("date",function(){
	gulp.src("jade/*.jade")
	.pipe(jade({
		pretty:true
	}))
	.pipe(gulp.dest("html/"))
})
gulp.task("sass",function(){
	gulp.src("sass/*.scss")
	.pipe(sass({
		pretty:true
	}))
	.pipe(gulp.dest("css/"))
})
gulp.task("watch",function(){
	gulp.watch("jade/*.jade",["date"])
	gulp.watch("sass/*.scss",["sass"])
})

新建jade sass html css 文件夹

最后cd 项目 gulp运行一下就ok啦！

最后的效果是这样的

Alt text

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