震惊!!!!JAVASCRIPT竟然可以写出这样的灯泡效果

news/2024/11/7 16:56:40/

这里是效果预览

在这里插入图片描述

以下是全部代码,改一下图片路径可以直接使用!

(应付老师作业的首选帖子!!!)

如果担心抄作业被发现,可以"CV"后看一下代码的讲解
`
<!doctype html>

<head><meta charset="utf-8"><title></title><style type="text/css">img {width: 500px;height: 667px;}* {margin: 0;padding: 0;}div {float: left;height: 100%;width: 50%;}#div2 {height: 600px;}#show {font-size: 20px;width: 500px;height: 100%;background-color: antiquewhite;overflow: auto;}#btn {width: 100px;height: 50px;font-size: 20px;}button{width: 100px;height: 60px;}</style><script type="text/javascript"></script>
</head><body><div><img id="images" src&#

http://www.ppmy.cn/news/833642.html

相关文章

js控制开关灯泡

js控制开关灯泡 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible"…

js灯泡开关编写

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title> </head> <body> //图片路径 <img src"1.png.png" id"image" width"382" height"5…

vue 灯泡开关

话不多说&#xff0c;直接上代码 样式&#xff1a; <style> .content{ height: 500px; width: 800px; overflow: hidden; text-align: center; } .content img{ …

JS实现灯泡亮熄特效

** JS实现灯泡亮熄特效 首先打开HBUilder软件,创建HTML文件 输入代码 <body><img src="1.png.jpg" width="160" height="120" alt="" onclick="toggle()" id="bulb"><div id="timer"…

剑指 Offer 39. 数组中出现次数超过一半的数字 / LeetCode 169. 多数元素(排序、哈希、分治等)

题目&#xff1a; 链接&#xff1a;剑指 Offer 39. 数组中出现次数超过一半的数字&#xff1b;LeetCode 169. 多数元素 难度&#xff1a;简单 数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。 你可以假设数组是非空的&#xff0c;并且给定的数组…

js中简单的灯泡亮暗事件时间的获取js新建HTML标签

思路&#xff1a; 先用div存放三个实物对象&#xff08;拉绳&#xff0c;开关&#xff0c;灯泡&#xff09;。 创建数组存放每个实物的两种状态&#xff08;亮暗&#xff0c;开关&#xff0c;上下&#xff09;。 通过id获取dom对象。 if else 语句进行判断那种情况下的实物状态…

开关灯效果HTML,JS实现灯泡开关特效

JS实现灯泡开关特效的具体代码,供大家参考,具体内容如下 并且显示时间,文字 首先准备两张图片:开灯ON.jpg:关灯OFF.jpg 效果图: 下面是具体实现代码: HTML:开关灯特效 时间: 默认关灯 开灯关灯CSS: body {color: #333;

javascpirt + HTML实现点亮灯泡

点击图片&#xff0c;则灯泡点亮。代码其实很简单&#xff0c;就是通过点击事件&#xff0c;切换图片URL源。 1.函数changeImage()被注册到<img标签的点击事件中&#xff0c;点击图片则调用此函数。 <!DOCTYPE html> <html> <head> <meta charset&q…