![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js-案例
alo_ne
这个作者很懒,什么都没留下…
展开
-
日期相关
获取当前日期和前N天的日期 //获取当前时间 let myDate = new Date(); let arr = myDate.toLocaleDateString(); var aa = arr.split('/') function zz(name) { return name < 10 ? "0" + name : name } console.log(a原创 2021-04-20 14:46:12 · 70 阅读 · 0 评论 -
正则格式化日期
var parttern = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/ var formateDate = "20210106111212".replace(parttern ,"$1/$2/$3/ $4:$5:$6") $1代表的是上面的第一个括号 输出的结果是2021/01/06 11:12:12原创 2021-04-15 15:09:37 · 146 阅读 · 0 评论 -
浏览器全屏幕
<button onclick="toggleFullScreen(event)">点我全屏</button> <script> function FullScreen(el) { var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; if (!isFul...原创 2021-01-21 15:59:17 · 84 阅读 · 0 评论 -
js-点击全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button原创 2020-12-01 09:23:19 · 360 阅读 · 0 评论 -
js-案例-标签中this改变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul>原创 2020-11-10 16:10:37 · 144 阅读 · 0 评论 -
数组中的对象排序
<script> var arr = [ { name: 'zopp', id: 0 }, { name: 'gpp', id: 18 }, { name: 'yjj', id: 8 } ]; function compare(property) { return function (a, b) { var va...原创 2020-09-09 14:29:07 · 360 阅读 · 0 评论 -
红心
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *原创 2020-09-02 17:59:22 · 80 阅读 · 0 评论 -
js-数组合并
1、concat() 数组方法 let arr = [1, 2, 3] let arr1 = [4, 5, 6] console.log(arr.concat(arr1)); //[1,2,3,4,5,6] 2、es6解构 console.log([...arr,...arr1]); //[1,2,3,4,5,6]原创 2020-07-08 15:21:32 · 102 阅读 · 0 评论 -
打印出现在字符串中某字母出现最多的次数
假设有一个字符串,下面让我们一起来查找出现次数最多的字符 var str = 'asdfssaaaseraaasdfdsasasasaa'; 首先,我们定义一个Object用来存放拆分的字符串,然后遍历字符串。 判断obj里面是否出现某一个字符,如果未出现则给obj添加以此字符为键值的属性,并赋值为1。反之则给此属性值++; var obj = {}; for (var i = 0; i < str.length; i++) { if (!obj[str.charAt(i)]) {原创 2020-07-01 10:21:35 · 287 阅读 · 0 评论 -
js-进度条
<style> * { padding: 0; margin: 0; } .progressbar { height: 5px; background: skyblue; width: 0%; position: fixed; top: 0; lef...原创 2020-06-23 11:48:16 · 142 阅读 · 0 评论 -
js-获取验证码
<body> <button>发送</button> <span></span> <script> var btn = document.querySelector("button"); var spn = document.querySelector("span"); var num = 6; var ca = null; btn.原创 2020-06-18 22:13:20 · 226 阅读 · 0 评论 -
js-倒计时
t拿到是毫秒 先转成天、时、分、秒即可 <h3 id="t_d"></h3> <script type="text/javascript"> function getRTime(){ var EndTime= new Date('2021/01/25 00:00:00'); //截止时间 var NowTime = new Date();//现在的时间 var t =En原创 2020-06-13 21:14:35 · 105 阅读 · 0 评论 -
js-12小时制时间
技术点:当需要补0的时候 可以采用三木运算补 但是比较麻烦 可以封装一个函数 比较方便 12小时转换 只要当小时超过12就转成下午(PM) function go() { var myh2 = document.querySelector("h2"); var now = new Date(); var myho = now.getHours(); var mymi = now.getMinut原创 2020-06-11 21:37:24 · 1377 阅读 · 0 评论 -
js-数组添加方法-去重
<script> var num = [1, 2, 1, 2, 3, 4, 5, 6, 4, 2]; Array.prototype.repeat = function () { var arr = [] //this 就指代num数组 for (let i = 0; i < this.length; i++) { if (arr.indexOf...原创 2020-06-06 12:17:24 · 416 阅读 · 0 评论 -
js-给字符串添加方法-检测是否是字母
<script> String.prototype.code = function () { var result; var reg = /^[a-z]+$/i; if (reg.test(this)) { result = true; } else { result = false; } ...原创 2020-06-06 12:08:43 · 209 阅读 · 0 评论 -
js-浮动切换
<style> div { width: 200px; height: 30px; line-height: 30px; margin-top: 100px; border: 1px red solid; overflow: hidden; position: relative; } ...原创 2020-06-06 11:21:20 · 118 阅读 · 0 评论 -
方形幸运转盘
<style> * { padding: 0; margin: 0; } #uls { width: 500px; height: 500px; margin: 50px auto; } li { width: 150px; height:...原创 2020-06-06 10:58:13 · 158 阅读 · 0 评论 -
js-自定义鼠标右击事件
<style> .zz { width: 100px; height: 300px; background-color: red; position: absolute; } </style> `` ```javascript <script> document.oncontextmenu = funct...原创 2020-06-05 15:44:23 · 652 阅读 · 0 评论 -
导航切换-兄弟互斥
<style> li { width: 100px; height: 100px; background: url(./img/1.jpg) no-repeat; float: left; list-style: none; margin-left: 50px; } li.on { ...原创 2020-06-03 11:13:52 · 217 阅读 · 0 评论 -
导航切换-自行选中和消失
方法一: <style> li { width: 100px; height: 100px; background: url(./img/1.jpg) no-repeat; float: left; list-style: none; margin-left: 50px; } li.on {原创 2020-06-03 11:06:41 · 141 阅读 · 0 评论 -
查找-高亮
思路 1、获取所需元素 2、监听点击事件 判断输入的内容是否包含 3、包含则先转为数组 之后把颜色放进去 在转为字符串后赋值回去 <style> .box { width: 300px; border: 5px solid #ccc; background-color: rgb(245, 245, 209); margin-top: 10px; pad.原创 2020-06-03 10:51:10 · 155 阅读 · 0 评论 -
爱好选择
思路: 1、在js中查找需要用到的元素 2、监听全选、反选、查看按钮 2、遍历input、结合checked是否为true来做 <style> ul { width: 350px; padding-bottom: 15px; border-bottom: 2px gray solid; } ul li { width: 60px; .原创 2020-06-03 10:14:26 · 532 阅读 · 0 评论 -
顺序/随机颜色
思路: 1、页面创建一个div、button、input 2、获取创建的元素 3、创建一个数组存放颜色 4、在button上监听点击事件 5、获取input中的字符串并转为数组 6、遍历数组 将数组的每个item赋值一个新的标签(带背景颜色 ) <style> div { width: 300px; height: 300px; border: 1px gray solid;原创 2020-06-03 09:56:19 · 184 阅读 · 0 评论 -
图片时钟
思路: 1、现在页面上布局出00:00:00的布局样式 2、js中获取上面的6张图片 3、封装一个函数 在函数里面获取时分秒 4、将获取的时分秒连接成字符串 如202716 5、遍历图片,将步骤4的每个数赋给图片的src 6、启用定时器 即可 <style> body { background-color: black; } span { color: white; ...原创 2020-06-03 09:16:43 · 261 阅读 · 0 评论 -
百度-鼠标拖拽移动
一、思路 1、创建一个盒子 2、监听 mousedown、mouseup、mousemove事件 3、创建一个机制 let canMove = false 来处理鼠标是否抬起 4、盒子定位、把鼠标的值赋过去 5、阻止默认事件 和浏览器失去焦点 6、控制盒子在浏览器内不出去 ...原创 2020-06-02 18:55:10 · 233 阅读 · 0 评论