⽤HTML.JS制作⼀个简单的灯泡
作业⽬标
使⽤图⽚制作简单的灯泡开关操作
步骤
实现的最终结果
1
2
图⽚中点击灯泡可以使灯泡发光
图⽚中点击开关可以使灯泡发光并且右边⽂本框中显⽰什么时间灯亮和灯灭
代码块
CSS样式
<style>
#xianshi{
background: black;
color: red;
}
HTML具体代码
<img src="3.PNG" width="300px" height="400px" id="imgShow" onclick="chang()" />  <textarea rows="20" cols="40" id="xianshi"></textarea>
<img src="8.PNG"  width="40px" height="60px" id="img" onclick="chang(),init()"/> JS具体代码
<script type="text/javascript">
function init(){
var date=new Date();
//年
var FullYear();
//⽉
var Month()+1;
//⽇
var Date();
//时
var Hours();
/
/分
var Minutes();
//秒
var Seconds();
var rq=year+"年"+month+"⽉"+day+"⽇"+hh+":"+mm+":"+ss+time;
//alert(rq);
}
//3.PNG为灯泡关闭图⽚
//4.PNG为灯泡开启图⽚
//7.PNG是开关"OFF"
/
/8.PNG是开关"ON"
var i=0;
var time="";
var imgs=["4.PNG","3.PNG"];
var imgx=["7.PNG","8.PNG"];
function chang(){
if(i==0){
i=1
time="----灯亮了";
js制作简单的焦点图效果
}else{
i=0;
time="----灯灭了";
}
}
</script>
PS：代码有点乱

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。