Code笔记 之：注册页面验证码

文章内容包括：

1、验证码制作 -- 中文|字母|数字|……

2、图文验证码 -- 图片防盗链（PHP而非JS）

3、JS防止右键点击图片

4、input表单输入框不记录输入过的信息

5、CSS+div格式化页面布局

1、验证码制作

参考：http://www.imooc.com/video/2458

待续……

2、图片防盗链

【For Example】TP 框架中，在地址栏中可以直接访问类的成员函数，比如 http://localhost/Member/common/panduan

这里的panduan()是一个方法，写在  class CommonAction extends MCommonAction{} 类CommonAction控制器里面的，

成员函数 public function panduan(){  ……  }就写在类控制器CommonAction里面，如果不想让外界直接访问该方法，

可以使用  防盗链  技术，即：

public function panduan(){

　　if(!$_SERVER['HTTP_REFERER']){

　　　　echo "访问出错！";

　　}

…………

}

【技术讲解】防盗链技术使用了HTTP的Referer

3、JS防止右键点击图片

防止右键点击：鼠标右键点击图片时，不弹出右键菜单。

<script language="javascript">
 /*document.oncontextmenu=Youji;*/  //为当前文档添加鼠标右击事件，防止默认的右击菜单弹出
    function Youji()
    {
  alert("右击成功！");

return false;
 }
 
 //为某个dom元素添加鼠标右击事件
 window.onload = function(){
  document.getElementById("div1").oncontextmenu=Youji;
 } 
 window.onload = function(){
  document.getElementById("vimg").oncontextmenu=Youji;
  document.getElementById("div1").oncontextmenu=Youji;
 }
 /*  可能只执行一个window.onload()*/
  </script>
 <img src="/imgs/1.gif" id="vimg"/>
 <div id="div1" >
 </div>

\\\\\\\\\\\\\\\window.onload()简介

windows.onload()  调用 必须等到页面内包括图片的所有元素加载完毕后才能执行。

window.onload = Checkbox_Click. Checkbox_Click is a js function.

不能同时编写多个，如果有多个window.onload方法，只会执行一个

与$(document).ready区别：

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

$(document).ready()可以同时编写多个，并且都可以得到执行.
$(document).ready(function(){})可以简写成$(function(){});

\\\\\\\\\\\\\Dom是什么//////////

参考：http://www.w3school.com.cn/htmldom/dom_nodes.asp

DOM就是HTML元素---即节点，所有HTML元素（节点）都可以被修改、删除等。

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

……

\\\\\\\\DOM概念介绍结束////////

PS：介绍点击小图显示成大图的JS效果

<title>点击显示大图的JS</title>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:3px solid #eeeeee;width:100px;height:75px;}
#enlarge_images{position:absolute;display:none;z-index:2;}
</style>
<div id="demo"><img src="/jscss/demoimg/wall7.jpg" border="0" alt=""/></div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
var ts = gg[i];
ts.onclick = function(event){
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = '<img src="' + this.src + '" />';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function(){
ei.innerHTML = "";
ei.style.display = "none";
}
}
</script>

4、input表单不记录输入过的信息

当我们在浏览器中输入表单信息的时候，往往input文本输入框会记录下之前提交表单的信息，以后每次只要双击 input文本输入框就会出现之前输入的文本，这样有时会觉得比较方便，但有时也会暴露用户的隐藏数据。

　　如果让input表单输入框不记录输 入过的信息，方法如下：

其实很简单，只需要在input文本输入框中加一条autocomplete="off"属性即可，相关代码如下所示：

<input type="text" name="uname" autocomplete="off" />

5、CSS+div

【style 样式属性】

行高：line-height

浮动：float

边框：border  ，比如：border:1px solid #ccc;  /*表示边框是灰色实线粗度1px*/

圆角边框：border-radius ， 详见 www.kuqin.com/shuoit/20141014/342620.html

【html标签】

上标：

【安全性防护】

通常在网站建设中，有不少网站会被恶意攻击，我们要有效的防止我们的网站受到这样的攻击，可以采取一些办法来解决，当然，这些办法对于高手来讲，也会变的容易。但是的确能防止一下恶意攻击者，可以通过禁止他们查看源代码来解决该问题。

【禁止页面的鼠标右键菜单-查看源代码】

$(document).ready(function(){

//为dom元素:img id="pV" 添加右击事件
window.onload =function(){ //pV 
document.getElementById("pV").oncontextmenu=function(){ return false;};
window.oncontextmenu=function(){ return false;};　　//为所有dom元素（即整个页面）添加“禁止查看源代码”
}
});

【HTML页面中-如何隐藏js代码】

实际上，js代码是无法隐藏的，只能混淆或者加密，或者使用其他方法。

思路一：混淆或者加密
严格不能叫加密只是混淆替换了所有的变量名。

{弊端}脚本语言混淆只是可读性变差了。但是高手会用chrome或者ff的console去调试你的JS。所以，安全是相对来说的。

思路二：引用js文件

用引用方法引用js页面会看不到代码，可以做成JS文件，然后调用JS连接。
在JS文件目录做好权限设置，防止非法访问和下载。

{格式}

<script type="text/javascript" src="你的js文件.js"> </script>
这样，js代码写在js文件里，就不会在html页面被看到了。

--------------------------------------------------------------

由于个人对技术知识的表达不是很专业，还望各位看官

多多见谅，多多评论，多多指导！

不吝赐教~(~_~)

首次撰写日期：2016-6-14 11:30:13

最新修改日期：2016-6-16 16:18:35

2016-6-28 10:29:43

---------------------------------------------------------------