<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<style>
#div1 div{ display:none; width:200px; height:100px; background:#ebebeb; border:1px solid #000;}
.bg{ background:red;}
</style>
<link rel="stylesheet" id="pifu" type="text/css" href="blue.css">
</head>
<body>
<!--1-->
用户名:<input type="text" placeholder="请输入用户名" id="user"/>
密码:<input type="text" placeholder="请输入密码" id="password"/>
<input type="button" value="登录" id="login"/>
<!--2-->
<input type="text" placeholder="请输入第一个数字" id="num1"/>
<input type="text" placeholder="请输入第二个数字" id="num2"/>
<input type="button" value="加" id="add"/>
<!--3-->
<p id="time">1111111</p>
<!--6-->
<div id="div1">
<input type="button" value="内容一" class="bg" />
<input type="button" value="内容二" />
<input type="button" value="内容三" />
<div style="display:block;" >1111</div>
<div>2222</div>
<div>3333</div>
</div>
<!--7-->
<input type="button" value="红皮肤" οnclick="red()"/>
<input type="button" value="蓝皮肤" οnclick="blue()"/>
<script>
//1
/*var User=document.getElementById('user');
var pwd=document.getElementById('password');
var Btn=document.getElementById('login');
Btn.οnclick=function(){
if(User.value==0||pwd.value==0){
alert('请输入用户名或者密码')
}else if(User.value!='admin'){
alert('用户名输入错误')
}else if(pwd.value!=123456){
alert('密码输入错误')
}
}*/
//2
/* var num1=document.getElementById('num1');
var num2=document.getElementById('num2');
var Add=document.getElementById('add');
Add.οnclick=function(){
var value1=parseFloat(num1.value);
var value2=parseFloat(num2.value);
if(isNaN(value1)==true){
alert('第一个数输入错误')
}else if(isNaN(value2)==true){
alert('第二个数输入错误')
}else{
alert(value1+value2)
}
}*/
//3
/* window.οnlοad=function(){
setInterval(function(){
var date=new Date();
var shijian=document.getElementById('time')
shijian.innerHTML=date;
},1000)
}*/
//4
/* //函数体
//返回值 return//可有可无
//参数 //可有可无
//函数名 //可有可无
//4-1
function name(){
//执行语句 函数体
}
function add(a,b){
return a+b;//函数返回值可以返回一个值
alert(12333)//return之后的程序不再执行
}
alert(add(3,4));
//4-2
var fn=function(a,b){
return a*b;
}
console.log(fn(5,6))
//4-3
(function(a){
alert(a)
})('abc');*/
//5
/* var m=1;//定义乘积初始值
function jiecheng(){
for(var i=1;i<=4;i++){
m=m*i;
}
return m;
}
alert(jiecheng(m)); */
//6
/*var div1=document.getElementById('div1');
var Btn=div1.getElementsByTagName('input');
var div=div1.getElementsByTagName('div')*/
//方法1
/* //按钮1
Btn[0].οnclick=function(){
this.className="bg";
Btn[1].className="none";
Btn[2].className="none";
div[0].style.display='block';
div[1].style.display='none';
div[2].style.display='none';
}
//按钮2
Btn[1].οnclick=function(){
this.className="bg";
Btn[0].className="none";
Btn[2].className="none";
div[1].style.display='block';
div[0].style.display='none';
div[2].style.display='none';
}
//3按钮3
Btn[2].οnclick=function(){
this.className="bg";
Btn[0].className="none";
Btn[1].className="none";
div[2].style.display='block';
div[0].style.display='none';
div[1].style.display='none';
} */
//方法2
/* for(var i=0;i<=Btn.length;i++){
Btn[i].index=i;//编上索引号
//alert(Btn[i].index)
Btn[i].οnclick=function(){
//按钮
for(var i=0;i<=Btn.length;i++){
Btn[i].className="none" //点击时去除所有按钮背景
this.className="bg";//把当前点击按钮加上背景
//点击时,隐藏所有div
div[i].style.display="none"
//显示当前按钮所对应的div
div[this.index].style.display="block"
}
}
}*/
/*//7
var pifu=document.getElementById('pifu');
function red(){
pifu.href="red.css"
}
function blue(){
pifu.href="blue.css"
}*/
//8
window.οnlοad=function(){
setTimeout(function(){
open('b.html')
},2000)
}
</script>
</body>
</html>
8个js常用函数
最新推荐文章于 2024-07-30 11:35:46 发布