第二章JavaScript操作BOM对象

最新推荐文章于 2020-06-29 08:54:23 发布

X_302lizhaohon

最新推荐文章于 2020-06-29 08:54:23 发布

阅读量476

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/X_302lizhaohon/article/details/81021663

本文介绍了几种使用HTML、CSS及JavaScript实现的网页特效与互动功能，包括病毒页面弹窗效果、显示当前日期时间并根据时间展示不同的问候语、以及随机发放水果的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>病毒页面效果</title>
    <style type="text/css">
        body{margin: 0;}
    </style>
</head>
<body>
<img src="../../images/webPic.jpg" alt="首页图片" />

<script type="text/javascript">
    function viruses() {
        window.open("病毒页面.html","_blank","width=400px,height=400px");

    }
    setInterval("viruses()",3000);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>病毒页面</title>
    <style type="text/css">
        body{margin: 0;}
    </style>
</head>

<body>
<img src="../../images/viruse.jpg" alt="病毒页面" />
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前的日期和时间</title>
</head>
<body>
<div id="myclock"></div>
<script type="text/javascript">
    function display() {
        var today=new Date(); //获得当前时间
        var year=today.getFullYear(); //获得年
        var month=today.getMonth()+1; //获得月
        var date=today.getDate(); //获得日期
        var hours=today.getHours(); //获得小时
        var minutes=today.getMinutes(); //获得分钟
        //显示不同的问候语
        if (hours<12){
            document.write("上午好！欢迎来到贵美");
        }else if (hours>12&&hours<18){
            document.write("下午好！欢迎来到贵美");
        } else {
            document.write("晚上好！欢迎来到贵美");
        }
        //设置div的内容日期时间
        document.getElementById("myclock").innerHTML="今天日期："+year+"年"+month+"月"
        +date+"日<br/>"+"现在时间："+hours+"点"+minutes+"分";
    }
    display();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机发放水果功能</title>
</head>
<body>
<div>
    您得到的水果是：<span id="fruits"></span>
    <input type="button" value="选择水果" onclick="ceFruits()"/>
</div>

<script type="text/javascript">
    function ceFruits(){
        var fruits=new Array("pear","apple","grape","banana","orange");
        var num=Math.ceil(Math.random()*5)-1;
        document.getElementById("fruits").innerHTML=fruits[num];
    }
</script>
</body>
</html>