1.简单介绍一下html和css和Javascript：
1.html 定义了网页的内容
2.CSS 描述了网页的布局
3.JavaScript 网页的行为
2.我们先看一下代码和注释
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>web页面</title>
</head>
<!--
简单的css编写
-->
<style>
body
{
text-align:center;
padding: 40px;
text-align: center;
background-image: url(10.png);/* 用链接图片作为背景*/
background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment:fixed;
color: black;
}
</style>
<body>
<br><br><br>
<h3>web客户端编程</h3>
<br><br>
<form action="" >
账号: <input id="ac" ><br>
密码: <input id="pw" ><br>
<button type="submit" onclick="myfunction()"> 登录</button>
<input type="reset" value="重置">
</form>
<br />
注：账号密码不能是数字！
<!--
javascpript编写
-->
<script>
function myfunction()
{
var account,pword;
//获取账号密码
account=document.getElementById("ac").value;
pword=document.getElementById("pw").value;
if(isNaN(account))
if(isNaN(pword))
alert("登录成功");
else
alert("密码输入格式错误 ");
else
alert("账号入格式错误 ");
}
</script>
</body>
</html>
运行结果是这样的：
3.来分析一下这个程序
<style>
body
{
text-align:center;
padding: 40px;
text-align: center;
background-image: url(10.png);/* 用链接图片作为背景*/
background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment:fixed;
color: black;
}
</style>
这里其实是一个简单的一个内容的设置。body这个主题里面的属性设置
<script>
function myfunction()
{
var account,pword;
//获取账号密码
account=document.getElementById("ac").value;
pword=document.getElementById("pw").value;
if(isNaN(account))
if(isNaN(pword))
alert("登录成功");
else
alert("密码输入格式错误 ");
else
alert("账号入格式错误 ");
}
</script>
这里就是一个最简单的Javascript来验证登陆窗口了，isNaN()是一个简单的函数
<form action="" >
账号: <input id="ac" ><br>
密码: <input id="pw" ><br>
<button type="submit" onclick="myfunction()"> 登录</button>
<input type="reset" value="重置">
</form>
<br />
注：账号密码不能是数字！
这里就是主题body里的部分，用一个简单的form表格做一个登陆窗口