【实用随记】点击出现新的DIV，以及点一下转一下

最新推荐文章于 2024-06-04 21:37:26 发布

原创最新推荐文章于 2024-06-04 21:37:26 发布 · 441 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用HTML创建按钮和提示框，并通过jQuery实现不同状态切换和动态添加元素的示例。通过点击按钮可以改变提示框的状态，包括显示、错误、到达等，并能动态添加新的提示框。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="btn">
<div class="button" id="show">show</div>
<div class="button" id="arrived">arived</div>
<div class="button" id="error">error</div>
<div class="button" id="cover">cover</div>
<div class="button" id="cover2">cover2</div>
</div>
<div class="box">
<div class="tips start" id='test0'></div>
<div class="keyframes"></div>
</div>

</body>
<script type="text/javascript" src="jquery-2.0.0.js"></script>
<script type="text/javascript">
var idCount = 0;
var i = 7;
var min;
$(function (){
$("#show").click(function(){
$(".tips").removeClass("start");
});
$("#error").click(function(){
$(".tips").removeClass("arrived");
$(".tips").addClass("error");
});
$("#arrived").click(function(){
$(".tips").removeClass("error");
$(".tips").addClass("arrived");
});
$("#cover").click(function(){
$(".tips").addClass("cover");
min = idCount;
$("<div class='tips' id='test"+(idCount++)+"'></div>").appendTo(".box");
//$("#test"+min+"").css("-webkit-transform","rotate("+(i++)+"deg)");
});
$("#cover2").click(function(){
$("#test"+min+"").css("-webkit-transform","rotate("+(i++)+"deg)");
});

});