网页自定义右键菜单

最新推荐文章于 2024-05-25 13:53:16 发布

Cloud-Future

最新推荐文章于 2024-05-25 13:53:16 发布

阅读量3.6k

点赞数

分类专栏：前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/gybshen/article/details/92824738

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

很简单代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>右键菜单</title>
    <style type="text/css">
        #right-menu{
            position: absolute;
            width: 200px;
            height: auto;
            border: 1px #ccc solid;
            display: none;
            padding:2px 0; 
            box-shadow: 5px 5px 5px #ccc;
        }
        .menu-item{
            height: 25px;
            margin:4px 0; 
            padding:0 10px;
            cursor: pointer;
        }
        .menu-item:hover{
            background-color: #ccc;
        }
        .menu-item-separator{
            border-top:1px #ccc solid;
            height: 1px;
        }
    </style>
</head>
<body>

<!-- 自定义右键菜单dom -->
<div  id="right-menu">
    <div class="menu-item">执行</div>
    <div class="menu-item">启动</div>
    <div class="menu-item-separator"></div>
    <div class="menu-item">删除</div>
    <div class="menu-item">导出</div>
</div>
    <script type="text/javascript">
        window.oncontextmenu = function(e){
            e.preventDefault(); //阻止浏览器自带的右键菜单显示
            var menu = document.getElementById("right-menu");
            menu.style.display = "block"; //将自定义的“右键菜单”显示出来
            menu.style.left = e.clientX + "px";  //设置位置，跟随鼠标
            menu.style.top = e.clientY+"px"; 
        }
        window.onclick = function(e){ //点击窗口，右键菜单隐藏
            var menu = document.getElementById("right-menu");
            menu.style.display = "none";
        }
    </script>
</body>
</html>

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
网页自定义右键菜单

很简单代码如下：<!DOCTYPE html><html><head> <title>右键菜单</title> <style type="text/css"> #right-menu{ position: absolute; width:...
复制链接

扫一扫

专栏目录

Cloud-Future CSDN认证博客专家 CSDN认证企业博客

码龄9年

160: 原创

1万+: 周排名

5831: 总排名

70万+: 访问

: 等级

5173: 积分

362: 粉丝

500: 获赞

179: 评论

2003: 收藏

私信

关注

热门文章

分类专栏

elasticsearch 付费 7篇
运维 1篇
nginx 1篇
HTTP 6篇
Zookeeper 4篇
Spring Cloud 2篇
Spring 38篇
Redis 2篇
Docker 17篇
Tomcat 1篇
Java 42篇
Java web 15篇
MySQL 12篇
Struts2 5篇
MyBatis 3篇
Maven 7篇
C/C++ 4篇
设计模式 8篇
Mongodb 4篇
成长 4篇
算法 3篇
前端 11篇
团队协作 3篇
Linux 13篇
Linux Shell 7篇
网络 6篇
虚拟化 1篇
安全 5篇

最新评论

Spring cloud 中使用 OpenFeign：让 http 调用更优雅
ha_lydms: 感谢博主分享的知识，博主文章细节到位，兼顾操作性和实用性，文章思路清晰，
IDEA中强大的Maven依赖管理工具
dalu2048: 新版本确实是没有这个功能了。可以安装Maven Search插件，替代一下。安装后，在tools菜单栏有个Maven Search，可以搜索依赖，并查看最新版本。虽然不能替代原来的功能，也可以搜索出最新版本。
C++实现简单的计时器
juyingchishou: [code=cpp] for(;;) { tick(); show(); } } }; int main() { Timer t; int a=0,b=0,c=0,d; char ch; system("color 02"); cout<<"请选择:1.正计时;2.倒计时\n"; cin>>d; if(d==1) { system("cls"); gotoxy(35,12); cout<<"00:00:00"; gotoxy(27,20); cout<<"按a开始，按空格暂停，按s停止"; while(1) { if(kbhit()) { ch=getch(); switch (ch) { case 'a':t.Start();break; case 's':t.Stop();break; case ' ':t.Pause();break; default :break; } } if(!t.isStop()&&!t.isPause()) { t.show(); } } } else if(d==2) { system("cls"); cout<<"请输入时间:"; cout<<"几小时:"; cin>>a; cout<<"几分钟:"; cin>>b; cout<<"几秒钟:"; cin>>c; Time t(a,b,c); t.run(); } } [/code]
C++实现简单的计时器
juyingchishou: [code=cpp] if(is_stop) return; else if(is_pause) { is_pause=false; is_stop=true; } else if(!is_stop) { is_stop=true; } } void Timer::show() { long t=time(0)-start_time; gotoxy(35,12); cout<<setw(2)<<setfill('0')<<t/60/60<<":"<< setw(2)<<setfill('0')<<(t/60)%60<<":"<<setw(2)<<setfill('0')<<t%60<<endl; } class Time{ int hour; int min; int sec; public: Time(int a,int b,int c) { hour=a; min=b; sec=c; } void show() { cout<<'\r'; if(hour<10) cout<<0; cout<<hour<<':'; if(min<10) cout<<0; cout<<min<<':'; if(sec<10) cout<<0; cout<<sec<<flush; } void tick() { long t=time(NULL); while(time(NULL)==t); if(--sec<=0) { sec=59; if(--min<=0) { min=59; if(--hour<=0) hour=23; } } } void run() [/code]
C++实现简单的计时器
juyingchishou: 分享一个正倒计时相结合的代码[code=cpp] #include<bits/stdc++.h> #include<conio.h> #include<windows.h> using namespace std; void gotoxy(int x,int y) { COORD pos={x,y}; HANDLE hOut=GetStdHandle(STD_OUTPUT_HANDLE); SetConsoleCursorPosition(hOut, pos); } class Timer { private: long start_time; long pause_time; bool is_pause; bool is_stop; public: Timer(); bool isPause(); bool isStop(); void Start(); void Pause(); void Stop(); inline long getStartTime() {return start_time;} void show(); }; Timer::Timer() { is_pause=false; is_stop=true; } bool Timer::isPause() { if(is_pause) return true; else return false; } bool Timer::isStop() { if(is_stop) return true; return false; } void Timer::Start() { if(is_stop) { start_time=time(0); is_stop=false; } else if(is_pause) { is_pause=false; start_time+ time(0)-pause_time; } } void Timer::Pause() { if(is_stop||is_pause) return; else { is_pause=true; pause_time=time(0); } } void Timer::Stop() { [/code]

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。