js的最基础练习(看情况添加内容,连上一个博客)

来源：互联网发布：美国注册营养师知乎编辑：程序博客网时间：2024/04/30 00:12

这里写图片描述
最简单的一个表单提交,账号密码获取,登陆提示
这里简单的懒得加备注,列出代码然后提几个重点好了
小重点:
{
1.onsubmit=”function()”用onsubmit属性来在提交表单form时触发函数对象function();
2. var usersname=(“#usersname”);
//通过id那啥到usersname里面varusersname=usersname.val();
//然后获取usersname的值,3.returnfalse;//阻止表单提交4.passwordspan.text(“密码不能为空”);设置span的文本
5.alert(“您的账号是:”+usersname+”\n”+”您的密码是”+password)//弹窗提醒
6.onfocus=”clearspan()”,//获得焦点的时候触发函数clearspan()
7.$(“#usersnamespan”).empty();//清空
8.//引用js
}

html代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8">    <title>js</title>    <link rel="stylesheet" type="text/css" href="css/js.css">    <script type="text/javascript" src="jquery3.1.1.min.js"></script>    <script type="text/javascript">    function checkinfo(){    var $usersname = $("#usersname");    var usersname = $usersname.val();    var $password = $("#password");    var password = $password.val();    var $usersnamespan = $("#usersnamespan");    var $passwordspan = $("#passwordspan");    if(usersname == null||$.trim(usersname)==""){        $usersnamespan.text("账号密码不能为空");        return false;    }    else if(password == null||$.trim(password)==""){        $passwordspan.text("密码不能为空");        return false;    }    else{alert("您的账号是:"+usersname+"\n"+"您的密码是"+password);    }    }    function clearspan(){        $("#usersnamespan").empty();    }    </script></head><body><form action="#" onsubmit="checkinfo()">    <div id="usname">    usersname:<input type="text" name="usersname" autofocus id="usersname" onfocus="clearspan()"/>    <span id="usersnamespan"></span>    </div>    <div id="psword">    password:<input type="text" name="password" id="password" onfocus="clearspan()"/>    <span id="passwordspan"></span>    </div>    <div id="submit"><input type="submit" value="submit"></div></form></body></html>

css代码如下

html,head,body{    margin: 0;    padding: 0;}span{    color: red;}#ta{    width: 100%;    height: 100%;}

参照代码看

0 0