点击隐藏文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
input,button {
border:0 none;
padding:0;
}
.search {
width: 258px;
height: 40px;
margin:100px auto;
background-color: pink;
}
.search input{
width: 208px;
height: 40px;
background: url(left.jpg) no-repeat;
outline-style:none;
padding-left: 8px;
color: #ccc;
float: left;
}
.search button{
height: 40px;
width: 42px;
background: url(right.jpg) no-repeat;
cursor:pointer;
}
</style>
<script>
window.onload = function(){
var txt = document.getElementById("txt");
txt.onfocus = function(){
if(txt.value=="请输入")
{
txt.value = "";
txt.style.color = "#333";
}
}
txt.onblur = function(){
if(txt.value == "")
{
txt.value = "请输入";
txt.style.color = "#ccc";
}
}
}
</script>
</head>
<body>
<div class="search">
<input type="text" value="请输入" id="txt">
<button></button>
</div>
</body>
</html>
1.this 主要指事件的调用者，谁调用函数，this指向谁。 this只用在函数体的内部 2.className：类名 3.innerHTML更换盒子里面的内容 文字 标签都换 ； 表单更换内容 input.value值（只有表单才有value值）。 4.isNaN 不是数字：isNaN(“12”)如果里面的不是个数字，返回ture ；否则返回false。
简单验证表单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
text-align: center;
margin:100px auto;
}
span {
display: inline-block;
width: 150px;
height: 20px;
border: 1px solid #ccc;
font-size:12px;
line-height: 20px;
text-align: left;
padding-left: 20px;
background-color: #eee;
color:#999;
}
.right {
color: #5EFF5E;
background:url(images/right.png) no-repeat #DFFFDF 4px 3px;
border: 1px solid #ACFFAC;
}
.wrong {
background:url(images/wrong.png) no-repeat #FFDCD0 4px 3px;
border: 1px solid #FFAC91;
color: #FF6B39;
}
</style>
<script>
window.onload = function(){
function $(id){
return document.getElementById(id);
}
$("txt").onblur = function(){
if(this.value==""){
$("result").className = "wrong";
$("result").innerHTML = "内容不能为空"
}
else if(isNaN(this.value)){
$("result").className = "wrong";
$("result").innerHTML = "请输入数字";
}
else if(this.value >150|| this.value<0 ){
$("result").className = "wrong";
$("result").innerHTML = "请输入合理的范围";
}
else
{
$("result").className = "right";
$("result").innerHTML = "输入正确";
}
}
}
</script>
</head>
<body>
<div class="box">
语文:
<input type="text" id="txt"> <span id="result">请输入成绩
</span>
</div>
</body>
</html>
两个表单方法
自动获得焦点以及鼠标经过选择表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var txt = document.getElementById("txt");
var sele = document.getElementById("select");
txt.focus();
sele.onmouseover = function(){
this.select();
}
}
</script>
</head>
<body>
自动获得焦点：
<input type="text" id="txt">
鼠标经过选择表单：
<input type="text" id="select">
</body>
</html>
for循环—打印金字塔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
for(var i=0;i<=100;i+=3){
document.write("<hr width= "+i+"%/>")
}
</script>
</body>
</html>
如图所示：
转载请注明原文地址: https://ju.6miu.com/read-7017.html
