菜鸟，javascript之路

最近因为工作关系，开始比较细致的学习javascript，之前也有相当的接触，总都是表面文章，堆积脚本不是问题，重要的是有完美的表现。这几天，看了很多，展示下自己的成果。新手上路，不谈文章价值

为了加深学习javacript dom，用js写了一个登录表单，代码如下：

var login=
{
    init:function(frame)
    {
        
        var ygcon=document.createElement("div");
        ygcon.style.width='353px';
        ygcon.style.height='340px';
        ygcon.style.boxShadow='#ccc 4px 4px 6px';
        ygcon.style.float='left';
        ygcon.style.borderRadius='4px';
        ygcon.style.background='#ebf3ff';
        ygcon.style.border='1px solid #ACC3E4';
        ygcon.className='ygcon';
        var all=document.createElement("div");
        all.className='all';
        all.style.width='313px';
        all.style.height='300px';
        all.style.padding='30px 20px 10px 20px';
        var go=document.createElement("h1");
        go.className='go';
        go.style.color='#576788';
        go.style.fontSize='16px';
        go.style.fontWeight='bold';
        go.style.margin='0 0 20px 0';
        go.appendChild(document.createTextNode('登录前端系统效果'))
        all.appendChild(go);
        var form=document.createElement("form");
        form.setAttribute('action','/');
        form.setAttribute('method','post');
        var userName=document.createElement("input");
        userName.setAttribute('type','text');
        userName.setAttribute('id','userName');
        userName.setAttribute('name','ygUser');
        userName.className='yguser inp';
        userName.value='账号';
        userName.style.width='313px';
        userName.style.height='38px';
        userName.style.margin='0 0 15px 0';
        userName.style.float='left';
        userName.style.padding='0 0 0 3px';
        userName.style.border='1px solid #9DADC5';
        userName.style.webkitTransition='-webkit-box-shadow .1s linear';
        form.appendChild(userName);
        var pwdName=document.createElement("input");
        pwdName.setAttribute('type','text');
        pwdName.setAttribute('id','pwdName');
        pwdName.setAttribute('name','ygPass');
        pwdName.className='ygpass inp';
        pwdName.value='密码';
        pwdName.style.width='313px';
        pwdName.style.height='38px';
        pwdName.style.margin='0 0 15px 0';
        pwdName.style.float='left';
        pwdName.style.padding='0 0 0 3px';
        pwdName.style.border='1px solid #9DADC5';
        pwdName.style.webkitTransition='-webkit-box-shadow .1s linear';
        form.appendChild(pwdName);
        var state=document.createElement('span');
        state.className='state';
        state.style.lineHeight='25px';
        state.style.width='160px';
        state.style.height='25px';
        state.style.fontSize='12px';
        state.style.float='left';
        var box=document.createElement('input');
        box.setAttribute('type','checkbox');
        box.className='box';
        box.style.margin='1px 5px 0 0';
        state.appendChild(box);
        state.appendChild(document.createTextNode('记住登陆状态'));
        form.appendChild(state);
        var code=document.createElement('span');
        code.className='code';
        code.style.width='56px';
        code.style.height='25px';
        code.style.float='right';
        var ch=document.createElement('a');
        ch.setAttribute('href','#');
        ch.appendChild(document.createTextNode('忘记密码'));
        ch.style.color='#333';
        ch.style.fontSize='14px';
        code.appendChild(ch);
        form.appendChild(code);
        var sigin=document.createElement('span');
        sigin.style.width='300px';
        sigin.style.height='58px';
        sigin.style.float='left';
        sigin.style.margin='20px 0 0 0';
        sigin.className="sigin";
        var now=document.createElement('a');
        now.setAttribute('href','#');
        now.className='now';
        now.style.width='82px';
        now.style.border='1px solid';
        now.style.display='block';
        now.style.borderColor='#6B9F11 #54850A #386601';
        now.style.height='30px';
        now.style.background='#649e0b';
        now.style.borderRadius='4px';
        now.style.webkitTransition='-webkit-box-shadow .1s linear';
        var submit=document.createElement('input');
        submit.setAttribute('type','button');
        submit.setAttribute('id','submit');
        submit.className='submit';
        submit.value='登陆';
        submit.style.width='82px';
        submit.style.border='0px';
        submit.style.fontSize='14px';
        submit.style.lineHeight='30px';
        submit.style.height='30px';
        submit.style.textAlign='center';
        submit.style.cursor='pointer';
        submit.style.background='none';
        now.appendChild(submit);
        sigin.appendChild(now);
        form.appendChild(sigin);
        var codeed=document.createElement('span');
        codeed.setAttribute('id','code');
        codeed.className='codeed';
        codeed.style.width='300px';
        codeed.style.float='left';
        codeed.style.fontSize='14px';
        codeed.style.color='#c90c1b';
        form.appendChild(codeed);
        all.appendChild(form);
        ygcon.appendChild(all);
        var main=document.getElementById(frame);
        main.appendChild(ygcon);
    },
    check:function()
    {
        var user = document.getElementById('userName');
        var pwd = document.getElementById('pwdName');
        var submit = document.getElementById('submit');
        var code = document.getElementById('code');
        var input = ['1px solid #9DADC5', '1px solid #c90c1b', '请您输入账号再登录', '请您输入密码再登陆', '请您输入账号与密码再登录'];
        user.onfocus=function()
        {
            var value=user.value;
            if(value=='账号')
            {
                user.style.border=input[0];
                user.value='';
                code.innerHTML='';
            }
        }
        user.onblur=function()
        {
            if(user.value=='')
            {
                user.value='账号';
                code.innerHTML='';
            }
        }

        pwd.onfocus=function()
        {
            if(pwd.value=='密码')
            {
                pwd.style.border=input[0];
                pwd.value='';
                code.innerHTML='';
            }
        }
        pwd.onblur=function()
        {
            if(pwd.value=='')
            {
                pwd.value='密码';
                code.innerHTML='';
            }
        }

        submit.onclick=function(e)
        {
            e=e||window.event;
            if(user.value=='账号'&&pwd.value=='密码')
            {
                user.style.border=input[1];
                pwd.style.border=input[1];
                code.innerHTML=input[4];
            }
            else if(pwd.value=='密码')
            {
                user.style.border=input[1];
                code.innerHTML=input[3];
            }
            else if(user.value=='账号')
            {
                pwd.style.border=input[1];
                code.innerHTML=input[2];
            }
            if(e.preventDefault)
            {
                e.preventDefault();
            }
            else{e.returnValue=false;}
        }

    }
}

在html中作如下引用：

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.bmefix.js"></script> 
<script type="text/javascript" src="index3.js"></script> 
<script>
window.onload=function()
{
   login.init("main");
   login.check();
}
</script> 
</head>
<body>
<div class="main" id="main">
</div>
</body>
</html>

 页面参考：

https://github.com/xiangwenwe