- 博客(77)
- 收藏
- 关注
RSS订阅原创 js最大公约数和最小公倍数
<script> function gcd(x, y) { if (x % y == 0) return y; return gcd(y, x % y) } function lcm(x, y) { return x * y / gcd(x, y) }</script>
2020-07-19 22:38:52
356
原创 js屏蔽关键字
<textarea name="" id="text" cols="30" rows="10"></textarea> <button>提交</button> <script> var a = document.querySelector('textarea'); var b = document.querySelector('button') var list = ['tmd',
2020-07-19 22:36:13
1136
原创 js简易计算器
<style> * { padding: 0; margin: 0; font-size: 28px; } .box { width: 560px; margin: 0 auto; background: rgb(182, 182, 182, .1); padding-top: 30px; } .main { display: flex; wid
2020-07-19 22:34:18
249
原创 js禁止系统默认行为
<script> // userPwd.oncopy = function (e) { 禁止复制 // console.log(666); // var ev = event || e; // ev.preventDefault(); // } // userPwd.onpaste = function (e) { 禁止粘贴 //
2020-07-19 22:31:41
183
原创 js自定义右键菜单
<style> * { margin: 0; padding: 0; } ul { width: 100px; display: none; position: fixed; left: 0; top: 0; border: 1px solid black;
2020-07-19 22:28:17
116
原创 js简易轮播图
<style> * { padding: 0; margin: 0; } li { list-style: none } .bigBox { width: 400px; height: 400px; margin: 50px auto; posit
2020-07-19 22:26:28
118
原创 js贪吃蛇小游戏
注：未做死亡判断，小蛇碰到屏幕边缘会自动返回<style> * { padding: 0; margin: 0; } .box { width: 20px; height: 20px; background-color: #6ff; position: absolute; left: 0; top: 0; border-radius: 50%; }
2020-07-19 22:25:18
91
原创 js全屏跑马灯
<style> * { padding: 0; margin: 0; } .box { width: 50px; height: 50px; background: skyblue; position: fixed; left: 0; top: 0; border-radius: 50%; background: -webkit-radial-grad
2020-07-19 22:22:46
218
原创 js缓冲运动
<style> * { padding: 0; margin: 0; } #box { width: 100px; height: 100px; background: skyblue; position: fixed; left: 0; top: 0; } </style><body> <div id="box">&.
2020-07-19 22:19:21
96
原创 js加速运动
<style> * { padding: 0; margin: 0; } #box { width: 100px; height: 100px; background: skyblue; position: fixed; left: 0; top: 0; } </style><body> <div id="box">&l
2020-07-19 22:17:45
228
原创 js减速运动
<style> * { padding: 0; margin: 0; } #box { width: 100px; height: 100px; background: skyblue; position: fixed; left: 0; top: 0; } </style><body> <div id="box">&l
2020-07-19 22:16:40
286
原创 js匀速运动
<style> * { padding: 0; margin: 0; } #box { width: 100px; height: 100px; background: skyblue; /* position: fixed; */ position: relative; left: 50px; top: 50px; } #box1 { .
2020-07-19 22:14:48
124
原创 js简版日历
<style> * { margin: 0; padding: 0; list-style: none; } #box { width: 280px; height: 360px; margin: 50px auto; background-color: black; color: aliceblue; line-height: 40px; }
2020-07-19 22:11:55
111
原创 js滑动解锁
<style> * { margin: 0; padding: 0; list-style: none; } #box { width: 400px; height: 500px; border: 1px solid red; position: relative; margin: 50px auto; } #block { width: 100
2020-07-19 22:04:47
389
原创 js滑动验证
<style> * { margin: 0; padding: 0; list-style: none; } #box { width: 650px; height: 400px; margin: 50px auto; border: 1px solid red;
2020-07-19 22:03:34
247
原创 js鼠标移动的轨迹
<style> * { margin: 0; padding: 0; } div { width: 30px; height: 30px; border-radius: 50%; /* background: red; */ position: fixed; display: flex; align-items: center; justify-con
2020-07-19 21:58:35
781
原创 js弹球小游戏（带积分）
注：如果小球与底部方块的角碰撞，积分可能有些许bug<style> #box { width: 400px; height: 400px; border: 1px solid #000000; margin: 50px auto; position: relative; } #ball { height: 60px; width: 60px; border-radius:
2020-07-19 21:56:43
328
原创 js弹球_运动的小球
<style> #box { width: 400px; height: 400px; border: 1px solid #000000; margin: 50px auto; position: relative; } #ball { height: 30px; width: 30px; border-radius: 50%; background-color
2020-07-19 21:52:47
210
原创 js键盘控制方块运动(自动运动，仅控制方向，到达屏幕边缘会自动反弹）
<style> * { padding: 0; margin: 0; } .box { width: 100px; height: 100px; background-color: #6ff; position: absolute; left: 0; top: 0; } </style><div class="box"></div
2020-07-19 21:51:02
314
原创 js键盘控制方块移动
<style> * { padding: 0; margin: 0; } .box { width: 100px; height: 100px; background-color: #6ff; position: absolute; left: 0; top: 0; } </style><div class="box"></div
2020-07-19 21:48:16
317
1
原创 js放大镜（带切换图片）
注：请按比例设置宽高，以确保放大的部位准确<style> .left { width: 300px; height: 400px; float: left; position: relative; } .right { width: 300px; height: 300px; b
2020-07-19 21:44:38
641
原创 js鼠标拖拽
<style> .a { width: 100px; height: 100px; background-color: #000; position: absolute; } </style><div class="a"></div> <script> // 1 鼠标按下时获取鼠标距离
2020-07-19 21:40:56
97
原创 js的鼠标跟随
<style> .a{width: 100px;height: 100px;background-color: #000;position: absolute;} /* body{width: 2000px;height: 2000px;} */ </style><div class="a"></div> <script> var a = document.querySelecto
2020-07-19 21:36:49
113
原创 js事件委托选项卡
<style> .active{background-color: #f00;} .tab div{display: none;} .show{display: block !important;} </style> <script> // 页面加载完成之后再执行 window.onload = function(){ var tab = docume
2020-07-19 21:35:05
299
原创 js鼠标移动随机变色
<style> div { width: 200px; height: 200px; background-color: gold; overflow: hidden; margin: 0 auto; margin-top: 100px; } p { width: 50px;
2020-07-19 21:27:50
185
原创 js简易人员信息的增删改查
<style> * { padding: 0; margin: 0; } .wrapBox { width: 600px; margin: 50px auto; min-height: 500px; background-color: #FFCCCC; } .wrapBo
2020-07-19 21:26:30
557
原创 js简易月份表
<style> * { margin: 0; padding: 0; } li { list-style: none; } .ul1 { width: 300px; height: 450px; display: flex; justify-con
2020-07-19 21:21:51
333
1
原创 js简易全选和反选
全选：<input type="checkbox" id="checkAll"> <br> 选项：<input type="checkbox" class="checkOne">A <input type="checkbox" class="checkOne">B <input type="checkbox" class="checkOne">C <input type="checkbox" class="c
2020-07-19 21:20:05
79
原创 js简易点击切换
<style> .active { background-color: #f00; } div { display: none; } .show { display: block; } </style><button index='0'>1</button> <butt.
2020-07-19 21:16:42
160
原创 js实现当前时间到十一的倒计时
<h1 id="h3"></h1> <script> time('2020,10,1 00:00:00'); setInterval(function () { time('2020,10,1 00:00:00'); }, 1000) function time(n) { var current = new Date(); var
2020-07-19 21:12:52
434
原创 js完成当前时间大写的显示
<h1 id="h2"></h1> <script> var date = new Date(); var y = date.getFullYear(); var mon = date.getMonth(); //月份是从0开始的 var d = date.getDate(); //天数 var w = date.getDay(); //星期 星期天是0
2020-07-19 21:12:13
470
原创 js小广告
<style> #advise { width: 425px; height: 439px; background: url(img/2.gif) 425px 439px; position: relative; } #btn { width: 0px; height: 0px;
2020-07-19 21:09:54
107
原创 js秒表计时
<button id='btn1'>开始</button> <button id='btn2'>暂停</button> <button id='btn3'>结束</button> <span id='hour'>0</span> ： <span id='min'>0</span> ： <span id='sec'>0</span&g
2020-07-19 21:08:11
78
原创 js验证码高级版
相比于上一版把大小写和数字都罗列出来，这次使用了unicode码，比较方便<script> function arr(n) { ///// 先打印出随机数要的数字中英文大小写 //////// var arr1 = [];//数字 for (var i = 0; i <= 9; i++) { arr1.push(i); } va
2020-07-19 21:07:03
185
原创 js统计字符串中的元素出现了多少次
<script> var str = 'qqssddqeqwreqyeiwfhhkasdbcmzxnvakjhdgfiweuryowheflkljsbbdmnbvkajsjehriiuwue'; quChon(str) function quChon(str) { var newStr = ''; for (var i = 0; i < str.length; i++) {
2020-07-19 21:03:09
236
原创 js屏蔽关键字
<script> var str = '卧槽,哈哈哈,卧槽,哈哈哈,卧槽,哈哈哈,卧槽,哈哈哈'; var b = str.split('卧槽,'); str = b.join(''); document.write(str); </script>
2020-07-19 21:01:59
558
原创 js截取文件后缀名
<script> var atr1 = 'aa.ppt'; var atr2 = 'bb.ppt'; var atr3 = 'cc.jpg'; function a(str) { var i = str.lastIndexOf('.'); return str.slice(i + 1) } document.write(a(atr1) + ' ' + a
2020-07-19 21:01:22
218
原创 js随机生成4位验证码，包括大小写（简单版）
第一种是最笨的一种办法来实现验证码中既有数字又有大小写，第二种用unicode编码更方便一点，还顺便加了个验证刷新的作用，但刷新的是整个页面，同时还有个bug，就是数字及小写、大写的位置是固定的，更完美的写法请看后面的博客，谢谢！<h4>随机生成4位验证码（randomCode 范围[a-z|0-9|A-Z]） arr = [] 验证的时候，不区分大小写</h4> <input type="text" id="aaa"> <butt
2020-07-09 00:38:48
2120
原创 js数组2
1.数据类型1）基本数据类型 五种 存储在栈当中2）引用数据类型 function Array Object基本数据类型的复制实际上就是copy了一份一样的数据，互相独立引用数据类型的复制实际上是地址的复制，而同一个地址指向的是同一个数据(堆空间)深拷贝和浅拷贝 — 针对引用数据类型 var arr1 = [1,2,3]; // 浅拷贝 --- 复制了同一个地址 --- 相互影响 var arr2 = arr1; arr1.push('a');
2020-07-09 00:11:16
161
1
原创 js选择排序
<h5>选择简单</h5> <script> var c = [9, 5, 2, 7]; for (var j = 0; j < c.length - 1; j++) { for (var i = j + 1; i < c.length; i++) { if (c[j] > c[i]) { var temp = ...
2020-07-08 23:41:57
174
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人