您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:AJAX会员注册,ajax实现输入框文字改

新葡亰496net:AJAX会员注册,ajax实现输入框文字改

发布时间:2019-08-17 15:30编辑:新葡亰官网浏览(193)

    canvas 入门实战–特邀卡生成与下载

    2018/01/04 · HTML5 · Canvas

    原稿出处: 守候   

    强大的<canvas>,强大<canvas>

    reg.php:
    <script language="javascript" src="ajaxlist.js"></script>
    <script>
    function check(){
    checkUserName_1('username',16,'unamespan')
    checkpw_1('password',6,'upw')
    checkSame_1('password','passAgain','urpw')
    checkrealname_1('realname',8,'urealname')
    checktel_1('tel',14,'utel')
    checkfax_1('fax',14,'ufax')
    checkmobile_1('mobile',11,'umobile')
    checkEmail_1('email','uemail')
    var myform=document.myform;
    if (myform.username.keytype==1){
    return false;
    }
    if (myform.password.keytype==1){
    return false;
    }
    if (myform.realname.keytype==1){
    return false;
    }
    if (myform.tel.keytype==1){
    return false;
    }
    if (myform.fax.keytype==1){
    return false;
    }
    if (myform.email.keytype==1){
    return false;
    }
    if (myform.mobile.keytype==1){
    return false;
    }
    }
    </script>

    1.样式

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
    (function(w){

    1.前言

    写了数不胜数的javascript和css3的稿子,是时候写一篇canvas的了。canvas是html5提供的多个新的机能!至于效果,正是二个画布。然后画笔就是javascript。canvas的用途丰盛的广,非常是html5游戏以及数额可视化这两个方面。今后canvas给本身的痛感就和css3一样,能够不要太狠,不过必须求会基础的用法。然则随后对canvas的须要,鲜明会越加大。所以canvas很值得学习,况且学好canvas,正是很好的一个加分项。对于那篇文章,笔者也是以canvas初学者的角度写的,会有无尽改正的地点。假诺大家认为自个儿有怎么样能够立异的,可能建议,迎接携带迷津!代码已上传github,须要的款待star(downloadImg)。

    世家看那篇文章此前,要明白javascript的局地基础,也要望着询问部分canvas的api(canvas-MSN教程,canvas新手教程)

    <canvas>

    小编会告诉您本人不止写了那篇博客还录了录制吗?这里是录制地址 。作者会告知您日前前端进级最佳的qq群是 130977811 吗?群里每一周都有录像在线分享。

    私家感到<canvas>是h5最重量级的新标签了,现在种种h5小游戏都以依靠<canvas>的,它为游乐提供了一个功效庞大的画布,可在画布上制图丰盛的内容,同时也催生出非常多游乐引擎。未来就归纳介绍一下<canvas>的部分主题绘图和图片管理效果:

      <form name="myform" method="post" action="Reganswer.html" onSubmit="return check()">
      <input type="hidden" name="oktext" value="iiiooo" />
      <TABLE border=0 cellSpacing=1 cellPadding=3 width="100%" align="center">
                  <tbody>
         <tr>
                    <td height="25" align=right>会员帐号:</td>
                    <td width="242" valign=top nowrap><INPUT onBlur="checkUserName_1('username',16,'unamespan')" size="30" onFocus="onFouces('unamespan')" name=username keytype2="uname" class="input_txt" keytype="1" style="height:22px; width:222px"> <strong><font color="#FF0000">*</font></strong></td>
                    <td width="382" valign=top nowrap><SPAN class=gray id=unamespan>3-16个字符(a-z,0-9,_)</SPAN></td>
         </tr>
                  <tr>
                    <td height="25" align=right>会员密码:</td>
                    <td><INPUT onBlur="checkpw_1('password',6,'upw')" onFocus="onFouces('upw')" class="input_txt" type=password maxLength=30 name=password keytype2="pw" keytype=1 style="height:22px; width:222px">
                      <strong><font color="#FF0000">*</font></strong></td>
                    <td><SPAN class=gray id=upw>6-16个字符(a-z,a-z,0-9,_)</SPAN></td>
                  </tr>
                  <tr>
                    <td height="25" align=right valign=middle>验证密码:</td>
                    <td><INPUT onBlur="checkSame_1('password','passAgain','urpw')" onFocus="onFouces('urpw')" class="input_txt" type=password maxLength=30 name=passAgain keytype2="rpw" keytype="1" style="height:22px; width:222px">
                      <strong><font color="#FF0000">*</font></strong>
                    <td><SPAN class=gray id=urpw>请再输入一遍登入密码。</SPAN></tr>

    复制代码 代码如下:

    var quse = {
    colors : [],
    getUrl : function(obj){

    2.邀约卡实例

    特邀卡自动生成那些会有个别,究竟偶尔候,非常多约请卡都以均等的,即是被特邀的人分裂而已,约等于说,整个诚邀卡,正是四个名字不等同,那么下边。就写一套代码,根据名字生成约请卡!

    1.绘制线条

    绘制的为主步骤是:先用getContext("2d")获取二维绘图景况上下文,有二维那料定也可能有四位了?是的,三个维度就要用到WebGL了,本事水平有限,明天就不商讨三个维度了(三围肿么这么面熟~~!)。然后设置画笔样式,lineWidth画笔宽度,strokeStyle画笔颜色,lineCap线头样式。样式设置达成后就从头绘图了,首先用moveTo()把贰个看不到的光标移动到起源地方,然后lineTo()设定至关心尊崇要,最后stroke()画出线条。

    新葡亰496net 1

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset = "utf-8">
    <title>绘制线条</title>
    <style>
     body,div{margin:0px;padding:0px;text-align:center}
     #canv{
       border:2px solid black;
       border-radius:4px;
       box-shadow:0px 0px 10px black;
       -webkit-box-shadow:0px 0px 10px black;
       -moz-box-shadow:0px 0px 10px black;
     }
    </style>
    </head>
    
    <body>
        <h1>绘制线条</h1>
        <canvas id="canv" width="400px" height="300px">
            你若能看到这句话说明你浏览器不支持canvas!
        </canvas>
    </body>
    <script type="text/javascript">
        var canv = document.getElementById("canv");
       //获取2d上下文
       var ctx = canv.getContext("2d");
       //设置样式
       ctx.lineWidth = 40;
       ctx.strokeStyle = "red";
       ctx.lineCap = "round"; //butt ,square,round
       ctx.beginPath();
       //设置起始点
       ctx.moveTo(20,20);
       ctx.lineTo(200,200);
       //开始绘制定义好的路径
       ctx.stroke();
    </script>
    </html>
    

                  <tr>
                    <td height="25" colspan="3" align=center valign=middle><hr width="90%" color=#cccccc size=1></td>
                  </tr>
                    <tr valign=top>
                      <td height="25" align=right valign=middle>您的人名:<strong><font color="#FF0000"></font></strong></td>
                      <td width="242" valign=top><INPUT onBlur="checkrealname_1('realname',8,'urealname')" class="input_txt" onFocus="onFouces('urealname')" type=text maxLength=30 name=realname keytype2="realn" keytype=1 size="30">
                      <strong><font color="#FF0000">*</font></strong></td>
                      <td width="382" valign=top><SPAN class=gray id=urealname>请输入您的人名。</SPAN></td>
                    </tr>
                    <tr valign=top>
                      <td height="25" align=right valign=middle>您的性别:</td>
                      <td valign=top><input type=radio checked value=0 name=sex class="input_txt">
                        先生  
                        <input type=radio value=1 name=sex>
                        女士 </td>
                      <td valign=top> </td>
                    </tr>
        <TR vAlign=top>
                <TD align="right" vAlign=middle>所在省份:</TD>
                <TD colspan="2"><SELECT name=area class="input_txt" onChange="ChangeSelect(document.myform.area.options[document.myform.area.selectedIndex].value);">
                  <OPTION value="" selected>请选用省</OPTION>
           <option value='1'>浙江省</option><option value='3'>安徽省</option><option value='4'>北京</option><option value='5'>福建省</option><option value='6'>甘肃省</option><option value='7'>广东省</option><option value='8'>广西</option><option value='9'>贵州省</option><option value='10'>海南省</option><option value='11'>河北省</option><option value='12'>河南省</option><option value='13'>黑龙江</option><option value='14'>湖北省</option><option value='15'>湖南省</option><option value='16'>吉林省</option><option value='17'>江苏省</option><option value='18'>江西省</option><option value='19'>辽宁省</option><option value='20'>内蒙古</option><option value='21'>宁夏</option><option value='22'>青海</option><option value='23'>山东省</option><option value='24'>山西省</option><option value='25'>陕西省</option><option value='26'>上海</option><option value='27'>四川省</option><option value='28'>天津</option><option value='29'>西藏</option><option value='30'>新疆</option><option value='31'>云南省</option><option value='32'>重庆</option><option value='2161'>台湾</option><option value='2162'>香港</option><option value='2163'>澳门</option>
                </SELECT>
       <select name="city" class="input_txt">
       <option value="" selected="selected">请选取市</option>
       </select> <strong><font color="#FF0000">*</font></strong></TD>
                </TR>
        <TR vAlign=top>
       <TD align="right" valign="middle">职业单位:</TD>
       <TD><INPUT maxLength=80 class="input_txt" size=30 name=company></TD>
          <TD> </TD>
        </TR>
              <TR vAlign=top>
                <TD align="right" vAlign=middle>联系地址:</TD>
                <TD><font color=#ff6600 size=2><input class="input_txt" size=30 name=address></font></TD>
                <TD> </TD>
              </TR>
              <TR vAlign=top>
                <TD vAlign=middle align=right>邮  编:</TD>
                <TD><FONT color=#ff6600 size=2><INPUT class="input_txt" size=30 name=zip></FONT></TD>
                <TD> </TD>
              </TR>
                    <tr valign=top>
                      <td height="25" align="right" valign=middle>电  话:<strong><font color="#FF0000"></font></strong></td>
                      <td><INPUT onBlur="checktel_1('tel',14,'utel')" class="input_txt" onFocus="onFouces('utel')" type=text maxLength=30 name=tel keytype2="uteln" keytype=1 size="30"> <strong><font color="#FF0000">*</font></strong></td>
                      <td><SPAN class=gray id=utel>请勿超过16个字符,格式比方:0571-8886一九二八。</SPAN></td>
                    </tr>
                    <tr valign=top>
                      <td height="25" align=right valign=middle>传  真:</td>
                      <td><INPUT onBlur="checkfax_1('fax',14,'ufax')" class="input_txt" onFocus="onFouces('ufax')" type=text maxLength=30 name=fax keytype2="ufaxn" keytype=1 size="30"> <strong><font color="#FF0000">*</font></strong></td>
                      <td><SPAN class=gray id=ufax>请勿超过十七个字符,格式比方:0571-88861930。</SPAN></td>
                    </tr>
                    <tr valign=top>
                      <td height="25" align=right valign=middle>邮  箱:<strong><font color="#FF0000"></font></strong></td>
                      <td><INPUT onBlur="checkEmail_1('email','uemail')" size="30" class="input_txt" onFocus="onFouces('uemail')" maxLength=64 name=email keytype2="eml" keytype="1"> <strong><font color="#FF0000">*</font></strong></td>
                      <td><SPAN class=gray id=uemail>请可相信填写邮件地址,方便注册激活。</SPAN></td>
    新葡亰496net,                </tr>
                    <tr valign=top>
                      <td height="25" align="right" valign=middle>手  机:</td>
                      <td><INPUT onBlur="checkmobile_1('mobile',14,'umobile')" class="input_txt" onFocus="onFouces('umobile')" type=text maxLength=30 name=mobile keytype2="umobilen" keytype=1 size="30"> <strong><font color="#FF0000">*</font></strong></td>
                      <td><SPAN class=gray id=umobile>格式举例:13588888888。</SPAN></td>
                    </tr>
                    <tr>
                      <td height="25" align="right">咨询QQ:</td>
                      <td><input size=30 name=QQ maxlength="20" class="input_txt"></td>
                      <td> </td>
                    </tr>

    <style type="text/css">
    <!--
    body{background:#fff}
    .Menu {
    position:relative;
    width:180px;
    height:120px;
    z-index:1;
    background: #EEE;
    border:1px solid #666;
    margin-top:-100px;
    display:none;
    }
    .Menu2 {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:120px;
    overflow:hidden;
    z-index:1;
    OVERFLOW-y:auto;
    }
    .Menu2 ul{margin:0;padding:0}
    .Menu2 ul li{width:100%;height:25px;line-height:20px;text-indent:15px;
    border-bottom:1px dashed #999;color:#333;cursor:pointer;
    change:expression(
    this.onmouseover=function(){
    this.style.background="";
    },
    this.onmouseout=function(){
    this.style.background="";
    }
    )
    }
    input{width:120px}
    #List1,#List2{left:0px;top:103px;}
    -->
    </style>

    var url;

    2-1.运营效果新葡亰496net 2

    html代码

    JavaScript

    <html> <head> <meta charset="utf-8"> <title>下载图片</title> <style> .set-option { float: left; width: 400px; } .set-option .text { width: 200px; height: 40px; padding-left: 10px; border-radius: 4px; border: 1px solid #ccc; } .set-option td { padding: 10px 0; } .set-option td:first-child { text-align: right; padding-right: 10px; } .set-option p { margin: 0; line-height: 16px; } .check-box { width: 16px; height: 16px; margin: 0; vertical-align: top; } button { width: 200px; height: 50px; border: none; color: #fff; font-size: 16px; cursor: pointer; display: block; margin: 10px auto; } button:hover { opacity: .9; } .btn-all { background: #f90; } .btn-save { background: #09f; } .btn-download { background: #4CAF50; } </style> </head> <body> <div> <div class="set-option"> <table> <tr> <td>画布尺寸</td> <td><input type="text" class="text" id="size"/></td> </tr> <tr> <td>背景图片</td> <td><input type="file" id="file"/></td> </tr> <tr> <td>用户名</td> <td> <input type="text" class="text" id="user-name"/> </td> </tr> <tr> <td>用户名x坐标</td> <td> <input type="number" class="text" id="text-option-x"/></br> <p><input type="checkbox" class="check-box" value="1" id="is-center-x">居中体现</p> </td> </tr> <tr> <td>用户名y坐标</td> <td> <input type="number" class="text" id="text-option-y"/></br> <p><input type="checkbox" class="check-box" value="1" id="is-center-y">居中浮现</p> </td> </tr> <tr> <td>用户名字体大小</td> <td><input type="number" class="text" id="text-size"/></td> </tr> <tr> <td>文字颜色</td> <td><input type="text" class="text" id="text-color"/></td> </tr> <tr> <td>图片类型</td> <td> <select type="text" class="text" id="img-type"> <option value="jpg">jpg</option> <option value="png">png</option> </select> </td> </tr> </table> <button id="save-image" class="btn-save">效果预览</button> <button id="download-img" class="btn-download">下载当前图片</button> <button id="download-all" class="btn-all">批量导出</button> </div> <div class="show-canvas"> <canvas width=200 height=200 id="thecanvas"></canvas> </div> </div> </body> </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
    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
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    <html>
    <head>
        <meta charset="utf-8">
        <title>下载图片</title>
        <style>
            .set-option {
                float: left;
                width: 400px;
            }
     
            .set-option .text {
                width: 200px;
                height: 40px;
                padding-left: 10px;
                border-radius: 4px;
                border: 1px solid #ccc;
            }
     
            .set-option td {
                padding: 10px 0;
            }
     
            .set-option td:first-child {
                text-align: right;
                padding-right: 10px;
            }
     
            .set-option p {
                margin: 0;
                line-height: 16px;
            }
     
            .check-box {
                width: 16px;
                height: 16px;
                margin: 0;
                vertical-align: top;
            }
     
            button {
                width: 200px;
                height: 50px;
                border: none;
                color: #fff;
                font-size: 16px;
                cursor: pointer;
                display: block;
                margin: 10px auto;
            }
     
            button:hover {
                opacity: .9;
            }
     
            .btn-all {
                background: #f90;
            }
     
            .btn-save {
                background: #09f;
            }
     
            .btn-download {
                background: #4CAF50;
            }
        </style>
    </head>
    <body>
    <div>
        <div class="set-option">
            <table>
                <tr>
                    <td>画布尺寸</td>
                    <td><input type="text" class="text" id="size"/></td>
                </tr>
                <tr>
                    <td>背景图片</td>
                    <td><input type="file" id="file"/></td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td>
                        <input type="text" class="text" id="user-name"/>
                    </td>
                </tr>
                <tr>
                    <td>用户名x坐标</td>
                    <td>
                        <input type="number" class="text" id="text-option-x"/></br>
                        <p><input type="checkbox" class="check-box" value="1" id="is-center-x">居中显示</p>
                    </td>
                </tr>
                <tr>
                    <td>用户名y坐标</td>
                    <td>
                        <input type="number" class="text" id="text-option-y"/></br>
                        <p><input type="checkbox" class="check-box" value="1" id="is-center-y">居中显示</p>
                    </td>
                </tr>
                <tr>
                    <td>用户名字体大小</td>
                    <td><input type="number" class="text" id="text-size"/></td>
                </tr>
                <tr>
                    <td>文字颜色</td>
                    <td><input type="text" class="text" id="text-color"/></td>
                </tr>
                <tr>
                    <td>图片类型</td>
                    <td>
                        <select type="text" class="text" id="img-type">
                            <option value="jpg">jpg</option>
                            <option value="png">png</option>
                        </select>
                    </td>
                </tr>
            </table>
            <button id="save-image" class="btn-save">效果预览</button>
            <button id="download-img" class="btn-download">下载当前图片</button>
            <button id="download-all" class="btn-all">批量导出</button>
        </div>
        <div class="show-canvas">
            <canvas width=200 height=200 id="thecanvas"></canvas>
        </div>
    </div>
    </body>
    </html>

    效果与利益如图,那么大家细想一下,关于一张诚邀卡,有何样事物是要求退换的!看到上图比较轻便开掘!有如下需求改变的本性:图片的分寸,图片,用户名,用户名的坐标(x,y,x轴是还是不是居中,y轴是不是居中),用户名字体的深浅,用户名字体的水彩,以及下载图片的项目。

    像这种类型就获得了如下的参数(大家看到有个别参数是有值的,能够想成暗许值就行了)

    var option = { img: '111.jpg', width: 500, height: 350, fontSize: "20px Microsoft YaHei", color: "black", text: '守候', imgType: 'jpg', x: 30, y: 30, xCenter: false, yCenter: false, };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var option = {
        img: '111.jpg',
        width: 500,
        height: 350,
        fontSize: "20px Microsoft YaHei",
        color: "black",
        text: '守候',
        imgType: 'jpg',
        x: 30,
        y: 30,
        xCenter: false,
        yCenter: false,
    };

    2.制图矩形

    矩形的绘图步骤同上所述,但有两种绘制类型:实心矩形fillRect(起点x,源点y,长,宽),空心矩形strokeRect(源点x,源点y,长,宽)。

    新葡亰496net 3

       var canv = document.getElementById("canv");
       //获取2d上下文
       var ctx = canv.getContext("2d");
       //设置样式
       ctx.lineWidth = 10;
       ctx.strokeStyle = "red"; 
    
       //绘制实心矩形
       ctx.fillStyle="red";
       ctx.fillRect(10,10,100,100);
    

        </table></td>
                    </tr>
                    <tr>
                      <td height="45" colspan="3" align="right"></td>
                    </tr>
                  </tbody>
              </table></form>

    1. html脚本

    url = window.webkitURL.createObjectURL(obj.files.item(0));

    2-2.步骤

    3.绘制圆形

    同样,也分实心和空心,主要利用arc(圆心x,圆心y,半径,其实角度,甘休角度*Math.PI/180,顺逆时针);

    新葡亰496net 4

    var canv = document.getElementById("canv");
       //获取2d上下文
      var ctx = canv.getContext("2d");
       //设置样式
       ctx.lineWidth = 10;
       ctx.strokeStyle = "red";
    
     /*  ctx.beginPath();
       //中心点,半径,始末角度,顺逆时针
       ctx.arc(200,200,50,0,270*Math.PI/180,false);
       ctx.stroke();
    */
    
       //实心
       ctx.fillStyle = "red";
       ctx.beginPath();
       ctx.arc(200,200,50,0,270*Math.PI/180,false);
       ctx.fill();
    

    ajaxlist.js

    复制代码 代码如下:

    return url;

    1.从头效用

    听别人说上边的参数,先先河画二个意义,代码基本都是五个写法,没什么技艺

    //画图 function draw(obj) { var canvas = document.getElementById("thecanvas"); //画布大小 canvas.width = obj.width; canvas.height = obj.height; //设置图片 var img = new Image(); img.src = obj.img; var ctx = canvas.getContext("2d"); //设置字体的坐标 var _x = obj.x, _y = obj.y; //是还是不是居中突显 if (obj.xCenter) { _x = obj.width / 2; } if (obj.yCenter) { _y = obj.height / 2; } //图片加载后 img.onload = function () { //先画图纸 ctx.drawImage(img, 0, 0); //设置文字的尺寸 ctx.font = obj.fontSize; //设置文字的颜色 ctx.fillStyle = obj.color; //设置文字坐标 if (obj.xCenter) { ctx.textAlign = "center"; } //画文字 ctx.fillText(obj.text, _x, _y); }; } window.onload = function () { draw(option); }

    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
    //画图
    function draw(obj) {
        var canvas = document.getElementById("thecanvas");
        //画布大小
        canvas.width = obj.width;
        canvas.height = obj.height;
        //设置图片
        var img = new Image();
        img.src = obj.img;
        var ctx = canvas.getContext("2d");
        //设置字体的坐标
        var _x = obj.x, _y = obj.y;
        //是否居中显示
        if (obj.xCenter) {
            _x = obj.width / 2;
        }
        if (obj.yCenter) {
            _y = obj.height / 2;
        }
        //图片加载后
        img.onload = function () {
            //先画图片
            ctx.drawImage(img, 0, 0);
            //设置文字的大小
            ctx.font = obj.fontSize;
            //设置文字的颜色
            ctx.fillStyle = obj.color;
            //设置文字坐标
            if (obj.xCenter) {
                ctx.textAlign = "center";
            }
            //画文字
            ctx.fillText(obj.text, _x, _y);
        };
    }
     
    window.onload = function () {
        draw(option);
    }

    4.擦除

    能破就能够立,能绘制就能够擦除,用clearRect(源点x,源点y,擦出范围长,擦出范围宽)实现擦除。

    新葡亰496net 5

    //设置样式
       ctx.lineWidth = 10;
       ctx.fillStyle = "red";
       //绘制矩形
      ctx.fillRect(10,10,200,100);
      //擦除
      ctx.clearRect(30,30,100,50);
    

     

    ........省略常规脚本

    },
    bing : function(obj){

    新葡亰496net 62.动态退换参数

    看来图已经画好了,职业其实已经完结一半了!

    上边就是动态改动参数!这一步其实很简短。
    第一,改动画布的尺码

    //画布尺寸 //获取按键 var size = document.getElementById("size"); size.addEventListener("blur", function () { //根据空格,区分高宽 var _width = parseInt(size.value.replace(/(^s*)|(s*$)/g, "").split(/s /)[0]), _height = parseInt(size.value.replace(/(^s*)|(s*$)/g, "").split(/s /)[1]); //把参数的width和height改掉 option.width = _width || 100; option.height = _height || 100; //重新画图 draw(option); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //画布尺寸
    //获取按钮
    var size = document.getElementById("size");
    size.addEventListener("blur", function () {
        //根据空格,区分高宽
        var _width = parseInt(size.value.replace(/(^s*)|(s*$)/g, "").split(/s /)[0]),
            _height = parseInt(size.value.replace(/(^s*)|(s*$)/g, "").split(/s /)[1]);
        //把参数的width和height改掉
        option.width = _width || 100;
        option.height = _height || 100;
        //重新画图
        draw(option);
    });

    上边代码设置了,只要输入框失去了点子,就能够改造画布的大小,下边来运转下,看下效果(gif图适得其反,我们看懂就好)新葡亰496net 7

    canvas未有层级的布道,只要改canvas,都要重绘。哪怕便是三个字移动贰个像素。

    办好了那么些,下边做选用图片的功力!

    //选择图片 //获取图片控件 var file = document.getElementById("file"), imagesFile, imageData; file.addEventListener('change', function (e) { //获取图片 imagesFile = e.target.files[0]; //把图片转base64 var reader = new FileReader(); reader.readAsDataUWranglerL(imagesFile); //图片加载后 reader.onload = function (e) { //设置option的img属性,再洗濯年绘制 imageData = this.result; option.img = imageData; draw(option); } }); <img src="" />

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    //选择图片
    //获取图片控件
    var file = document.getElementById("file"), imagesFile, imageData;
    file.addEventListener('change', function (e) {
        //获取图片
        imagesFile = e.target.files[0];
        //把图片转base64
        var reader = new FileReader();
        reader.readAsDataURL(imagesFile);
        //图片加载后
        reader.onload = function (e) {
            //设置option的img属性,再冲洗年绘制
            imageData = this.result;
            option.img = imageData;
            draw(option);
        }
    });
     
    <img src="https://segmentfault.com/img/bVZX7E?w=991&h=797" />

    新葡亰496net 8下边开头改文字,用户名这一个有一点点分裂样,作者以空格分割。假如输入几个用户名,以第贰个用户名重绘。下边代码,注释就不写了,依然和方面包车型客车逻辑一样!

    //用户名 var userName = document.getElementById("user-name"); userName.addEventListener("blur", function () { var _text = userName.value.replace(/(^s*)|(s*$)/g, "").split(/s /); option.text = _text[0]; draw(option); }); <img src="" />

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //用户名
    var userName = document.getElementById("user-name");
    userName.addEventListener("blur", function () {
        var _text = userName.value.replace(/(^s*)|(s*$)/g, "").split(/s /);
        option.text = _text[0];
        draw(option);
    });
     
    <img src="https://segmentfault.com/img/bVZUnM?w=949&h=703" />

    新葡亰496net 9下边伊始用户名的坐标,代码方面,也是改option的相干部家属性

    optionXCenter.addEventListener("change", function () { if (optionXCenter.checked) { option.xCenter = true; } else { option.xCenter = false; option.x = parseInt(optionX.value); } draw(option); }); //纵坐标 var optionY = document.getElementById("text-option-y"); optionY.value = option.y; var optionYCenter = document.getElementById("is-center-y"); optionY.add伊芙ntListener("input", function () { if (optionYCenter.checked) { option.yCenter = true; } else { option.yCenter = false; option.y = parseInt(optionY.value); } draw(option); }); //是不是垂直居中展现 optionYCenter.addEventListener("change", function () { if (optionYCenter.checked) { option.yCenter = true; } else { option.yCenter = false; option.y = parseInt(optionY.value); } draw(option); });

    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
        optionXCenter.addEventListener("change", function () {
            if (optionXCenter.checked) {
                option.xCenter = true;
            }
            else {
                option.xCenter = false;
                option.x = parseInt(optionX.value);
            }
            draw(option);
        });
        //纵坐标
        var optionY = document.getElementById("text-option-y");
        optionY.value = option.y;
        var optionYCenter = document.getElementById("is-center-y");
        optionY.addEventListener("input", function () {
            if (optionYCenter.checked) {
                option.yCenter = true;
            }
            else {
                option.yCenter = false;
                option.y = parseInt(optionY.value);
            }
            draw(option);
        });
        //是否垂直居中显示
        optionYCenter.addEventListener("change", function () {
            if (optionYCenter.checked) {
                option.yCenter = true;
            }
            else {
                option.yCenter = false;
                option.y = parseInt(optionY.value);
            }
            draw(option);
        });

    新葡亰496net 10是或不是水平居中显得新葡亰496net 11

    任何的品质,字体大小和颜料,基本是平等的代码,运营的功力图小编不放了!

    //字体颜色 var textColor = document.getElementById("text-color"); textColor.addEventListener("blur", function () { textColor.value === "" ? option.color = "#fff" : option.color = '#' textColor.value; draw(option); }); //字体大小 var textSize = document.getElementById("text-size"); textSize.add伊夫ntListener("input", function () { textSize.value === "" ? option.fontSize = '20px Microsoft YaHei' : option.fontSize = textSize.value 'px Microsoft YaHei'; draw(option); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //字体颜色
    var textColor = document.getElementById("text-color");
    textColor.addEventListener("blur", function () {
        textColor.value === "" ? option.color = "#fff" : option.color = '#' textColor.value;
        draw(option);
    });
    //字体大小
    var textSize = document.getElementById("text-size");
    textSize.addEventListener("input", function () {
        textSize.value === "" ? option.fontSize = '20px Microsoft YaHei' : option.fontSize = textSize.value 'px Microsoft YaHei';
        draw(option);
    });

    5.渐变

    可达成二种渐变情势:线性渐变createLinearGradient(),径向渐变createRadialGradient()。

    新葡亰496net 12

     var canv = document.getElementById("canv");
       //获取2d上下文
      var ctx = canv.getContext("2d");
    
      //径向渐变
      var grd=ctx.createRadialGradient(100,100,10,100,100,50);
      grd.addColorStop(0.1,"red");
      grd.addColorStop(0.8,"blue");
      ctx.fillStyle=grd;
      ctx.fillRect(0,0,200,200);
    
    /* 
      //线性渐变 
      var grd=ctx.createLinearGradient(0,0,200,0);
      grd.addColorStop(0.2,"red");//必须0-1之间的数,代表颜色的渐变权重
      grd.addColorStop(0.7,"blue");
      ctx.fillStyle=grd;
      ctx.fillRect(0,0,200,200);
      */
    

    var username_help='3-16个字符(a-z,0-9,_)';
    var username_ok='<img src=images/note_ok.gif valign=middle>';
    var username_error='<img src=images/note_error.gif align=absbottom> 用户名超过了16个字符!';

    <tr>
    <th>小车牌子名:</th>
    <td>
    <input type="text" id="generalBrandName" name="generalBrandName" value="${*.generalBrandName}" style="width:180px" data-validation-engine="validate[required]" <c:if test="${!empty carType.brandIdGeneral}"> disabled="disabled" </c:if> onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"/>
    <input type="hidden" id="brandIdGeneral" name="brandIdGeneral" value="${*.brandIdGeneral}" style="width:180px" />
    <span class="required">必填*</span>
    <div class="Menu" id="List1">
    <div class="Menu2" id="ListLi1">
    <%-- <ul>--%>
    <%-- <li onmousedown="getValue('generalBrandName','宝马','brandIdGeneral','idx');showAndHide('List1','hide');">宝马</li>--%>
    <%-- <li onmousedown="getValue('generalBrandName','奥迪','brandIdGeneral','idx');showAndHide('List1','hide');">奥迪</li>--%>
    <%-- </ul>--%>
    </div>
    </div>

    var self = this;

    3.开关操作

    功效预览

    正是预览当前canvas的二个功能,这些就很轻松了,正是新开三个窗口,然后把图纸写进去而已

    //预览图片 function saveImageInfo() { var mycanvas = document.getElementById("thecanvas"); //生成图片 var image = mycanvas.toDataUEvoqueL("image/png"); var w = window.open('about:blank', 'image from canvas'); //把图片新进新的窗口 w.document.write("<img src="" image %十分之二22" alt="from canvas" />"); } var saveButton = document.getElementById("save-image"); saveButton.add伊芙ntListener('click', saveImageInfo);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //预览图片
    function saveImageInfo() {
        var mycanvas = document.getElementById("thecanvas");
        //生成图片
        var image = mycanvas.toDataURL("image/png");
        var w = window.open('about:blank', 'image from canvas');
        //把图片新进新的窗口
        w.document.write("<img src="" image "" alt="from canvas" />");
    }
    var saveButton = document.getElementById("save-image");
    saveButton.addEventListener('click', saveImageInfo);

    新葡亰496net 13

    下载当前图片

    下载图片那一个,基本也是写法的,都以些回忆的东西

    //图片类型 var imgType = document.getElementById("img-type"); imgType.addEventListener("change",function () { option.imgType=this.value; }); //下载图片 function downloadImg(fileName) { //获取canvas var myCanvas = document.getElementById("thecanvas"); //设置图片类型 var image = myCanvas.toDataUEvoqueL("image/" option.imgType).replace("image/" option.imgType, "image/octet-stream"); var save_link = document.createElementNS('', 'a'); save_link.href = image; //设置下载图片的名号 save_link.download = fileName '.' option.imgType; //下载图片 var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    //图片类型
    var imgType = document.getElementById("img-type");
    imgType.addEventListener("change",function () {
        option.imgType=this.value;
    });
    //下载图片
    function downloadImg(fileName) {
        //获取canvas
        var myCanvas = document.getElementById("thecanvas");
        //设置图片类型
        var image = myCanvas.toDataURL("image/" option.imgType).replace("image/" option.imgType, "image/octet-stream");
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = image;
        //设置下载图片的名称
        save_link.download = fileName '.' option.imgType;
        //下载图片
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    }

    新葡亰496net 14

    批量下载图片

    以此复杂一点,但也简单,下边一步一步来!

    1.先是批量导出,那么用户名笔者那边是利用空格分割,那么未来自个儿在option里面,弄二个字段textAll,全数文字的聚合。all代表是还是不是是批量下载。fn属性代表回调函数

    //批量导出 var downloadAll = document.getElementById("download-all"); downloadAll.addEventListener('click', function () { var _text = userName.value.replace(/(^s*)|(s*$)/g, "").split(/s /); option.textAll = _text; option.all = true; option.fn = downloadImg; draw(option); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //批量导出
    var downloadAll = document.getElementById("download-all");
    downloadAll.addEventListener('click', function () {
        var _text = userName.value.replace(/(^s*)|(s*$)/g, "").split(/s /);
        option.textAll = _text;
        option.all = true;
        option.fn = downloadImg;
        draw(option);
    });

    2.然后修改绘制的函数draw,推断是或不是是全部制图的景观!

    JavaScript

    function draw(obj) { var canvas = document.getElementById("thecanvas"); //画布大小 canvas.width = obj.width; canvas.height = obj.height; //设置图片 var img = new Image(); img.src = obj.img; var ctx = canvas.getContext("2d"); //设置字体的坐标 var _x = obj.x, _y = obj.y; //是或不是居中呈现 if (obj.xCenter) { _x = obj.width / 2; } if (obj.yCenter) { _y = obj.height / 2; } //图片加载后 img.onload = function () { //是还是不是是全体打字与印刷 if(obj.all){ //遍历textAll for(var i=0;i<obj.textAll.length;i ){ //绘制图片 ctx.drawImage(img,0,0); //设置字体大小 ctx.font=obj.fontSize; //设置字体颜色 ctx.fillStyle=obj.color; //是或不是居中展现 if(obj.xCenter){ ctx.textAlign="center"; } //绘制文字 ctx.fillText(obj.textAll[i], _x,_y); //是或不是回调 if(obj.fn){ obj.fn(obj.textAll[i]); } } //最终撤消一切批量下载 defult.all=false; } else{ ctx.drawImage(img,0,0); ctx.font=obj.fontSize; ctx.fillStyle=obj.color; if(obj.xCenter){ ctx.textAlign="center"; } ctx.fillText(obj.text, _x,_y); } }; }

    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
    function draw(obj) {
        var canvas = document.getElementById("thecanvas");
        //画布大小
        canvas.width = obj.width;
        canvas.height = obj.height;
        //设置图片
        var img = new Image();
        img.src = obj.img;
        var ctx = canvas.getContext("2d");
        //设置字体的坐标
        var _x = obj.x, _y = obj.y;
        //是否居中显示
        if (obj.xCenter) {
            _x = obj.width / 2;
        }
        if (obj.yCenter) {
            _y = obj.height / 2;
        }
        //图片加载后
        img.onload = function () {
            //是否是全部打印
            if(obj.all){
                //遍历textAll
                for(var i=0;i<obj.textAll.length;i ){
                    //绘制图片
                    ctx.drawImage(img,0,0);
                    //设置字体大小
                    ctx.font=obj.fontSize;
                    //设置字体颜色
                    ctx.fillStyle=obj.color;
                    //是否居中显示
                    if(obj.xCenter){
                        ctx.textAlign="center";
                    }
                    //绘制文字
                    ctx.fillText(obj.textAll[i], _x,_y);
                    //是否回调
                    if(obj.fn){
                        obj.fn(obj.textAll[i]);
                    }
                }
                //最后取消全部批量下载
                defult.all=false;
            }
            else{
                ctx.drawImage(img,0,0);
                ctx.font=obj.fontSize;
                ctx.fillStyle=obj.color;
                if(obj.xCenter){
                    ctx.textAlign="center";
                }
                ctx.fillText(obj.text, _x,_y);
            }
        };
    }

    6.像素管理:黑白管理,反色处理

    规律:先把要拍卖的图形读取到canvas上,然后遍历每种像素点,改换像素的rgb值就可以。

    曲直处理:

    新葡亰496net 15

    反色管理:

    新葡亰496net 16

    <body>
        <h1>像素处理</h1>
      <img src = "logo.png" id="logo" />
        <canvas id="canv" width="800px" height="800px">
            你若能看到这句话说明你浏览器不支持canvas!
        </canvas>
    
    </body>
    <script type="text/javascript">
      var canv = document.getElementById("canv");
       //获取2d上下文
      var ctx = canv.getContext("2d");
    
      var image = new Image();
      image.src = "01.jpg";
      image.onload = function(){
      ctx.drawImage(image,0,0);
      var imgdata = ctx.getImageData(0,0,250,250);
      var pixels = imgdata.data;
    
    /* // 遍历每个像素并对 RGB 值进行取反
    for (var i=0, n=pixels.length; i<n; i = 4){
    pixels[i] = 255-pixels[i];  //r
    pixels[i 1] = 255-pixels[i 1];  //g
    pixels[i 2] = 255-pixels[i 2];  //b
    } */
    
    
      // 遍历每个像素并更改 RGB 值
      for (var i=0, n=pixels.length; i<n; i = 4){
      var grayscale = pixels[i]*.3 pixels[i 1]*.59 pixels[i 2]*.11;  //灰度处理
        pixels[i ] = grayscale; // r
        pixels[i 1] = grayscale; // g
        pixels[i 2] = grayscale; // b
      }
    
      // 在指定位置进行像素重绘
      ctx.putImageData(imgdata, 250, 0);
    }; 
    
    </script>
    

    var username_error_1='<img src=images/note_error.gif align=absbottom> 您的用户名输入格式不得法!';
    var username_exist='<img src=images/note_error.gif align=absbottom> 您填写的用户名曾经存在!';
    var username_null='<img src=images/note_error.gif align=absbottom> 用户名无法为空!';

    </td>
    </tr>

    obj.onchange = function(){

    新葡亰496net 17新葡亰496net 18

    7.小动画

    动画片原理:先绘制一张图纸drawImage(img,x,y,80,80);时刻改换图片的坐标x,y来使图片不断运动。

    新葡亰496net 19

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>动画</title>
    </head>
    <body>
    <canvas id="cav" width="500" height="500">// 设置绘图环境
         var cav = document.getElementById("cav");
         var cxt=cav.getContext('2d'); 
        //初始位置
         var x=5;
         var y=5;
        // 创建绘图对象,并且画出来 
         var img =new Image();
         img.src="logo.png";
         draw();
         function draw()
         {        //清除上一帧动画
              cxt.clearRect(0,0,500,500);  //十分重要
              x =5;
              y =5;
              cxt.drawImage(img,x,y,80,80);
         }
         //设定动画,时间间隔100毫秒
        var time = setInterval(draw,100);
    
        function stop(){
            clearInterval(time);
        }
    </script>
    </body>
    </html>
    

    例如我们不拔除上三回绘制的结果效果会怎么呢?那就注释掉cxt.clearRect(0,0,500,500);试一试。

    function draw()
         {        //清除上一帧动画
             //注释掉啦 cxt.clearRect(0,0,500,500);  //十分重要
              x =5;
              y =5;
              cxt.drawImage(img,x,y,80,80);
         }
    

    效用将接连出现一叠制图的图形:

    新葡亰496net 20

    var password_help='6-16个字符(a-z,a-z,0-9,_)';
    var password_too_simple='<img src=images/note_error.gif align=absbottom> 您设置的密码过于简短!';

    ........省略常规脚本
    <tr>
    <th>小车厂家名:</th>
    <td>
    <input type="text" id="brandName" name="brandName" value="${*.brandName}" style="width:180px" data-validation-engine="validate[required]" <c:if test="${!empty carType.brandId}"> disabled="disabled" </c:if> onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');" />
    <input type="hidden" id="brandId" name="brandId" value="${*.brandId}" style="width:180px" />
    <span class="required">必填*</span>
    <div class="Menu" id="List2">
    <div class="Menu2" id="ListLi2">
    </div>
    </div>

    var img = self.createImage(self.getUrl(this));

    3.小结

    有关canvas入门的第一篇小说,就写到这里了。写完现在,也开采本人对canvas的也可能有无数的不懂!上文的这例子,知识canvas很简短的两个入门实例。canvas假若深切学习,能做到比较多令人惊异的法力,那么些能够往要增加学习,固然开采些值得记录的知识,小编也会写作品。canvas是一个特别值得学习的学问,也是很有意思的八个学问。期待与大家有越来越多的交换和上学!

    1 赞 2 收藏 评论

    新葡亰496net 21

    8.拖拽原理 canvas完成简易画板

    新葡亰496net 22<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <style> #canvas{cursor:default;} #red{background:red; width:30px;height: 27px} #blue{background:blue; width:30px;height: 27px} #yellow{background:yellow; width:30px;height: 27px} #white{background:white; width:30px;height: 27px} #zi{background:#8B026B; width:30px;height: 27px} </style> </head> <body> <canvas id="canvas" width="600" height="400"> </canvas> <br><label>画笔颜料:</label> <input type="button" id="red" onclick="linecolor='red'"> <input type="button" id="blue" onclick="linecolor='blue'"> <input type="button" id="yellow" onclick="linecolor='yellow'"> <input type="button" id="white" onclick="linecolor='white'"> <input type="button" id="zi" onclick="linecolor='#8B026B'"> <label>画笔宽度:</label> <select id="sel"> <option value="4">4</option> <option value="8">8</option> <option value="16">16</option> <option value="30">30</option> </select> <input type="button" value="生成图片" onclick="toImg()"><br> <img id="image" src="" width="500px" height="200px"> <script type="text/javascript"> //下拉画笔宽度 window.onload=function(){ var huabi=document.getElementById("sel"); huabi.onchange=function(){ linw=huabi.value; }; //linw=huabi; }; var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //画一个普鲁士蓝矩形 ctx.fillStyle="#002200"; ctx.fillRect(0,0,600,400); //按下标志 var onoff=false; var oldx=-10; var oldy=-10; //设置颜色默感觉黄铜色 var linecolor="white"; //画笔宽度 var linw=5; //鼠标移动事件,事件绑定 canvas.add伊芙ntListener("mousedown",down,false); canvas.add伊夫ntListener("mousemove",draw,true); canvas.add伊芙ntListener("mouseup",up,false); function down(event){ onoff=true; oldx=event.pageX; oldy=event.pageY; } function up(){ onoff=false; } function draw(event){ if(onoff==true) { var newx=event.pageX; var newy=event.pageY; ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap="round"; ctx.stroke(); oldx=newx; oldy=newy; } } function toImg(){ document.getElementById("image").src=canvas.toDataULacrosseL("image/jpg"); } </script> </body> </html> 点笔者进行代码

    效果:

    新葡亰496net 23

    剧情很基础,各位见笑啊。

     

    canvas 笔者会告诉您自己不止写了那篇博客还录了摄像吗?这里是摄像地址。我会告诉您日前前端进级最棒的qq群是 1309...

    var password_too_length='<img src=images/note_error.gif align=absbottom> 您设置的密码长度超越了14个字符!';
    var password_ok='<img src=images/note_ok.gif valign=middle>';
    var password_null='<img src=images/note_error.gif align=absbottom> 密码不可能为空!';

    </td>
    </tr>

    }

    var repassword_help='请再输入一回登入密码!';
    var repassword_unsame='<img src=images/note_error.gif align=absbottom> 输入的登录密码不等同,请重新输入!';
    var repassword_null='<img src=images/note_error.gif align=absbottom> 验证密码不可能为空!';

    3.经过JS来兑现ajax异步伏乞 依据输入的剧情过滤

    },
    createImage : function(url){

    var urealname_help='请输入您的姓名。';

    复制代码 代码如下:

    var img = new Image;
    img.src = url;

    var urealname_ok='<img src=images/note_ok.gif valign=middle>';
    var urealname_null='<img src=images/note_error.gif align=absbottom> 姓名不能够为空!';
    var urealname_error='<img src=images/note_error.gif align=absbottom> 姓名超过了8个字符!';
    var urealname_error2='<img src=images/note_error.gif align=absbottom> 姓名格式不得法!';
    var utel_help='请勿超越16个字符,格式举个例子:0571-8886一九二九。';
    var utel_null='<img src=images/note_error.gif align=absbottom> 电话无法为空!';
    var utel_error='<img src=images/note_error.gif align=absbottom> 电话超越了17个字符!';
    var utel_error2='<img src=images/note_error.gif align=absbottom> 电话格式不科学!';
    var ufax_help='请勿抢先十四个字符,格式比方:0571-8886一九二七。';
    var ufax_null='<img src=images/note_error.gif align=absbottom> 传真无法为空!';
    var ufax_error='<img src=images/note_error.gif align=absbottom> 传真抢先了15个字符!';
    var ufax_error2='<img src=images/note_error.gif align=absbottom> 传真格式不得法!';
    var umobile_help='格式比如:13588888888。';
    var umobile_null='<img src=images/note_error.gif align=absbottom> 手提式有线电话机号码无法为空!';
    var umobile_error='<img src=images/note_error.gif align=absbottom> 手提式有线电话机号码超过了11个字符!';
    var umobile_error2='<img src=images/note_error.gif align=absbottom> 手机号码格式不科学!';
    var email_help='请精确填写邮件地址,方便注册激活。';
    var email_error='<img src=images/note_error.gif align=absbottom> 您的邮箱填写不科学!';

    //页面加载的时候

    var self = this;

    var email_exist='<img src=images/note_error.gif align=absbottom> 此邮箱已被登记,请输入任何邮箱地址!';
    var email_null='<img src=images/note_error.gif align=absbottom> 邮箱无法为空!';

    jQuery(function($) {
    if (navigator.userAgent.indexOf("MSIE") > 0) {
    document.getElementById('generalBrandName').attachEvent("onPropertyChange", appendList);
    document.getElementById('brandName').attachEvent("onPropertyChange", appendList);
    }
    else if (navigator.userAgent.indexOf("Firefox") > 0) {
    document.getElementById('generalBrandName').addEventListener("input", appendList, false);
    document.getElementById('brandName').addEventListener("input", appendList, false);
    }
    });

    img.onload = function(){
    self.putImage(img);
    }

    var email_ok='<img src=images/note_ok.gif valign=middle>';
    var word_help='word_help';
    var word_error='word_error';
    var oTR;
    var oTD;
    //该函数可以创建大家必要的XMLHttpRequest对象

    //////// 预加载
    jQuery(function($) {
    txtValue = $("#generalBrandName").val();
    //////// 给txtbox绑定键盘事件
    $("#generalBrandName").bind("keyup", function() {
    var currentValue = $(this).val();
    if (currentValue != txtValue) {
    appendList('List1',currentValue);
    txtValue = currentValue;
    }
    });

    },
    putImage : function(img){

    function getHTTPObject(){
    var xmlhttp = false;
    if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
    if(xmlhttp.overrideMimeType){
    xmlhttp.overrideMimeType('text/xml');

    txtValue = $("#brandName").val();
    //////// 给txtbox绑定键盘事件
    $("#brandName").bind("keyup", function() {
    var currentValue = $(this).val();
    if (currentValue != txtValue) {
    appendList('List2',currentValue);
    txtValue = currentValue;
    }
    });

    var canvas = document.getElementById("canvas");

    }
    }else{
    try{
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
    try{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(E){ xmlhttp = false; }
    }
    }
    return xmlhttp;
    }
    var http = getHTTPObject();

    });

    var ctx = canvas.getContext("2d");

    function getAbsLeft(e){
    var l=e.offsetLeft;
    while(e=e.offsetParent) l = e.offsetLeft;

    //完结动态突显下拉列表内容的function

    var imgWidth = canvas.width = img.width;

    return l;
    }
    function getAbsTop(e) {
    var t=e.offsetTop;
    while(e=e.offsetParent) t = e.offsetTop;

    //依照输入框中的值来筛选obj中的值
    function appendList(obj,value){
    value = encodeUTiguanIComponent(value); value = encodeU兰德途胜IComponent(value); //五次选拔encodeU途乐I()
    switch(obj){
    case "List1": //根据车品牌名来刷选List第11中学的值
    $.getJSON(
    ctx "/car/carmodel/**.do",
    {keyWord : value, id : new Date().getTime()}, <!-- 发生二个时光戳,不让IE认为是一致的UHavalL而选择cache -->
    function (json) {
    createLis('ListLi1',json);
    }
    );
    break;
    case "List2": //依据车商家名来刷选List第22中学的值
    $.getJSON(
    ctx "/car/carmodel/**.do",
    {keyWord : value, id : new Date().getTime()}, <!-- 发生三个时日戳,不让IE以为是一样的U中华VL而使用cache -->
    function (json) {
    createLis('ListLi2',json);
    }
    );
    break;
    }
    }

    var imgHeight = canvas.height = img.height;

    t=t 18;
    return t;
    }
    //-------------------------------------------------------

    function createLis(obj,json){
    switch(obj){
    case "ListLi1": //依据车品牌名来刷选List1中的值
    var executerDiv = document.getElementById(obj); //动态生成下拉列表框
    executerDiv.innerHTML="";
    var ul=document.createElement("ul");
    $.each(json, function (i, item) {
    var li=document.createElement("li");
    var str = "getValue('generalBrandName','" item.brandNameGeneral "','brandIdGeneral','" item.brandIdGeneral "');showAndHide('List1','hide')";
    li.setAttribute("onmousedown",str);
    li.appendChild(document.createTextNode(item.brandNameGeneral));
    新葡亰496net:AJAX会员注册,ajax实现输入框文字改变展示下拉列表的效果示例。ul.appendChild(li);
    });
    executerDiv.appendChild(ul);
    break;
    case "ListLi2": //依据车商家名来刷选List第22中学的值
    var executerDiv = document.getElementById(obj); //动态生成下拉列表框
    executerDiv.innerHTML="";
    var ul=document.createElement("ul");
    $.each(json, function (i, item) {
    var li=document.createElement("li");
    var str = "getValue('brandName','" item.brandName "','brandId','" item.brandId "');showAndHide('List1','hide')";
    li.setAttribute("onmousedown",str);
    li.appendChild(document.createTextNode(item.brandName));
    ul.appendChild(li);
    });
    executerDiv.appendChild(ul);
    break;
    }
    }
    //显示恐怕遮盖层
    function showAndHide(obj,types){
    var Layer=window.document.getElementById(obj);
    switch(types){
    case "show":
    Layer.style.display="block";
    appendList(obj,'');
    break;
    case "hide":
    Layer.style.display="none";
    break;
    }
    }

    canvas.style.marginLeft = -imgWidth/2 "px";

    function onFouces(str){
    document.getElementById(str).className='word_help';

    //获取选中节点的剧情
    function getValue(obj1,str,obj2,idx){
    var input=window.document.getElementById(obj1);
    input.value=str;
    var input=window.document.getElementById(obj2);
    input.value=idx;
    }

    ctx.drawImage(img , 0,0,imgWidth,imgHeight,0,0,imgWidth,imgHeight);

    if(str=='unamespan'){
    document.getElementById(str).innerHTML=username_help;

    4.显得效果
    新葡亰496net 24

    this.bindCanvas(canvas);

    }else if(str=='upw'){
    document.getElementById(str).innerHTML=password_help;

    您大概感兴趣的稿子:

    • jquery用ajax格局从后台获取json数据后怎么着将内容填充到下拉列表
    • 应用AjaxControlToolkit实现百度查寻时的下拉列表提示详细步骤
    • Ajax动态为下拉列表增多数据的兑现形式

    },
    start : function(id){
    var fileInput = document.getElementById("fileInput");
    this.bing(fileInput);
    },
    bindCanvas : function(canvas){

    }else if(str=='uhrtype'){
    document.getElementById(str).innerHTML=hrtype_help;

    var self = this;

    }else if(str=='urpw'){
    document.getElementById(str).innerHTML=repassword_help;

    canvas.onmousedown = function(e){

    }else if(str=='urealname'){
    document.getElementById(str).innerHTML=urealname_help;

    this.down = true;

    }else if(str=='utel'){
    document.getElementById(str).innerHTML=utel_help;

    this.style.cursor = "crosshair";

    }else if(str=='ufax'){
    document.getElementById(str).innerHTML=ufax_help;

    if( this.down ){
    var x = e.pageX , y = e.pageY;

    }else if(str=='umobile'){
    document.getElementById(str).innerHTML=umobile_help;

    var left = x - this.offsetLeft , top = y - this.offsetTop;

    }else if(str=='uemail'){
    document.getElementById(str).innerHTML=email_help;

    self.getColor(this , {x : left , y : top});

    }
    }
    function backState(str){
    if(str=='uname'){
    document.getElementById('username').keytype=0;

    }

    document.getElementById('unamespan').className='gray';

    }

    document.getElementById('unamespan').innerHTML=username_ok;

    canvas.onmousemove = function(e){

    }else if(str=='pw'){
    document.getElementById('password').keytype=0;

    if( this.down ){
    var x = e.pageX , y = e.pageY;

    document.getElementById('upw').className='gray';

    var left = x - this.offsetLeft , top = y - this.offsetTop;

    document.getElementById('upw').innerHTML=password_ok;

    self.getColor(this , {x : left , y : top});

    }else if(str=="hr"){
    document.getElementById('hrlibtype').keytype=0;

    }

    document.getElementById('uhrtype').className='gray';

    }

    document.getElementById('uhrtype').innerHTML=hrtype_help;

    canvas.onmouseup = function(){
    this.down = false;
    this.style.cursor = "default"
    }

    }else if(str=="rpw"){
    document.getElementById('passAgain').keytype=0;

    },
    getColor : function(canvas , obj){

    document.getElementById('urpw').className='gray';

    var ctx = canvas.getContext("2d");

    document.getElementById('urpw').innerHTML=password_ok;

    var imgData = ctx.getImageData(obj.x , obj.y , 1 , 1);

    }else if(str=="realn"){
    document.getElementById('realname').keytype=0;

    var self = this;

    document.getElementById('urealname').className='gray';

    var r = imgData.data[0] , g = imgData.data[1] , b = imgData.data[2];

    document.getElementById('urealname').innerHTML=urealname_ok;

    var span = document.getElementById("mianban").getElementsByTagName("span")[0];
    var i = document.getElementById("mianban").getElementsByTagName("i")[0];
    var btn = document.getElementById("mianban").getElementsByTagName("button")[0];

    }else if(str=="uteln"){
    document.getElementById('tel').keytype=0;

    span.innerHTML = "颜色 : " this.RGB(r,g,b);

    document.getElementById('utel').className='gray';

    i.style.background = this.RGB(r,g,b);

    document.getElementById('utel').innerHTML=urealname_ok;

    this.colors = [r,g,b];

    }else if(str=="ufaxn"){
    document.getElementById('fax').keytype=0;

    if(!btn.jianting){

    document.getElementById('ufax').className='gray';

    btn.jianting = true;

    document.getElementById('ufax').innerHTML=urealname_ok;

    btn.onclick = function(){

    }
    else if(str=="umobilen"){
    document.getElementById('mobile').keytype=0;

    if(confirm("是或不是须求模糊相配?")){

    document.getElementById('umobile').className='gray';

    self.quse(canvas, ctx ,true)

    document.getElementById('umobile').innerHTML=urealname_ok;

    }else{

    }
    else if(str=="eml"){
    document.getElementById('email').keytype=0;

    self.quse(canvas, ctx ,false)

    document.getElementById('uemail').className='gray';

    }

    document.getElementById('uemail').innerHTML=email_ok;

    }

    }
    }

    }

    function checkUserName_1(obj_str,num,obj_str1){
    var obj=document.getElementById(obj_str);

    },
    quse : function(canvas , ctx , o){

    var obj_help=document.getElementById(obj_str1);
    obj.keytype=0;
    if(obj.value.length==0){
    obj.keytype=1;
    obj_help.innerHTML=username_null;

    var data = ctx.getImageData(0,0,canvas.width,canvas.height);

    obj_help.className=word_error;
    return false;
    }
    if(obj.value.length>num){
    obj.keytype=1;
    obj_help.innerHTML=username_error;

    var r = this.colors[0] , g = this.colors[1] , b = this.colors[2];

    obj_help.className=word_error;
    return false;
    }
    //检查是不是有不符合规定的字符
    var name_str=obj.value;
    //name_str=name_str.replace(/[u4e00-u9fa5]/g,'');

    for(var i = 0 ; i < data.data.length; i =4){

    name_str=name_str.replace(/[a-zA-Z0-9_]/g,'');

    var newdata = data.data;

    name_str=name_str.replace(/-/g,'');

    var r1 = newdata[i 0] , g1 = newdata[i 1] , b1 = newdata[i 2];

    if(name_str!=''){
    obj.keytype=1;
    obj_help.innerHTML=username_error_1;

    if(o){

    obj_help.className=word_error;
    return false;
    }
    //检查用户名是不是存在

    var r3 = (r - r1) / 256 , g3 = (g - g1) / 256 , b3 = (b - b1) / 256;

    var username =document.getElementById('username').value;

    var bai = (1 - Math.sqrt(r3 * r3 g3 * g3 b3 * b3)) * 100;

    url="checkuserreg.php?username=" username; //借使用户名存在,chksn.asp的回到结果必须是“您填写的用户名已经存在”

    if(bai > 90){

    //alert(url);
    http.open("GET",url,true);
    http.onreadystatechange = handleHttpResponseForUserName_1;
    http.send(null);
    if(obj.keytype==0){
    backState("uname");
    }
    }
    function handleHttpResponseForUserName_1(){
    if(http.readyState == 4){
    if (http.status == 200) {
    returnStr=Trim(http.responseText); 

    data.data[i 3] = 0;

    if(returnStr=="1"){
    var obj_1=document.getElementById("unamespan");
    obj_1.innerHTML=username_exist;

    }

    document.getElementById("username").keytype=1;

    }else{

    obj_1.className=word_error;
    return false;
    }
    }
    }
    }
    function checkpw_1(obj_str,num,obj_str1){
    var obj=document.getElementById(obj_str);

    if(r1 == r && g1 == g && b1 == b){

    var obj_help=document.getElementById(obj_str1);
    obj.keytype=0;
    if(obj.value.length==0){
    obj.keytype=1;
    obj_help.innerHTML=password_null;

    data.data[i 3] = 0;
    }

    obj_help.className=word_error;
    return false;
    }
    if(obj.value.length<num){
    obj.keytype=1;
    obj_help.innerHTML=password_too_simple;

    }

    obj_help.className=word_error;
    return false;
    }
    if(obj.value.length>16){
    obj.keytype=1;
    obj_help.innerHTML=password_too_length;

    }

    obj_help.className=word_error;
    return false;
    }
    backState('pw');
    }
    function checkSame_1(obj_str,obj_str1,obj_targ){
    var obj=document.getElementById(obj_str);

    ctx.clearRect(0,0,canvas.width,canvas.height);

    var obj1=document.getElementById(obj_str1);
    var obj_help=document.getElementById(obj_targ);
    obj.keytype=0;
    if(obj1.value.length==0){
    obj.keytype=1;
    obj_help.innerHTML=repassword_null;

    ctx.putImageData(data,0,0);

    obj_help.className=word_error;
    return false;
    }
    if(obj.value!=obj1.value){
    obj.keytype=1;
    obj_help.innerHTML=repassword_unsame;

    },
    RGB : function(r,g,b){

    obj_help.className=word_error;
    return false;
    }
    backState('rpw');
    }
    function checkrealname_1(obj_str,num,obj_str1){
    var obj=document.getElementById(obj_str);

    var str = "#" r.toString(16) "" g.toString(16) "" b.toString(16);

    var obj_help=document.getElementById(obj_str1);
    obj.keytype=0;
    if(obj.value.length==0){
    obj.keytype=1;
    obj_help.innerHTML=urealname_null;

    return str;

    obj_help.className=word_error;
    return false;
    }
    if(obj.value.length>num){
    obj.keytype=1;
    obj_help.innerHTML=urealname_error;

    }

    obj_help.className=word_error;
    return false;
    }
    var partten = /^[u4e00-u9fa5]{2,4}$/;
    //var partten = /^(([0 ]d{2,3}-)?(0d{2,3})-)?(d{7,8})(-(d{3,}))?$/;
    var num = obj.value;
    if(partten.test(num))
    {
    backState('realn');
    }
    else
    {
    obj.keytype=1;
    obj_help.innerHTML=urealname_error2;

    }

    obj_help.className=word_error;
    }
    }
    function checktel_1(obj_str,num,obj_str1){
    var obj=document.getElementById(obj_str);

    w.quse = quse;

    var obj_help=document.getElementById(obj_str1);
    obj.keytype=0;
    if(obj.value.length==0){
    obj.keytype=1;
    obj_help.innerHTML=utel_null;
    obj_help.className=word_error;
    return false;
    }
    if(obj.value.length>num){
    obj.keytype=1;
    obj_help.innerHTML=utel_error;
    obj_help.className=word_error;
    return false;
    }
    var partten = /^((d{2,3}-)?(d{1,4})-)(d{7,8})(-(d{3,}))?$/;
    //var partten = /^(([0 ]d{2,3}-)?(0d{2,3})-)?(d{7,8})(-(d{3,}))?$/;
    var num = obj.value;
    if(partten.test(num))
    {
    backState('uteln');
    }
    else
    {
    obj.keytype=1;
    obj_help.innerHTML=utel_error2;

    })(window);

    obj_help.className=word_error;
    }
    }
    function checkfax_1(obj_str,num,obj_str1){
    var obj=document.getElementById(obj_str);

    </script>
    <style type="text/css">
    html{
    background: #f0f0f0;
    }
    *{
    margin: 0;
    padding: 0;
    }
    canvas{
    background: transparent;
    position: absolute;
    left: 50%;
    top: 120px;
    }
    #fileInput{
    opacity: 0;
    height: 40px;
    width: 120px;
    }
    button{
    background: deepskyblue;
    color: #fff;
    width: 120px;
    height: 40px;
    border: 0;
    border-radius: 4px;
    outline: none;
    }
    .wrap{
    padding-top: 50px;
    position: absolute;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    }
    .wrap div{
    position: absolute;
    right: 0;
    top: 45px;
    width: 120px;
    }
    .wrap div button{
    position: absolute;
    top: 0;
    z-index: -1;
    }

    var obj_help=document.getElementById(obj_str1);
    obj.keytype=0;
    if(obj.value.length==0){
    obj.keytype=1;
    obj_help.innerHTML=ufax_null;
    obj_help.className=word_error;
    return false;
    }
    if(obj.value.length>num){
    obj.keytype=1;
    obj_help.innerHTML=ufax_error;
    obj_help.className=word_error;
    return false;
    }
    var partten = /^((d{2,3}-)?(d{1,4})-)(d{7,8})(-(d{3,}))?$/;
    //var partten = /^(([0 ]d{2,3}-)?(0d{2,3})-)?(d{7,8})(-(d{3,}))?$/;
    var num = obj.value;
    if(partten.test(num))
    {
    backState('ufaxn');
    }
    else
    {
    obj.keytype=1;
    obj_help.innerHTML=ufax_error2;

    #mianban{
    background: rgba(255,255,255,.8);
    width: 160px;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    height: 330px;
    top: 50%;
    margin-top: -175px;
    color: #333;
    border-radius: 4px 0 0 4px;
    border: 1px solid #CCCCCC;
    }

    obj_help.className=word_error;
    }
    }
    function checkmobile_1(obj_str,num,obj_str1){
    var obj=document.getElementById(obj_str);

    #mianban p:first-child{
    margin-top: 30px;
    }
    #mianban p i{
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #00BFFF;
    border-radius: 2px;
    position: relative;
    left: 10px;
    top: 4px;
    background: rgb(230,230,230);
    }
    #mianban button{
    display: block;
    position: static;
    margin: 0 auto;
    margin-top: 30px;
    }
    </style>
    </head>
    <body>

    var obj_help=document.getElementById(obj_str1);
    obj.keytype=0;
    if(obj.value.length==0){
    obj.keytype=1;
    obj_help.innerHTML=umobile_null;

    <div class="wrap">
    <h1>去色系统</h1>
    <div>
    <input type="file" id = "fileInput"/>
    <button>张开图片</button>
    </div>
    </div>

    obj_help.className=word_error;
    return false;
    }
    if(obj.value.length>num){
    obj.keytype=1;
    obj_help.innerHTML=umobile_error;

    <div id="mianban">

    obj_help.className=word_error;
    return false;
    }
    var partten = /^(13[0-9]|15[0|3|6|7|8|9]|18[8|9])d{8}$/;
    //var partten = /^(([0 ]d{2,3}-)?(0d{2,3})-)?(d{7,8})(-(d{3,}))?$/;
    var numm = obj.value;
    if(partten.test(numm))
    {
    backState('umobilen');
    }
    else
    {
    obj.keytype=1;
    obj_help.innerHTML=umobile_error2;

    <p><span>颜色</span><i></i></p>
    <button>去色</button>
    </div>

    obj_help.className=word_error;
    }
    }
    function checkEmail_1(obj_str,obj_str1){
    var obj=document.getElementById(obj_str);

    <canvas id = "canvas"></canvas>

    var obj_help=document.getElementById(obj_str1);
    obj.keytype=0;
    //验证电子邮件
    var str="";
    var email =obj.value;
    if(email.length==0){
    obj.keytype=1;
    obj_help.innerHTML=email_null;
    obj_help.className=word_error;
    return false;
    }else if (email.length < 8)
    {
    obj.keytype=1;
    obj_help.innerHTML=email_error;

    <script>

    obj_help.className=word_error;
    return false;
    }else{
    if (email.indexOf(".") <=0 || email.indexOf("@") == -1)
    { obj.keytype=1;
    obj_help.innerHTML=email_error;

    quse.start("fileInput");

    obj_help.className=word_error;
    return false;
    }
    }

    </script>

    url="checkEmail.asp?email=" email; //假若email存在,checkEmail.asp的归来结果必须是“您使用的邮箱已经注册过,请登录大概输入任何邮箱地址”

    </body>
    </html>

    //alert(url);
    http.open("GET",url,true);
    http.onreadystatechange = handleHttpResponseEmail;
    http.send(null);
    }

    function handleHttpResponseEmail(){

    if(http.readyState == 4){
    if (http.status == 200) {
    returnStr=Trim(http.responseText);

    if(returnStr=="1"){
    var obj_1=document.getElementById("uemail");
    obj_1.innerHTML=email_exist;
    document.getElementById("email").keytype=1;

    obj_1.className=word_error;
    return false;
    }else if(document.getElementById("email").keytype==0){
    backState('eml');
    }
    }
    }
    }
    //-------------------------------------------------------

    function checkpw(obj,num){
    var rownum=obj.parentElement.parentElement.rowIndex;
    obj.keytype=0;
    if(obj.value.length<num){
    obj.keytype=1;
    oTD=document.getElementById("reg_table").rows[rownum 1].cells[0];

    oTD.innerHTML="<span class='" word_error "'>" password_too_simple "</span>"

    return false;
    }
    hidden_text(obj);
    }
    function checkSame(obj,obj_str1){

    var rownum=obj.parentElement.parentElement.rowIndex;
    obj.keytype=0;
    if(obj.value!=document.getElementById(obj_str1).value){

    obj.keytype=1;
    oTD=document.getElementById("reg_table").rows[rownum 1].cells[0];

    oTD.innerHTML="<span class='" word_error "'>" repassword_unsame "</span>"

    return false;
    }
    hidden_text(obj);
    }
    function show_text(obj){
    var rownum=obj.parentElement.parentElement.rowIndex;
    if(obj.keytype==0){
    oTR=document.getElementById("reg_table").insertRow(rownum 1);

    oTD=oTR.insertCell(0);
    oTD.colSpan=2;
    }else{
    oTD=document.getElementById("reg_table").rows[rownum 1].cells[0];

    }
    if(obj.keytype2=="uname"){
    oTD.innerHTML="<span class='" word_help "'>" username_help "</span>"
    }else if(obj.keytype2=="hrtype"){

    oTD.innerHTML="<span class='" word_help "'>" hrtype_help "</span>"
    }else if(obj.keytype2=="pw"){
    oTD.innerHTML="<span class='" word_help "'>" password_help "</span>"
    }else if(obj.keytype2=="rpw"){
    oTD.innerHTML="<span class='" word_help "'>" repassword_help "</span>"
    }else if(obj.keytype2=="eml"){
    oTD.innerHTML="<span class='" word_help "'>" email_help "</span>"
    }

    }
    function hidden_text(obj){
    var rownum=obj.parentElement.parentElement.rowIndex;
    //if(obj.keytype==0){
    document.getElementById("reg_table").deleteRow(rownum 1);

    //}
    }
    function hidden_error(){
    document.getElementById("word_error").style.display='none';

    }
    function Trim(str) {
    return RTrim(LTrim(str));
    }
    function LTrim(str) {
    return str.replace(/^[ tnr] /g, "");
    }

    function RTrim(str) {
    return str.replace(/[ tnr] $/g, "");
    }
    function validator()
    {
    if(document.PersonForm.username.keytype==1)

    {
    return false; }
    if(document.PersonForm.password.keytype==1)

    {
    return false; }
    if(document.PersonForm.passAgain.keytype==1)

    {
    return false; }
    if(document.PersonForm.email.keytype==1)

    {
    return false;}
    if(document.PersonForm.isaccept.checked==false)

    {
    alert("您是不是接受协议?");
    document.PersonForm.isaccept.focus();

    return false;
    }
    return true;
    }
    function changeimg(){
     document.getElementById('codepic').src='/member/code.asp?' Math.random();
    }
    function ShowHideDiv(obj1){
     var obj1 = document.getElementById(obj1);
     obj1.style.display = obj1.style.display=="none" ? "":"none" ;
    }

    checkuserreg.php

     

     

    <?php
    header('ontent-Type:text/html;charset=GB2312');//防止输出乱码
    $dbhost     ="localhost";
    $dbuser     ="root";
    $dbpassword = "123456";
    $dbname     = "rc_miaosha";
    mysql_connect($dbhost,$dbuser,$dbpassword) or die("error!");
    mysql_query("set names 'gbk'");
    mysql_select_db('rc_miaosha');

    $username=trim($_GET['username']);//获取注册名
    $sql="select u_username from rc_user where u_username='".$username."'";//查询会员名
    $result=mysql_query($sql);
    $num=mysql_num_rows($result);
    $rows=mysql_fetch_array($result);
    if($num<>0){
              echo "1";
    }
    else{
              echo "0";
    }
    mysql_close();//关闭数据库连接
    ?>

     

     

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:AJAX会员注册,ajax实现输入框文字改

    关键词: