一个有趣的js代码

/ 4评 / 0

预览地址https://www.seek8.cn/text/pig

代码:

<html>
<head>
<meta charset="utf-8">
<title>有趣的js页面</title>
<style type="text/css">
@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    outline: none;
}

#content {
    width: 500px;
    height: 300px;
    position: relative;
    border: 2px solid #333;
    margin: 100px auto
}

h1 {
    text-align: center;
    position: relative;
    top: 30px;
    color: #333
}

input[type="button"] {
    width: 120px;
    height: 40px;
    border: 2px solid #333;
    background: #bb7450;
    font-size: 14px;
    color: #fff
}

#line {
    border: 1px solid #000;
    margin-top: 100px;
}

#By {
    position: absolute;
    top: 190px;
    left: 100px;
}

#Bn{
    position: absolute;
    top: 190px;
    left: 300px;
}
#text {
    text-align: center;
    position: relative;
    top: 135px
}
</style>
</head>
<body>
<div id="content">
<h1>你是猪吗?</h1>
<div id="line"></div>
<div id="text"></div>
<div id="By">
<input type="button" value=" 是的 " onclick="f1()" />
</div>
<div id="Bn">
<input type="button" value="  不是  " onmouseover="f()" />
</div>
</div>


<script type="text/javascript">
var flag=1;
function f1()
{
    document.getElementById("text").innerHTML="哈哈,我知道了~";
}
function f()
{
    if(flag==1)
        {
            Bn.style.top='90px';
            flag=2;
        }
    else if(flag==2)
        {
            Bn.style.top='90px';
            Bn.style.left='50px';
            flag=3;
        }
    else if(flag==3)
        {
            Bn.style.top='190px';
            Bn.style.left='300px';
            flag=1;
        }
}
</script>
</head>
</body>
</html>

作用我就不多说了随便改表白装逼...

SEEK-BOLG,版权所有丨如未注明,均为原创丨转载请注明转自:https://www.seek8.cn/?p=473

4条回应:“一个有趣的js代码”

  1. 新闻头条说道:

    文章不错非常喜欢

  2. 以太坊学习说道:

    非常喜欢这个博客的风格。一栏挺好。

  3. 来跟着博主学习。

  4. 头条说道:

    文章不错非常喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注