JS，CSS联动
1，动态绑定事件
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<input type="button" value="点我试试" onclick="doWrite();"/>
<div id="hello" style="display: inline;">
div>
body>
html>
<script type="text/javascript">
function doWrite(){
// alert("hello world");
//1找到对应的div
ele=document.getElementById("hello");
//2向div中写入字符串
ele.innerText="hello woshi lushuang";
}
script>
2，改变动态事件中的CSS样式
innerText写入的是字符串无法改变样式，.inner HTML可以改变样式
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<input type="button" value="点我试试" onclick="doWrite();"/>
<div id="hello" style="display: inline;">
div>
body>
html>
<script type="text/javascript">
function doWrite(){
// alert("hello world");
//1找到对应的div
ele=document.getElementById("hello");
//2使用innerText向div中写入字符串
ele.innerText="hello woshi lushuang";
// 使用innerText向div中写入样式，通过JS可以动态改变CSS样式
ele.innerHTML="hello woshi lushuang"
}
script>
2.1练习--登录功能
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
用户名：<input id="username" type="text" size="12" /><br />
密码：<input id="pwd" type="password" size="12" /><br />
<input type="button" value="登录" onclick="doLogin()"/>
<input type="button" value="重置" onclick="doReset()"/>
<div id="msg">div>
body>
html>
<script>
function doLogin(){
//1获取用户名和密码的文本框的值，并且保存在相应的变量中
// .value是获得文本框或者文本域的值
name=document.getElementById("username").value;
password=document.getElementById("pwd").value;
//2通过条件判断用户和密码是否匹配
if(name=="陆双"&&password=="618618"){
//3输入正确，改变div内容
document.getElementById("msg").innerHTML="我还没有进入主页的功能，被骗了哈哈哈";
ducument.write("用户登陆成功");
}else{
//4输入错误就弹出对话框提示
alert("用户名或者密码错误");
}
}
function doReset(){
//先找文本框,改变值，设置为null就是重置
document.getElementById("pwd").value=null;
document.getElementById("username").value=null;
}
script>
2.2练习-简易计算器
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<input id="num1" type="text" size="4" />
+
<input id="num2" type="text" size="4" />
=
<span id="sum">计算结果span>
<br />
<input type="button" value="计算" onclick="jisuan()" />
body>
html>
<script>
function jisuan(){
//获取元素，拿值，判断，输出
a=parseInt(document.getElementById("num1").value)+parseInt(document.getElementById("num2").value);
document.getElementById("sum").innerHTML=a;
}
script>
2.3练习-信息注册页面，检验输入是否合法
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h2>用户注册h2>
用户名<input id="name" type="text" size="12" /><br />
密码<input id="pwd1" type="password" size="12" onblur="check_pwd();"/><span id="pwd1_text">*密码一定是六位的span><br />
确认密码<input id="pwd2" type="password" size="12" onblur="check_same();"/><span id="pwd2_text">*两次输入密码不统一span><br />
邮箱<input id="email" type="text" size="12" onblur="check_email();" /><span id="email_text">*邮箱账号必须是合法的span><br />
<input type="button" value="注册" onclick="zhuce();" />
body>
html>
<script>
function check_pwd(){
pwd=parseInt(document.getElementById("pwd1").value.length);
if(pwd!=6){
document.getElementById("pwd1_text").innerHTML="*密码一定是六位的";
}
else{
document.getElementById("pwd1_text").innerHTML="*密码一定是六位的";
}
}
function check_same(){
pwd1=parseInt(document.getElementById("pwd1").value);
pwd2=parseInt(document.getElementById("pwd2").value);
if(pwd1!=pwd2){
document.getElementById("pwd2_text").innerHTML="*两次输入密码需要统一";
}else{
document.getElementById("pwd2_text").innerHTML="*两次输入密码需要统一";
}
}
function check_email(){
email=document.getElementById("email").value;
i=email.indexOf("@");
if(i==-1){
document.getElementById("email_text").innerHTML="*邮箱账号必须是合法的"
}else{
document.getElementById("email_text").innerHTML="*邮箱账号必须是合法的"
}
}
function zhuce(){
name=document.getElementById("name").value;
pwd=document.getElementById("pwd2").value;
email=document.getElementById("email").value;
alert("名字是"+name+";密码是"+pwd+";邮箱是"+email);
document.getElementById("name").value=null;
document.getElementById("pwd1").value=null;
document.getElementById("pwd2").value=null;
document.getElementById("email").value=null;
}
script>