用一个JS小游戏来练习下JS的相关知识
创建HTML文件
创建视图文件game1.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>小游戏</title>
</head>
<body>
<div id="d1" >
<input id="input" type="button" value="来呀，点我呀！" onclick="mv()"/>
</div>
</body>
</html>
添加CSS样式
这类就没有定义外部的样式css文件，之间在页面中head->style标签中写入：
<style type="text/css">
#d1
{
width: 160px;
height:160px;
background-color: #66ffff;
border: 2px solid yellow;
border-radius:10px 10px 10px 10px ;
box-shadow: 2px 2px 10px #cccccc;
position: absolute;
top: 0%;
left: 0%;
right:86%;
bottom:86%;
}
#input{
margin-top:45px;
margin-left: 30px;
width: 101px;
height: 68px;
background-color: #66ffff;
color: #ffffff;
font-weight: 700;
border: 0px;
}
</style>
添加Js 代码
同理，JS代码也写在game1.html文件中：
<script type="text/javascript">
var number=1;
function mv(){
if (number==1){
mv2();
number=2;
}
else if(number==2){
mv3();
number=3;
}
else if(number==3){
mv4();
number=4;
}
else if(number==4){
mv1();
number=1;
}
}
function mv1(){
document.getElementById('d1').style.left=0+"%";
document.getElementById('d1').style.right=88+"%";
document.getElementById('d1').style.top=0+"%";
document.getElementById('d1').style.bottom=76+"%";
}
function mv2()
{
document.getElementById('d1').style.left=88+"%";
document.getElementById('d1').style.right=0+"%";
document.getElementById('d1').style.top=0+"%";
document.getElementById('d1').style.bottom=76+"%";
}
function mv3()
{
document.getElementById('d1').style.top=76+"%";
document.getElementById('d1').style.bottom=0+"%";
document.getElementById('d1').style.left=88+"%";
document.getElementById('d1').style.right=0+"%";
}
function mv4()
{
document.getElementById('d1').style.bottom=0+"%";
document.getElementById('d1').style.left=0+"%";
document.getElementById('d1').style.top=76+"%";
document.getElementById('d1').style.right=88+"%";
}
</script>
运行效果：
最后
附上完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>小游戏</title>
<script type="text/javascript">
var number=1;
function mv(){
if (number==1){
mv2();
number=2;
}
else if(number==2){
mv3();
number=3;
}
else if(number==3){
mv4();
number=4;
}
else if(number==4){
mv1();
number=1;
}
}
function mv1(){
document.getElementById('d1').style.left=0+"%";
document.getElementById('d1').style.right=88+"%";
document.getElementById('d1').style.top=0+"%";
document.getElementById('d1').style.bottom=76+"%";
}
function mv2()
{
document.getElementById('d1').style.left=88+"%";
document.getElementById('d1').style.right=0+"%";
document.getElementById('d1').style.top=0+"%";
document.getElementById('d1').style.bottom=76+"%";
}
function mv3()
{
document.getElementById('d1').style.top=76+"%";
document.getElementById('d1').style.bottom=0+"%";
document.getElementById('d1').style.left=88+"%";
document.getElementById('d1').style.right=0+"%";
}
function mv4()
{
document.getElementById('d1').style.bottom=0+"%";
document.getElementById('d1').style.left=0+"%";
document.getElementById('d1').style.top=76+"%";
document.getElementById('d1').style.right=88+"%";
}
</script>
<style type="text/css">
#d1
{
width: 160px;
height:160px;
background-color: #66ffff;
border: 2px solid yellow;
border-radius:10px 10px 10px 10px ;
box-shadow: 2px 2px 10px #cccccc;
position: absolute;
top: 0%;
left: 0%;
right:86%;
bottom:86%;
}
#input{
margin-top:45px;
margin-left: 30px;
width: 101px;
height: 68px;
background-color: #66ffff;
color: #ffffff;
font-weight: 700;
border: 0px;
}
</style>
</head>
<body>
<div id="d1" >
<input id="input" type="button" value="来呀，点我呀！" onclick="mv()"/>
</div>
</body>
</html>
