通过Html和Javascript制作一个静态的登录页面

\x0d\x0a\x0d\x0a 用户名:

创新互联自2013年创立以来，是专业互联网技术服务公司，拥有项目网站建设、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元古丈做网站,已为上家服务,为古丈各地企业和个人服务,联系电话:18982081108

\x0d\x0a 密码:

\x0d\x0a \x0d\x0a\x0d\x0a

javascript html 设计一个登录界面

注册页面代码：

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

title注册/title

/head

body

form method="post" onsubmit="return false" id="form"

input type="text" name="username" placeholder="用户名"br

input type="password" name="password" placeholder="密码"br

input type="password" name="rePassword" placeholder="再次输入密码"br

input type="submit" onclick="register_user()" value="注册"br

/form

a href="login.html"去登录/a

script

var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024);

localDB.transaction(function (ts) {

ts.executeSql('CREATE TABLE IF NOT EXISTS user(username,password)')

});

function register_user() {

var username = document.getElementsByTagName("input")[0].value;

var password = document.getElementsByTagName("input")[1].value;

var rePassword = document.getElementsByTagName("input")[2].value;

if(password != rePassword)

{

alert("两次输入的密码不同，请重新输入");

}else

{

localDB.transaction(function(ts){

ts.executeSql("INSERT INTO user (username,password) VALUES ('"+username+"','"+password+"');");

alert("注册成功");

});

}

}

/script

/body

/html

登录页面代码：

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

title登录/title

/head

body

form onsubmit="return false" method="post"

input type="text" placeholder="用户名"br

input type="password" placeholder="密码"br

input type="submit" value="登录" onclick="login()"br

/form

a href="register.html"去注册/a

script

var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024);

localDB.transaction(function (ts) {

ts.executeSql("SELECT * FROM user",[],function (tx, results) {

var len = results.rows.length;

if(len=0)

{

localDB.transaction(function (ts) {

ts.executeSql('CREATE TABLE IF NOT EXISTS user(username,password)')

});

}

});

});

function login() {

var username = document.getElementsByTagName("input")[0].value;

var password = document.getElementsByTagName("input")[1].value;

localDB.transaction(function (ts) {

ts.executeSql("SELECT * FROM user WHERE username='"+username+"';",[],function (ts, res) {

if(res.rows.length=0)

{

alert("登录失败，用户未注册");

}else if (password == res.rows[0].password)

{

alert("登录成功,三秒后跳转到百度");

setInterval(function () {

location.href = "";

},3000);

}else

{

alert("登录失败，密码错误");

}

});

})

}

/script

/body

/html

以上代码使用了WEB SQL，还请选择合适的浏览器查看。

js怎样写APP界面

js写app界面的话，那就使用html+css的形式来写网页，然后使用一些第三方工具来把网页包装成app

如何用js制作Tab栏官网登录界面

1、在桌面找到并且打开js软件。

2、新建一个项目，并且保存打开项目。

3、依次写入想要的官网代码即可。以上就是用js制作tab栏官网登录界面的方法。

JavaScript问题！请问既然能有HTML+CSS做界面了，为什么还需要用JavaScript来写界面呢，请给我细说一下。

例子我就不找了，说下我的理解。

如果你们老师拿个项目就直接上javascript，而不先给出它的HTML+CSS静态页面，这绝对是一种不负责任的行为，因为新手很难懂函数或者对象封装到底在做什么，为什么要这么做

继续说下三大部分的作用：

HTML：组成网站结构的标签元素

CSS: 样式级联表，主要控制各个元素在页面上的显示

JavaScript： 脚本语言，提供强大的DOM元素操作功能，使得页面即使在用户浏览器上的逻辑或者交互脱离服务器，由用户的浏览器解析运行，这样降低了很多服务器的压力，比如用户注册填写之前的验证，其实是告诉用户浏览器规则，随着用户输入就友好的提示了

如果一个网站相当于一个房子，HTML+CSS只是构成了房子的框架和内在的颜色，而Javascrip让这个房子水电、燃气、可移动家具都添加进来了，这个房子对于用户（人）就显得可爱多了

好吧，扯了这么多。

如果是培训班，可能会觉得HTML+CSS过于简单，因为是静态的，写下就固定看起来简单。所以要学编程的思想，在这三种之间重点当然还是Javascript，难度自然上来了，动态操作。

至于你说的界面的问题，用HTML+CSS写当然最合适。用Javascript写，具有更好的可维护性可扩展性。比如生成一个多级菜单的，如果有10个页面，每个页面都得复制一遍html+CSS代码，如果要要在这个菜单中增加一个字菜单，你就要打开这个10个页面逐个修改，而如果你的Javascript封装了一个函数 createMenu(); 你在直接修改页面调用的js文件的参数，所有页面都修改了。

学习阶段当然是找难的学，前端工程师的核心在Javascript，前提是以理解Html+css为基础。

作为学习还是建议一定要先有有静态HTML+CSS页面，再来讲Javascript！

新闻名称：javascript做界面,javascript界面设计
转载来于：http://kswjz.com/article/phjicc.html