<!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常用函數
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.