分类：JS

2020
09-25

JS快速实现简单计算器

JS快速实现简单计算器 本文实例为大家分享了JS实现简单计算器的具体代码，供大家参考，具体内容如下直接上图HTML部分<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>我的第一个计算器</title><linkrel="stylesheet"href="计算器.css"rel="externalnofollow"/><scriptsrc="计算器.js"></script></head><body><h1style="text-align:center;">欢迎使用</h1><!--<audiosrc="audio/1.mp3"id="music"></audio>--><hr/><p... 继续阅读 >
2020
09-25

javascript中contains是否包含功能实现代码(扩展字符、数组、dom)

javascript中contains是否包含功能实现代码(扩展字符、数组、dom) 一个小误区JS中的contains今天想要用JS判断集合中是否包含另一个集合。发现，Contains并不能达到所要的效果，查找之后发现了问题原来，js的contains方法用来查看dom元素的包含关系，并不是Java中数组的contains方法。先看一下duyunchao同学分享的代码$(document).ready(function(){varArrays=['11','22','33'];varArray='11';if(Arrays.indexOf(Array)>=0){alert('Arrays中包含Array');}});若js... 继续阅读 >
2020
09-25

javascript绘制简单钟表效果

javascript绘制简单钟表效果 本文给大家分享一个canvas的时钟绘制，供大家参考，具体内容如下复制可直接使用<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><style>h1{text-align:center;}div{width:400px;height:400px;margin:10pxauto;padding:0;}</style></head><body><h1>手绘时钟</h1><hr/><div><canvasid="c1"width="400px"height="400px"></canvas></div><scripttype="text/javascript">var... 继续阅读 >
2020
09-25

js实现登录时记住密码的方法分析

本文实例讲述了js实现登录时记住密码的方法。分享给大家供大家参考，具体如下：常见的很多网站登录，都有记住密码功能，下面是用js实现的记住密码功能（代码用的源生js，不用引入任何插件，大家如果引入了jQuery，可以进行修改，优化）js部分window.onload=function(){varoForm=document.getElementById('myForm');varoUser=document.getElementById('username');varoPswd=document.getElementById('passwrod');var... 继续阅读 >
2020
09-25

JS内置对象和Math对象知识点详解

Math对象<script>//Math数学对象不是一个构造函数，所以我们不需要new来调用而是直接使用里面的属性和方法即可console.log(Math.PI);//一个属性圆周率console.log(Math.max(1,99,3));//99console.log(Math.max(-1,-10));//-1console.log(Math.max(1,99,'pink老师'));//NaNconsole.log(Math.max());//-Infinity</script>自己封装对象<script>//利用对象封装自己的数学对象里... 继续阅读 >
2020
09-25

JS实现图片懒加载(lazyload)过程详解

对于图片较多的页面，使用懒加载可以大幅提高页面加载速度，提高用户体验。懒加载的意义（为什么要使用懒加载）对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚... 继续阅读 >
2020
09-25

基于js实现逐步显示文字输出代码实例

今天清理chrome书签，突然就点到了一个关于知乎五周年的网页，这帮程序员的脑子真有趣，就算是保存一年后再看也还是觉得好有趣，下边是一个截图图片描述这个网页展示了一个类似ide接口的小窗口，文字逐步输入，并且还伴随一些有点炫的css动画，为个人生成专属数据。当然这个展示还包括了其他一些数据的传输啦，特殊效果（类似触发一个标签的js回调啦），css那个一堆波浪的动画啦等等一些有意思的，这些暂时不管，我们今天就来看看... 继续阅读 >
2020
09-25

JavaScript实现电灯开关小案例

JavaScript实现电灯开关小案例 今天学习了JavaScript的一些简单知识，感觉挺有意思，仅仅通过简简单单的几行代码就能模拟出生活中的一些应用场景，Interesting。比如我今天要写的这个模拟电灯开关的小案例。首先对本案例进行一个分析，过程如下：1.获取图片对象2.绑定单击事件3.每次点击，切换图片切换规则：如灯是开着的，则切换图片为off状态，如果灯是关着的，则切换图片为on状态，灯的状态用flag标记代码实现：<!DOCTYPEhtml><htmllang="en"><head><meta... 继续阅读 >
2020
09-25

javascript实现计算器功能

javascript实现计算器功能 本文实例为大家分享了javascript实现计算器功能的具体代码，供大家参考，具体内容如下问题描述：1、除法操作时，如果被除数为0，则结果为02、结果如果为小数，最多保留小数点后两位，如2/3=0.67（显示0.67），1/2=0.5（显示0.5）<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>百度笔试0329</title><styletype="text/css">body,ul,li,select{margin:0;padding:0;box-sizing:border-box;}ul,... 继续阅读 >
2020
09-24

javascript实现简易数码时钟

javascript实现简易数码时钟 本文实例为大家分享了javascript实现简易数码时钟的具体代码，供大家参考，具体内容如下通过这个小例子复习一下Date对象的基本使用.还可以用Date对象做定时器，计时器等等.效果如图：可以自己去找炫一点的图片来代替文字,原理都是一样,只是如果用图片代替文字，则定时切换图片即可.HTML代码：<divid="clock"><p></p><p></p><p></p></div>CSS代码:*{margin:0;padding:0;}#clock{width:300px;height:150px;position:relative... 继续阅读 >
2020
09-24

JS实现滑动拼图验证功能完整示例

JS实现滑动拼图验证功能完整示例 本文实例讲述了JS实现滑动拼图验证功能。分享给大家供大家参考，具体如下：先看一下效果图：设置画布滑块属性constl=42,//滑块边长r=10,//滑块半径w=310,//canvas宽度h=155,//canvas高度PI=Math.PIconstL=l+r*2//滑块实际边长设置背景图片：图片链接地址可以自行更换functiongetRandomImg(){return'https://picsum.photos/300/150/?image='+getRandomNumberByRange(0,100)}CSS部分代码... 继续阅读 >
2020
09-24

JS中FormData类实现文件上传

JS中FormData类实现文件上传 本文实例为大家分享了JS中FormData类实现文件上传的具体代码，供大家参考，具体内容如下上篇文章讲到了FormReader类实现文件上传，但是那是HTML5的新特性，在不支持H5的浏览器上则无法使用。这次介绍一个JS的普通类FormData，在不支持H5浏览器环境下也可以文件上传和预览，并且还能监控上传进度。案例一：xhr.upload.onprogress监控文件的上传进度，并且动态显示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><me... 继续阅读 >
2020
09-24

JS中FileReader类实现文件上传及时预览功能

JS中FileReader类实现文件上传及时预览功能 FileReader是H5浏览器才支持的JS类，如果不支持H5de浏览器可以使用FormData类实现文件的上传预览，使用可以参考我的下一篇博客：JS中FormData类实现文件上传代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>文件及时预览功能</title></head><body><inputtype="file"id="file"><imgsrc=""id="preview"><script>varfi... 继续阅读 >
2020
09-24

js、jquery实现列表模糊搜索功能过程解析

实现的搜索功能：1.可以匹配输入的字符串找出列表中匹配的项，列表框的高度跟随搜索出的列表项的多少改变2.可以点击某一项进行选中列表项3.可以按下上、下、回车键来控制列表项4.按下回车键时则会选中列表项5.点击文本框中的下拉键头时会切换下拉框的显示/隐藏6.点击文本框外部时自动隐藏下拉框先来预览一下效果吧！列表中包含的列表项有：北京、上海、杭州、安庆、大兴安岭、安阳、广州、贵阳、哈尔滨、合肥、邯郸、呼伦贝... 继续阅读 >
2020
09-24

JavaScript定时器使用方法详解

JavaScript定时器使用方法详解 本文实例为大家分享了JavaScript定时器使用的具体代码，供大家参考，具体内容如下定时器分类1、循环执行：一段程序能够每间隔一段时间执行一次【setInterval()】【clearInterval()】2、定时执行（一次定时器）：某一段程序需要在延迟多少时间后执行【setTimeout()】【clearTimeout()】定时器使用使用注意：为了防止定时器累加，使用定时器要先清除后设置；要保证内存中只有一个定时器。1、循环执行：一段程序能够每间隔一段时间执... 继续阅读 >
2020
09-24

js实现时钟定时器

js实现时钟定时器 本文实例为大家分享了js实现时钟定时器的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>时钟</title><scripttype="text/javascript">functionshowClock(){//1.获取当前时间vartime=newDate();//document.write(time);varyear=time.getFullYear();//document.write(year);varmonth=time.getMonth()+1;//document.write(month);varday=time.getD... 继续阅读 >