zoukankan      html  css  js  c++  java
  • 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 Node Tree

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

    ……

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

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

    <title>点击显示大图的JS</title>
    <style>
    #demo{overflow:hidden;120px;text-align:center;padding:10px;}
    #demo img{border:3px solid #eeeeee;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标签】

    上标:<sup></sup>

     

     

    【安全性防护】

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

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

    $(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

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

     

     

  • 相关阅读:
    可持久化BCJ
    Codeforces 911 三循环数覆盖问题 逆序对数结论题 栈操作模拟
    找不同
    最接近的三数之和
    找到所有数组中消失的数字
    三数之和
    小程序中的变量
    二叉树的最近公共祖先
    深拷贝和浅拷贝
    下载安装JDK
  • 原文地址:https://www.cnblogs.com/942267027wzmblog/p/5583508.html
Copyright © 2011-2022 走看看