本文介绍了一个使用HTML和JavaScript实现的简单交互式按钮示例。通过多次点击按钮，按钮上的文字会发生变化，展示基本的DOM操作及事件处理技巧。此示例适合初学者理解如何为网页元素添加动态行为。
<!DOCTYPE html>
<html>
<body>
<div onclick="clickMeEvent(this)" style="background-color:green;width:170px;height:80px;margin:20px;padding-top:20px;color:#ffffff;font-weight:bold;font-size:18px;float:left;text-align:center; font-family:'微软雅黑';">点击这里</div>
{
if (obj.innerHTML=="再见")
{
obj.style.display="none";
}
else if (obj.innerHTML=="谢谢")
{
obj.innerHTML="再见";
}
else if (obj.innerHTML=="点击这里<br>再次点击这里<br>再点一次")
{
obj.innerHTML="谢谢";
}
else if (obj.innerHTML=="点击这里<br>再次点击这里")
{
obj.innerHTML=obj.innerHTML+"<br>再点一次";
}
else
{
obj.innerHTML=obj.innerHTML+"<br>再次点击这里";
}
}
</script>
</body>
</html>
<html>
<body>
<div onclick="clickMeEvent(this)" style="background-color:green;width:170px;height:80px;margin:20px;padding-top:20px;color:#ffffff;font-weight:bold;font-size:18px;float:left;text-align:center; font-family:'微软雅黑';">点击这里</div>
<script type="text/javascript">
function clickMeEvent(obj) //function是关键字 clickMeEvent是调用的函数 {}里面的代码块是函数 （obj）是参数名，可以有0个、1个或多个参数{
if (obj.innerHTML=="再见")
{
obj.style.display="none";
}
else if (obj.innerHTML=="谢谢")
{
obj.innerHTML="再见";
}
else if (obj.innerHTML=="点击这里<br>再次点击这里<br>再点一次")
{
obj.innerHTML="谢谢";
}
else if (obj.innerHTML=="点击这里<br>再次点击这里")
{
obj.innerHTML=obj.innerHTML+"<br>再点一次";
}
else
{
obj.innerHTML=obj.innerHTML+"<br>再次点击这里";
}
}
</script>
</body>
</html>
扫一扫
34万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
