樣式
onmouseover滑鼠放上改變觸發事件
onm ouseleave滑鼠離開改變觸發事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type = "text/css">
#box{
width: 200px;
height: 200px;
background-color: beige;
}
</style>
</head>
<body>
<div id= "box"
onmouseover="changeColor()"
onmouseleave ="changeColor2()">
</div>
</body>
</html>
<script type="text/javascript">
//onmouseover滑鼠放上改變觸發事件
//onmouseleave滑鼠離開改變觸發事件
function changeColor(){
var div = document.querySelector("#box");
//修改樣式css,方式一
div.style.backgroundColor = "brown";
div.innerHTML = "我來了...";
}
function changeColor2(){
var div = document.querySelector("#box");
//修改樣式css,方式一
div.style.backgroundColor = "green";
div.innerHTML = "我走了...";
}
</script>
效果展示
隱藏 修改css樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type = "text/css">
#box{
width: 200px;
height: 200px;
background-color: beige;
}
</style>
</head>
<body>
<button onclick="change()">隱藏</button>
<div id= "box" >
</div>
</body>
</html>
<script type="text/javascript">
//點擊隱藏按鈕讓當前div隱藏
var flag = 0;
function change(){
var div = document.querySelector("#box");
var button1 = document.querySelector("button");
if(flag==0){
//修改樣式css,方式一
div.style.display= "none";
button1.innerHTML = "顯示";
flag = 1;
}else{
//修改樣式css,方式一
div.style.display= "block";
button1.innerHTML = "隱藏";
flag = 0;
}
}
</script>
效果展示
className同時修改多個樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.c1{
width: 200px;
height: 200px;
background-color: burlywood;
border: 5px solid yellow;
}
.c2{
width: 200px;
height: 200px;
background-color: green;
border: 5px solid rosybrown;
}
</style>
</head>
<body>
<button onclick="change1()">切換樣式</button>
<div id="d1" class="c1">
</div>
</body>
</html>
<script type="text/javascript">
var flag = "c1";//首先定義變數樣式為c1
function change1(){
var div = document.querySelector("#d1");
if (flag == "c1") {
flag = "c2";
} else{
flag = "c1";
}
//使用className同時修改多個樣式(將樣式在css里面提前定義好).
div.className = flag;
}
</script>
延遲執行定時器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="start2()">延遲執行</button>
<button onclick="stop1()">停止延遲</button>
</body>
</html>
<script type="text/javascript">
function start1(){
alert("延遲2秒,只執行一次.")
}
var time1= null;
function start2(){
time1 = setTimeout("start1()",4000);
}
function stop1(){
clearTimeout(time1);
}
</script>
立即執行定時器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
</div>
<button onclick="stop1()">停止計時</button>
</body>
</html>
<script type="text/javascript">
function getCurrentTime(){
var div=document.querySelector("#box");
var date = new Date();
var d = date.getFullYear()+"/"+
(date.getMonth()+1)+"/"+
date.getDate()
+" " +
date.getHours()+":"+
date.getMinutes()+":"+
date.getSeconds();
console.log(d);
div.innerHTML = "系統當前時間" + d;
}
//定時呼叫
var start = setInterval("getCurrentTime()",1000);
function stop1(){
clearInterval(start);
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298961.html
標籤：其他