一、找到元素。

var d = document.getElementById("")

var d = document.getElementsByName("")

var d = document.getElementsByTagName("")

var d = document.getElementsByClassName("")

 

二、操作元素。

（一）操作内容

1.表单

value

赋值，取值

 

2.非表单

赋值，取值

innerHTML

innerText

 

（二）操作属性

1.获得属性值

getAttribute("属性名")，返回的是属性值。

 

2.给属性赋值（添加属性，修改属性）

setAttribute("属性名","属性值")

 

3.删除属性

removeAttribute("属性名")

 

 

（三）操作样式

1.操作内联样式

使用元素的style属性。

 

2.操作class

使用元素的className属性。

 

 

 

三、操作相关元素。

 

 

 

 

注册表单

 

Html代码

<title>无标题文档</title>

<style type="text/css">

.eee

{

color:red;

}

</style>

<script language="javascript">

function docheck()

{

var s = "";

var uid = document.getElementById("txtUID").value;

var p1 = document.getElementById("txtPWD1").value;

var p2 = document.getElementById("txtPWD2").value;

var email = document.getElementById("txtEmail").value;

if(uid.length==0)

{

s +=  "用户名不能为空\n";

}

if(p1.length==0)

{

s+="密码不能为空\n";

}

if(p2.length==0)

{

s+="确认密码不能为空\n";

}

if(email.length==0)

{

s+="邮箱不能为空\n";

}

if(p1 != p2)

{

s+= "两次输入的密码不一样！";

}

alert(s);

}

function docheck1()

{

var uid = document.getElementById("txtUID").value;

var p1 = document.getElementById("txtPWD1").value;

var p2 = document.getElementById("txtPWD2").value;

var email = document.getElementById("txtEmail").value;

if(uid.length == 0)

{

document.getElementById("spUID").innerHTML = "<h1>用户名不能为空</h1>";

}

else

{

document.getElementById("spUID").innerHTML = "";

}

if(p1 != p2)

{

document.getElementById("spPWD2").innerHTML = "两次输入的密码不一样";

}

else

{

document.getElementById("");

}

}

</script>

</head>

 

<body>

<form >

<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">

  <tr>

    <td width=100 align="right">用户名：</td>

    <td width=200>

    <input type="text" name="txtUID" id="txtUID" />

    </td>

    <td width="200"><span id="spUID" class="eee"></span></td>

  </tr>

  <tr>

    <td align="right">密码：</td>

    <td>

    <input type="text" name="txtPWD1" id="txtPWD1" />

    </td>

    <td><span id="spPWD1" class="eee"></span></td>

  </tr>

  <tr>

    <td align="right">确认密码：</td>

    <td>

    <input type="text" name="txtPWD2" id="txtPWD2" />

    </td>

    <td><span id="spPWD2" class="eee"></span></td>

  </tr>

  <tr>

    <td align="right">邮箱：</td>

    <td>

    <input type="text" name="txtEmail" id="txtEmail" />

    </td>

    <td><span id="spEmail" class="eee"></span></td>

  </tr>

  <tr>

    <td colspan="3" align="center">

    <input id="btn" type="button" value="注册(10)" disabled="disabled" onclick="docheck1()" /><br/>

    <a id="a1" href="Untitled-1.html">查看用户协议</a>

    </td>

  </tr>

</table>

</form>

</body>

</html>

<script language="javascript">

var n=10;

function bianHua()

{

n--;

if(n==0)

{

var b = document.getElementById("btn");

b.value="注册";

b.removeAttribute("disabled");

}

else

{

var b = document.getElementById("btn");

b.value="注册("+n+")";

window.setTimeout("bianHua()",1000);

}

}

bianHua()

 

/*

var a = document.getElementById("a1");

var s = a.getAttribute("href");

alert(s);

*/

//var b = document.getElementById("btn");

//b.setAttribute("disabled","disabled");

//b.removeAttribute("disabled");

</script>

 

 

 

 

 

 

QQ面板

 

<title>无标题文档</title>

<style  type="text/css">

.main{width:200px;}

.title

{

background-color:navy;

color:white;

font-weight:bold;

padding:5px;

text-align:center;

margin-top:1px;

}

.content

{

border:#F90;

background-color:yellow;

height:150px;

display:none;

}

</style>

</head>

 

<body>

<div class="main">

<div class="title" onclick="showDIV('hy')">我的好友</div>

    <div id="hy" class="content"></div>

    <div class="title" onclick="showDIV('hmd')">黑名单</div>

    <div id="hmd" class="content"></div>

    <div class="title" onclick="showDIV('msr')">陌生人</div>

    <div id="msr" class="content"></div>

</div>

</body>

</html>

<script language="javascript">

function showDIV(divid)

{

//全都收起来

var c = document.getElementsByTagName("div");

for(var i=0;i<c.length;i++)

{

if(c[i].className == "content")

{

c[i].style.display="none";

}

}

//展开点的那个

var d = document.getElementById(divid);

if(d.style.display != "block")

{

d.style.display="block";

}

else

{

d.style.display = "none";

}

}

</script>

HTML6注册表单输入日志标题的更多相关文章

  1. UX设计秘诀之注册表单设计，细节决定成败

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...

  2. JavaScript 小实例 - 表单输入内容检测，对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

  3. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  4. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  5. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  6. 模拟js中注册表单验证

    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  7. 基于HTML5手机登录注册表单代码

    分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  8. 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

    注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${page ...

  9. JS判定注册表单的几个方式 及 Ajax进行用户名存在判定

    最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区". 有个表单,简单点. <!DOCTYPE html> <!-- 注册表单验证,用户名格式 ...

随机推荐

  1. javax inect

    Spring 3 and JSR-330 @Inject and @Named example By mkyong | September 16, 2012 | Viewed : 86,399 tim ...

  2. SQL Server 添加一条数据获取自动增长列的几种方法

      数据库表设计  邓老师(老邓教的) insert into TestOne ','Test011') select @@IDENTITY as '自动增长ID' 杨老师(老杨教的) insert ...

  3. IOS开发系列 --- 核心动画

    原始地址:http://www.cnblogs.com/kenshincui/p/3972100.html 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥i ...

  4. ps 网页配图设计

    网站配图设计 蒙太奇 品科软件---网页页面 1橡皮擦来画两图 容合 大橡皮擦擦出来自然 2图放到一个色块中 用剪贴蒙版 3调色阶 装饰下图片  矩形工具  形状  填充 画彩条 超出本框的怎么去掉多 ...

  5. Java-----隐藏手机号中间四位

    phone.replaceAll("(\\d{3})\\d{4}(\\d{4})","$1****$2");152****4799 idCard.replace ...

  6. Java并发编程之闭锁简介

    闭锁相当于一扇门,在闭锁到达结束状态之前,这扇门一直是关闭着的,没有任何线程可以通过,当到达结束状态时,这扇门才会打开并容许所有线程通过.它可以使一个或多个线程等待一组事件发生.闭锁状态包括一个计数器 ...

  7. 向Oracle数据库中CLOB插入数据报错问题

    今天在项目中向数据库的CLOB属性插入一段篇文章(1000~2000)字就会报一个字符串过长的错误. 网上说用流来处理,没有这么做.这像是一个Bug,只要把插入的数据,默认扩充到2000以上就ok了. ...

  8. Android系统信息

    前提:获取的都是AndroidMainfest.xml下的信息 一.PackageManager 负责管理所有已安装的App 二.ActivityInfo 封装了Mainifest中的<acti ...

  9. Android小记之--ClickableSpan

    在给TextView设置超链接时,要想ClickableSpan的onClick事件响应,还必须同时设置tv.setMovementMethod(LinkMovementMethod.getInsta ...

  10. JS 禁止浏览器右键菜单和刷新

    <script language="javascript"> //禁止按键F5 document.onkeydown = function(e){ e = window ...