jquery是js的一个库,可以利用极少的代码实现功能。以下是我在w3c上面略微修改的代码。实现的功能就是,制造一个对话框,每点击一次就会触发新的事件,可以根据自己需要进行编辑。以下代码可以用文本文档进行保存,将后缀改成html,发到手机上利用浏览器打开就可以看到动画效果了。
<!DOCTYPE html>
<html>
<body>
<div style="background-color:lavender;width:900px;height:500px;margin:20px;
padding-top:20px;color:#ffffff;font-weight:bold;font-size:50px;
float:left;text-align:center;
" οnclick="clickMeEvent(this)">吃了嘛Click Me</div>
<script type="application/javascript">
<!--
function clickMeEvent(obj)
{
if (obj.innerHTML=="那再见Goodbye")
{
obj.style.display="none";
}
else if (obj.innerHTML=="没吃啊Thank You")
{
obj.innerHTML="那再见Goodbye";
}
else if (obj.innerHTML=="吃了嘛Click Me<br>吃的什么Click Me Again<br>好吃嘛And Again")
{
obj.innerHTML="没吃啊Thank You";
}
else if (obj.innerHTML=="吃了嘛Click Me<br>吃的什么Click Me Again")
{
obj.innerHTML=obj.innerHTML+"<br>好吃嘛And Again";
}
else
{
obj.innerHTML=obj.innerHTML+"<br>吃的什么Click Me Again";
}
}
//-->
</script>
</body>
</html>
代码思路
就是对内容进行判断,然后再输出的过程。之前我们在手机上有一种我们一旦点击进去就要点好多下才可以出来的情况。利用jquery可以做出差不多的效果。如果只想每次框里面的文字只有一个的话,进行简单的修改就可以。
function clickMeEvent(obj)
{
if (obj.innerHTML=="那再见")
{
obj.style.display="none";
}
else if (obj.innerHTML=="没吃啊")
{
obj.innerHTML="那再见";
}
else if (obj.innerHTML=="<br>好吃嘛")
{
obj.innerHTML="没吃啊";
}
else if (obj.innerHTML=="<br>吃的什么")
{
obj.innerHTML="<br>好吃嘛";
}
else
{
obj.innerHTML="<br>吃的什么";
}
}
//-->