分类：JS

2020
11-08

js实现日历

这周写自己的项目发现又用到日历了，加之自己毕业之后的第一个工作中遇到的任务也是需要写个日历(组员写了，我就不用写了)今天就来好好折腾一下日历是怎么写的。首先，我们看看windows的日历。发现总共有这么几个元素。先实现试试。1.年份的选择、月份的选择2.周一~周日(周日~周六)3.日历格子6*7=42从数据的角度来分析日历的实现是比较简单的1.我们需要显示一个当前时间的结构-newDate()2.我们需要显示当月的信息-[... 继续阅读 >
2020
11-04

原生JavaScript实现贪吃蛇游戏

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下1.HTML部分，东西很少<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>贪吃蛇</title><style>*{margin:0px;padding:0px;}td{border-radius:30%;}</style></head><body><scripttype="text/javascript"src="./snake.js"></scri... 继续阅读 >
2020
11-01

JavaScript实现刮刮乐效果

JavaScript实现刮刮乐效果 刮刮乐怎么做？本文实例为大家分享了JavaScript实现刮刮乐效果的具体代码，供大家参考，具体内容如下来这我教你1、首先准备好编程软件webStorm或者eclipse都行2、不会编写代码？给你准备好了3、如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.outer{height:90px;width:300px;margin:0auto;margin-top:5px;}.box{height:70px... 继续阅读 >
2020
10-30

JavaScript实现网页计算器功能

JavaScript实现网页计算器功能 本文实例为大家分享了JavaScript实现网页计算器的具体代码，供大家参考，具体内容如下要求：在网页上实现简单的计算器功能和界面CSS样式代码：<style>*{margin:0;padding:0;}#panel{width:202px;height:252px;margin:30pxauto;border:3pxsolid#ccc;}#screen{width:134px;height:40px;margin:5px;display:inline-block;border:1pxsolid#ddd;line-height:40px;padding-left:3px;padding-rig... 继续阅读 >
2020
10-30

js实现随机圆与矩形功能

本文实例为大家分享了js实现随机圆与矩形功能的具体代码，供大家参考，具体内容如下1、节点操作版<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>DOM节点操作版本</title></head><style>*{margin:0;padding:0;}html,body,.box{width:100%;height:100%;}#content{background:#f5f5f5;}.circle{border-radius:... 继续阅读 >
2020
10-30

JS实现多功能计算器

JS实现多功能计算器 本文实例为大家分享了JS实现多功能计算器的具体代码，供大家参考，具体内容如下1、开发语言HTML+CSS+JavaScript2、开发工具VisualStudioCode3、项目GitHub地址：计算器(喜欢可以给一个star)4、项目运行截图：5、技术分析：由于除了简单的四则运算，还需要进行括号匹配，以及优先级的运算。采用后缀表达式的形式进行处理，同时通过模拟栈的特点运用JS自带的数组进行处理。由于代码有详细的注释，所以直接上代码。6、项目代码：... 继续阅读 >
2020
10-30

JS实现简单贪吃蛇小游戏

JS实现简单贪吃蛇小游戏 本文实例为大家分享了JS实现简单贪吃蛇游戏的具体代码，供大家参考，具体内容如下1、使用语言HTML+CSS+JavaScript2、使用工具visualstudiocode3、GitHub项目地址：贪吃蛇4、项目运行截图：5、项目功能分析：主要使用数组来存储蛇的位置，地图和蛇都是一个二维数组，对于有蛇的地方，地图的CSS就会发生改变，同时添加了添加了一个音乐播放按钮，通过CSS动画实现旋转。6、项目代码：（项目代码有详细的注释）snake.html<!--*@A... 继续阅读 >
2020
10-30

js 实现碰撞检测的示例

碰撞检测目录代码实例与简易拖拽的差异下载源码链接 代码实例<divid="box"style="background:#334;width:100px;height:100px;position:absolute;cursor:move;z-index:999;"></div><divid="box2"style="background:green;width:100px;height:100px;position:absolute;top:200px;left:500px;"></div>(function(){vardragging=falsevarboxX,boxY,mouseX,mouseY,offsetX,offsetYvarbox=do... 继续阅读 >
2020
10-30

用js实现放大镜效果

用js实现放大镜效果 本文实例为大家分享了js实现放大镜效果的具体代码，供大家参考，具体内容如下该放大区域用背景图片放大<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title></title><styletype="text/css">body{height:1200px;background-color:lightskyblue;}ul{margin:0;padd... 继续阅读 >
2020
10-30

通过JS判断网页是否为手机打开

通过JS判断网页是否为手机打开 参考一：//返回true表示为pc端打开，返回false表示为手机端打开functioncheck(){varuserAgentInfo=navigator.userAgent;varAgents=newArray("Android","iPhone","SymbianOS","WindowsPhone","iPad","iPod");varflag=true;for(varv=0;v<Agents.length;v++){if(userAgentInfo.indexOf(Agents[v])>0){flag=false;break;}}returnflag;}参考二：简单的利用JS来判断页面是在手机端还是... 继续阅读 >
2020
10-30

js实现简易ATM功能

js实现简易ATM功能 本文实例为大家分享了js实现简易ATM功能的具体代码，供大家参考，具体内容如下案例描述程序根据输入的序号执行相应的业务处理逻辑:1.存款2.取款3.查看余额4.取卡如果不输入或者错误输入则弹窗提示:你的输入的业务序号有误,请重新输入!里面现存金额123元。如果存款，就用输入的存款金额加现存的金额,之后弹出现有余额的提示框如果取款，就减去取的钱数，之后弹出现有余额的提示框,如果取款的金额大于剩余金额,则提示余额不足... 继续阅读 >
2020
10-28

js实现自定义滚动条的示例

自定义滚动条目录代码实例代码解析下载源码链接代码实例*{padding:0;margin:0;}#box1{width:500px;height:20px;background:#999;position:relative;margin:20pxauto;}#box2{width:20px;height:20px;background:green;position:absolute;}#box3{width:0;height:0;margin:20pxauto;}#box3img{width:100%;height:100%;}<divid="box1"><divid="box2"></div></div><divid="box3">... 继续阅读 >
2020
10-28

js实现简易拖拽的示例

简易拖拽目录代码实例代码解析scrollWidth,clientWidth,offsetWidth的区别offsetX,clientX,pageX的辨析下载源码链接 代码实例<divid="box"style="background:#334;width:100px;height:100px;position:absolute;cursor:move;"></div>(function(){vardragging=falsevarboxX,boxY,mouseX,mouseY,offsetX,offsetYvarbox=document.getElementById('box')//鼠标按下的动作box.onmou... 继续阅读 >
2020
10-28

js实现限定范围拖拽的示例

限定范围拖拽目录代码实例与简易拖拽的差异下载源码链接 代码实例*{padding:0;margin:0;}#box1{width:500px;height:500px;background:#999;position:relative;left:100px;top:100px;}#box{width:100px;height:100px;background:#334;position:absolute;cursor:move;}<divid="box1"><divid="box"></div></div>(function(){vardragging=falsevarboxX,boxY,mouseX,mouseY,of... 继续阅读 >
2020
10-28

js实现磁性吸附的示例

磁性吸附目录代码实例与限定范围拖拽的差异下载源码链接  代码实例*{padding:0;margin:0;}#box1{width:500px;height:500px;background:#999;position:relative;left:100px;top:100px;}#box{width:100px;height:100px;background:#334;position:absolute;cursor:move;}<divid="box1"><divid="box"></div></div>(function(){vardragging=falsevarboxX,boxY,mouseX,mous... 继续阅读 >