如何使用css,把div设置为一个椭圆容器,在做html页面开发时,我们一般都是使用div来做容器的,如果你需要一个椭圆形的容器,我们可以使用div来实现的,下面来看一下。......
用javascript写一个交互开关锁的网页
本文介绍一下,用Javascript写一个可以交互的代码,通过点击鼠标,实现锁的打开和关闭。
需要准备两幅图片。
工具/原料
- 电脑
- notepad
方法/步骤
打开notepad,输入如下代码:
!DOCTYPE html>
html>
head>
title>js开关灯/title>
/head>
body>
点击图片开锁或关锁/
img id="lamp" onClick="changeImage()" src="0.png">
script>
function changeImage()
{var element=document.getElementById("lamp");
if(element.src.match("0.png"))
element.src="1.png";
else
element.src="0.png";}
/script>
/div>
/body>
/html>
把这个文件保存为html格式,双击打开,可以在浏览器里面看到如下页面。
.
用鼠标在图片上点击,可以切换图片。
把文本改为h1样式:
h1>点击图片开锁或关锁/h1>
用css修饰一下这个文本:
style>h1{color: #333333;font-size: 48px;text-shadow:3px 3px 3px #666666;}/style>
给文本加上了阴影。
再改进一下,当点击文本的时候,文本变成绿色:
script>
function change() {
document.getElementsByTagName('h1')[0].style.color = 'green';
}
/script>
h1 onclick="change()">点击图片开锁或关锁/h1>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具,MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具,MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗?MAKA(中文:码卡)作为中国最早推出移动端卡片式交互模式的创新者,随着HTML5技术的日渐成熟......
2023-03-16 438 HTML