js小模块：鼠标显示模块(设置网页中的鼠标图像)+时间显示模块

原创已于 2022-05-17 09:46:13 修改 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-05-07 11:36:09 首次发布

可视化&GeoGebra 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了四种不同的方法来实现网页中鼠标显示模块和时间显示模块。方法一和二利用CSS和JS设置鼠标样式，包括默认、指针、等待、帮助等可选值。方法三通过自定义图片或在线工具创建自定义鼠标样式，方法四则引入github库实现动画效果。对于时间显示，方法一是使用CSS定位和JavaScript实时更新分钟数，方法二使用dialog元素结合键盘事件显示和隐藏时间，方法三是通过键盘事件弹出当前时间的对话框。这些技巧可以帮助开发者更灵活地控制网页交互体验。

鼠标显示模块

方法一：谷歌浏览器插件

方法二：

设置方法css	js
style=“cursor: default;”	document.getElementById(“p1”).style.cursor=“pointer”;
可选值
default	默认
pointer	指针小手
wait	沙漏
help	问好帮助
text	文字
move	交叉箭头

方法三：cursor: url(cursors/cursor.cur), pointer;

cursor: url(cursors/cursor.cur), pointer;

首先用画图画一个鼠标的png,
用在线转化工具转化
代码中引入。
或者去网上download一个，然后添加

方法四：github的animatedWebCursors

设置为动画：
在这里插入图片描述

引入
<script src="***\animatedWebCursors-main\animatedWebCursors.js"></script>  
然后调用函数即可(需要将资源文件放入同目录下)：
<img src="***" alt="" class="imageButton" onclick="appstar2ani();">

时间显示模块

方法一

<style>
.warning-msg { bottom:30px; right:-225px; position:fixed;}
</style>
<div class="warning-msg">
                           
  <a href="" id="currentTime">18</a>   
</div>



setInterval(function(){ document.getElementById("currentTime").innerHTML=new Date().getMinutes().toLocaleString(); },1000);

document.onkeydown =cdk; 
function cdk(){ 
    if(event.keyCode ==13){
        document.getElementById("currentTime").style.visibility="hidden";
    }
     if(event.keyCode ==16){
        document.getElementById("currentTime").style.visibility="visible";
    }
}

方法二

<dialog close id="currentTime">这是打开的对话窗口</dialog>
var x = document.getElementById("currentTime");

document.onkeydown =cdk; 
function cdk(){ 
    if(event.keyCode ==13){
        x.show();
    } 
    if(event.keyCode ==16){
        x.close();
    }
}

方法三

document.onkeydown =cdk; 
function cdk(){ 
    if(event.keyCode ==13){
        alert(new Date().toLocaleString());
    } 
}