Fiskychen 2022-03-31 14:23 采纳率: 50%
浏览 47
已结题

关于点击页面任意位置弹出消息框，请问如何实现！

问题遇到的现象和发生背景 学习中，想制作一个简单的页面，中间一行文字在屏幕右向左移动，鼠标点击页面任意位置弹出消息框，比如弹出消息框显示‘请勿触碰’，但是这一步不明白怎么实现。
问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>警告</title>
        <style type="text/css">
            p {
                font-size: 150px;
                color: #FF0000;
            }
        </style>
    </head>
    <body>
        <marquee>
            <div id="div1">
                <p>请勿触碰键盘鼠标！！！</p>
            </div>
        </marquee>
        <style>
            #div1 {
                width: 400px;
                height: 400px;
                /* 设置容器的宽高 */
                margin: 100px auto;
                /* 使容器水平边距自动相等 */
                /* border: 1px solid red; */
                /* 给文本加上边框可以更清楚地看到效果 */
                line-height: 400px;
                /*设置line-height与rongqi的height相等*/
                text-align: left;
                /*设置文本水平居中*/
                /* overflow: hidden; */
                /*防止内容超出容器或者产生自动换行*/
        </style>
        <style type="text/css">
            body {
                background-color: #000000;
            }
        </style>

    </body>

</html>
运行结果及报错内容 尝试了几次将文字div，对div进行操作，但是无效
我的解答思路和尝试过的方法
我想要达到的结果 请解惑，感谢！
  • 写回答

1条回答 默认 最新

  • 凉瓜拌面 2022-03-31 15:06
    关注
    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>警告</title>
        <style type="text/css">
              body {
                background-color: #000000;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            p {
                font-size: 150px;
                color: #FF0000;
            }
       
        </style>
    </head>
    <body>
        <marquee onmouseout="start()" >
            <div id="div1" >
                <p>请勿触碰键盘鼠标！！！</p>
            </div>
        </marquee>
 
    </body>
 <script>
     document.addEventListener('click',function(){
        alert('瞎JB点啥')

     })
   
 </script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 4月11日
  • 已采纳回答 4月3日
  • 创建了问题 3月31日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效