使用 canvas+JS绘制钟表

Published 2017-04-04

效果图如下：

附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用Canvas绘制钟表</title>
	<style>
		body {
			background-color: pink;
		}
		#clock {
			display: block;
			margin: auto;
			margin-top: 100px;
		}
	</style>
	<script>
	window.onload = function() {
		var drawing = document.getElementById("clock");
		var context = drawing.getContext("2d");
		function drawClock() {
			context.clearRect(0, 0, drawing.width, drawing.height);

			var circleX = 200;	// 圆心X坐标
			var circleY = 200;	// 圆心Y坐标
			var radius = 190;	// 半径长度

			// 获取时间信息
			var date = new Date();
			var hour = date.getHours();
			var min = date.getMinutes();
			var sec = date.getSeconds();

			// 分针走一圈60度，时针走30度
			// 度数转化为弧度  度数*Math.PI/180
			var hourValue = (-90+30*hour+min/2)*Math.PI/180;
			var minValue = (-90+6*min)*Math.PI/180;
			var secValue = (-90+6*sec)*Math.PI/180;

			// 绘制表盘
			context.beginPath();
			context.font = "bold 16px Arial";
			context.lineWidth = '3';
			for(var i=0;i<12;i++) {
                context.moveTo(circleX,circleY);
                context.arc(circleX,circleY,radius,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); 
            }
            context.stroke();

            context.fillStyle='#0ff';
            context.beginPath();
            context.moveTo(circleX,circleY);
            context.arc(circleX,circleY,radius*19/20,0,360*Math.PI/180,false);
            context.closePath();
            context.fill();

            // 绘制钟表中心
			context.beginPath();
			context.arc(200,200,6,0,360,false);
			context.fillStyle = "#000";
			context.fill();//画实心圆
			context.closePath();

			// 绘制时针刻度
			context.lineWidth = '5';
			context.beginPath();
			context.moveTo(circleX, circleY);
			context.arc(circleX, circleY, radius*9/20, hourValue, hourValue, false);
			context.stroke();

			// 绘制分针
			context.lineWidth = '3';
			context.beginPath();
			context.moveTo(circleX, circleY);
			context.arc(circleX, circleY, radius*13/20, minValue, minValue, false);
			context.stroke();
            
			// 绘制秒针
			context.lineWidth = '1';
			context.beginPath();
			context.moveTo(circleX, circleY);
			context.arc(circleX, circleY, radius*18/20, secValue, secValue, false);
			context.stroke();


			// 绘制钟表的数字
			context.fillStyle = "#0ad";
			context.fillText("12", 190, 34);
			context.fillText("3", 370, 206);
			context.fillText("6", 196, 378);
			context.fillText("9", 22, 206);

		}
		setInterval(drawClock, 1000);
		drawClock();
	}
	</script>
</head>
<body>
	<canvas id="clock" width="400" height="400">
		<span>你的浏览器不支持canvas元素，换个浏览器试试吧</span>
	</canvas>
</body>
</html>

JS 操作数组的方法

By Huangjing

Published 2017-04-01

1.检测数组 (判断一个值是不是数组)

　　　　var color = [“red”, “green”, “blue”];
　　　　(1) if (color instanceof Array) {}
　　　　(2) if (Array.isArray(value)) {}

2.转换方法

　　　　var color = [“red”, “green”, “blue”];
　　　　(1) toString()/toLocalString() ,把数组转化为字符串
　　　　color.toString() // “red,green,blue”
　　　　(2) valueOf()还是返回数组

## 操作数组的方法

1.栈方法 push() pop()
2.队列方法 shift() unshift() push()
3.重排序方法

　　　　反转数组 reverse()
　　　　排序 sort() (会先调用toString，再将得到的字符串排序)

4.操作方法

　　　　(1) concat() 连接数组 array1.concat(array2,”2”,”4”) 原数组不变
　　　　(2) slice(x1); // 返回从x1位置开始到末尾的一个新数组原数组不变
　　　　slice(x1, x2); // 返回从x1位置开始到x2位置(不包含x2)的一个新数组
　　　　var color1 = [“red”, “green”, “blue”, “white”];
　　　　var color2 = color1.slice(1,3); // [“red”, “white”]
　　　　(3) splice(x1, n); // 要删除的第一项的位置x1，要删除的项数n,返回被删除的项
　　　　var color1 = [“red”, “green”, “blue”, “white”];
　　　　var removed = color1.splice(1,2,”aa”,”bb”);
　　　　// removed是 [“green”, “blue”]
　　　　// color1是 [“red”, “aa”, “bb”, “white”];

5.位置方法

　　　　(1) indexOf() 返回查找到的位置，没找到返回-1
　　　　(2) lastIndexOf()
　　　　var numbers = [1,2,3,4,5,4,3,2,1];
　　　　numbers.indexOf(4); // 3 从前往后查找
　　　　numbers.lastIndexOf(4); // 5 从后往前查找

6.迭代方法

　　　　every() 对数组每一项运行给定函数，该函数每一项返回true则返回true
　　　　some() 对数组每一项运行给定函数，该函数任一项返回true则返回true
　　　　filter() 对数组每一项运行给定函数,返回该函数会返回true的项组成的数组
　　　　map() 对数组每一项运行给定函数,返回每次函数调用结果组成的数组
　　　　forEach() 对数组每一项运行给定函数,没有返回值

7.归并方法

　　　　reduce() 前向后和 reduceRight() 后向前

兼容浏览器的点击事件

By Huangjing

Published 2017-03-16

IE和其他浏览器在一些方法上存在差异：

1.获取事件，IE通过window.event

2.获取触发事件的节点 W3C标准: e.target

　　　　　　　　　　　IE: e.srcElement;

3.阻止冒泡 W3C标准：stopPropagation()

　　　　　　IE中： cancelBubble = true;

4.阻止默认操作 W3C标准： preventDefault()

　　　　　　　　IE中： returnValue = false;

5.事件监听 W3C标准： document.addEventListener(‘click’, func, false)

　　　　　 IE中： document.attachEvent(‘click’, func)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="clickme">Click me: 9</button>
        <script>
        function myHandler(e) {
            var src, parts;

            // 获取事件和触发事件的节点
            e = e || window.event;
            target = e.target || e.srcElement;

            // 实际工作
            parts = target.innerHTML.split(": ");
            parts[1] = parseInt(parts[1], 10)+1;
            target.innerHTML = parts[0] + ": " + parts[1];

            // 阻止冒泡
            if (typeof e.stopPropagation === "function") {
                e.stopPropagation();
            }
            if (typeof e.cancelBubble !== "undefined") {
                e.cancelBubble = true;
            }

            //阻止默认操作
            if (typeof e.preventDefault === "function") {
                e.preventDefault();
            }
            if (typeof e.returnValue !== "undefined") {
                e.returnValue = false;
            }
        }

        var clickMe = document.getElementById('clickme');
        if (document.addEventListener) { // 一般浏览器
            clickMe.addEventListener('click', myHandler, false);
        } else if (document.attachEvent) { // IE
            clickMe.attach('click',myHandler);
        } else { // last resort
            clickMe.onclick = myHandler;
        }
    </script>
</body>
</html>

运行效果（每点击一次值加1）

ES6基本知识点

By Huangjing

Published 2017-03-07

一、var,const,let的区别

1.var：没用块级作用域，变量声明提升（可以先使用再声明变量），未用var声明的变量会被添加一个全局作用域，而用var声明的变量作用域是当前上下文。

2.const：const用来声明常量，一旦声明，其值就不能改变，所以用const声明变量时必须立即初始化。

const声明的常量具有块级作用域，不允许重复声明常量，不存在常量提升。

const PI = 3.14;
PI    // 3.14

PI = 3;
// TypeError: "PI" is read-only
// const声明常量时立即赋值，后面不能改变它的值

3.let： let声明的变量也具有块级作用域，不允许重复声明变量，不存在变量提升。

{
    let a = 10;    // a只在let命令所在的代码块内有效
    var b = 1；        
}
a    // ReferenceError: a is not defined
b    // 1

二、数值的扩展

1.二进制和八进制分别用前缀0b（或0B）和0o（或0O）表示

2.ES6在Number对象上提供了Number.isFinite()和Number.isNaN()方法，用来检查Infinite和NaN这两个特殊值。

Number.isFinite()和Number.isNaN()这两个新方法和传统的全局方法isFinite()和isNaN()的区别：
传统方法先调用Number()将非数值转化为数值再进行判断，而新方法只对数值有效，对非数值一律返回false。

3.Number.isInteger()用来判断一个值是否为整数。

1	注意：在JavaScript内部，整数和浮点数是同样的储存方法，3.0和3视为同一个值

4.安全整数和Number.isSafeInteger()

安全整数范围：-2^{53}——2^{53}（不含两个端点）

5.Math对象的扩展

Math.trunc()用于去除一个数的小数部分，返回整数部分

1 2	Math.trunc(5.8) // 5 Math.trunc(-4.9) // -4

Math.sign()用于判断一个数是正数、复数、零

正数    返回+1
复数    返回-1
0        返回0
-0       返回-0
其他值  返回NaN

Math.cbrt()计算一个数的立方根
Math.clz32()返回一个数的32位无符号整数形式有多少个前导0
Math.imul()返回两个数以32位带符号整数相乘的结果，结果也为32位带符号整数
Math.fround()返回一个数的单精度浮点数形式
Math.hypot()返回所有参数的平方和的平方根

三、箭头函数

var f = v => v;
// 等同于 
var f = function(v) {
    return v;  
}
var sum = (num1, num2) => num1 + num2;
// 等同于 
var sum = function(num1, num2) {
    return num1+num2;  
}

上传项目到github上

By Huangjing

Published 2017-02-17

找到要上传项目的根目录，右击git bush进入git命令行

输入git init , 目录下会产生.git的隐藏项目
输入git add . 命令（注意add与 . 之间有空格）

. 是指添加到该目录下的所有文件，也可以添加特定文件
提交到本地仓库 git commit -m “description for this commit”
上传代码 git remote add origin https://github.com/用户名/项目名.git (可以去github网站复制该项目的远程仓库地址)
git pull origin master 把远程服务器github上的文件拉开
git push origin master 把项目上传到远程仓库

The blog of Huangjing

生命当如花盛开，莫让心志埋尘埃

使用 canvas+JS绘制钟表

JS 操作数组的方法

兼容浏览器的点击事件

ES6基本知识点

一、var,const,let的区别

二、数值的扩展

三、箭头函数

上传项目到github上