簡單的js事件圖片切換
模擬燈開燈滅並記錄時間：
所用知識點
1.通過id獲取dom對象：
document.getElementById(‘元素id’);
2.通過js內置對象Date獲取時間：
var time = new Date();//獲取到時間但是時間格式並不是常用的，所以要通過實例獲取單個時間在進行自由組合
var Y = time.getFullYear();//獲取年份
var M = time.getMonth() + 1;//獲取月份（獲取的月份是從0開始的（如果是1月返回的是0）所以與實際時間相比需要加1）
var D = time.getDate();//獲取天數
var h = time.getHours();//獲取小時
var m = time.getMinutes();//獲取分鐘
var s = time.getSeconds();//獲取秒數
3.使用js新建html標籤
var p = document.createElement('p');//新建一個p標籤當然也可以用這個方法新建大多數標籤
4.爲新建好標籤指定位置
var p = document.createElement('p');//首先新建一個標籤
var div = document.getElementById('div');//然後通過id獲取頁面上的一個標籤容器（可以存放其他標籤的標籤）
div .appendChild(p);//最後將p（新建的標籤）指定爲div（標籤容器）的子類；
5.indexOf（）方法
indexOf（）是用來檢測字符串或數組中是否有某個元素或字符
如果有則返回字符或元素的位置
沒有則返回-1
例如：var a = 'qwer'
a.indexOf（w）//返回的值爲1
效果展示：
代碼思路：
1.首先構造三個div分別是 開關區域 燈區域 文字區域
2.單擊開關區域時實現 開關圖片的切換 燈泡的切換 文字的輸出
代碼展示
css代碼：
<style>
body {
margin: 0;
font-size: 30px;
}
div {
float: left;
width: 33.33%;
height: 1000px;
}
img {
margin: 0 auto;
width: 80%;
height: 80%;
}
</style>
html代碼：
<body>
<div onclick="switchs()"><img id="m" src="img/off.png" /></div>
<div><img id="i" src="img/show.png" /></div>
<div id="times"></div>
</body>
js代碼：
<script>
//返回當前時間
function getTime() {
var time = new Date();//獲取時間對象
var Y = time.getFullYear();//獲取年份
var M = time.getMonth() + 1;//獲取月份
var D = time.getDate();//獲取天數
var h = time.getHours();//獲取小時
var m = time.getMinutes();//獲取其分鐘
var s = time.getSeconds();//獲取秒數
//自定義時間格式
var times ='你於' + Y + '年' + M + '月' + D + '日' + h + '時' + m + '分' + s + '秒';
return times;
}
//控制開關方法
function switchs() {
var time = getTime();//獲取自己定義格式的時間
var img = document.getElementById('i');//獲取顯示燈的img標籤
var showTime = document.getElementById('times');//獲取圖片顯示區域
var switch0 = document.getElementById('m');//獲取顯示開關的img標籤
if(img.src.indexOf('de') == -1) {//通過img對象獲取圖片url再通過地址判斷此時是亮燈還是滅燈
//如果是亮燈執行此語句塊 ⬇
img.src = "img/hide.png";//將滅燈的圖片賦值給img
time = time + '關閉了燈';//收集要輸出的時間字符串
switch0.src = 'img/on.png';//將開關的圖片換爲滅燈
} else {
//如果是滅燈執行此語句塊 ⬇
img.src = "img/show.png";//將亮燈的圖片賦值給img
time = time + '打開了燈';//組織輸出的字符串
switch0.src = 'img/off.png';//將開關的圖片換爲亮燈
}
var p = document.createElement('p');//新建一個p標籤
p.innerText = time;//將要輸出的時間字符串賦值給p標籤
showTime.appendChild(p);//將p標籤指定爲顯示區域的子類
}
</script>