每日一練
关注
分享
扫一扫
那是遇知吧
Life is but a walking shadow
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
每日一练23：二维码的实现
第一种写法qrcodenpm i qrcode --save<template> <div id="qrCode"> <div id="code"></div> <canvas id="canvas"></canvas> </div></template><script>import QRCode from "qrcode";export defa原创 2020-10-21 18:03:41 · 392 阅读 · 0 评论 -
每日一练21：图片上传并预览
FileReader.readAsDataURL(File)//转换成base64格式 FileReader.readAsText()//转换成字符串格式 FileReader.readAsArrayBuffer(File)//转换成ArrayBuffer格式 FileReader.readBinaryString(File)//转换成原始二进制格式<!DOCTYPE html><html lang="en"> <head> <meta.原创 2020-07-21 23:15:12 · 130 阅读 · 0 评论 -
每日一练20：多维数组改为一维数组
方式一：Array.from var arr =[[1,2,3],10,[24,5],[[12,88],435]]; var arr2 = Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{return a-b}); console.log(arr2);//(9)[1, 2, 3, 5, 10,...转载 2019-12-20 09:27:50 · 115 阅读 · 0 评论 -
每日一练19：合并两个数组的n种办法
var ar1 = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'], ar2 = ['A', 'B', 'C', 'D'];1：concatconsole.log(ar1.concat(ar2));2：applyar1.push.apply(ar1,ar2); console.log(...原创 2019-12-18 17:25:12 · 223 阅读 · 0 评论 -
每日一练10：canvas如何拖动内置图片
结果如下：图片在此：HTML：<canvas width="500" height="500" style="border:4px solid #F60" id="mycas"></canvas>JS：<!DOCTYPE html><html lang="en"><head> <met...原创 2019-11-22 15:13:34 · 280 阅读 · 0 评论 -
每日一练11：canvas动态绘制图形
呈现结果：1：储存改变后的值：shapeval = { shape: pickShape.value, color: pickColor.value, strokefill: pickStroke.value, line: pickLine.value, clear: pickClear.value};2：开始值dis = {...原创 2019-11-23 15:23:53 · 250 阅读 · 0 评论 -
每日一练12：VUE编写简单的侧边导航栏
https://www.cnblogs.com/snandy/archive/2011/03/13/1981611.htmlHTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...原创 2019-11-27 13:50:40 · 655 阅读 · 0 评论 -
每日一练13：Canvas简易刮刮乐
显示效果如图：首先加载图片：var img = new Image(),imgs = ['p_0.jpg', 'p_1.jpg'],num = Math.floor(Math.random() * 2);mycav.style.backgroundImage = 'url(./' + imgs[num] + ')';建立一个imgs数组，然后弄个随机数，因为是两张图片所以随...原创 2019-11-27 17:05:14 · 155 阅读 · 0 评论 -
每日一练14：Canvas大转盘抽奖
显示结果：指针图片：代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2019-11-30 17:22:45 · 204 阅读 · 0 评论 -
每日一练15：echarts画中国地图和省联动地图
地图效果：点击后：完整代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>echarts中国地图</title> <style> body,html, .centerItem{...原创 2019-12-03 09:53:25 · 545 阅读 · 1 评论 -
每日一練16：canvas验证码
效果如图：css： input{ border-radius:5px; border:1px solid #fad0c4; box-shadow: 0px 2px 3px #ff9a9e; height:30px } button{ ...原创 2019-12-04 09:19:24 · 204 阅读 · 0 评论 -
每日一練17：WebGL编写简易动态粒子效果
效果图为jpg的哈：完整代码如下：HTML<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="keywords" content="" /> <meta name="description" content...原创 2019-12-06 16:27:17 · 1050 阅读 · 0 评论 -
每日一練18：var和let百度面試題
varvar a = '全局' var obj1 = { a:"局部", say:function(){ console.log(this.a); } } obj1.say()//局部 var res = obj1.say; res()//全局 var obj2 = { ...原创 2019-12-14 15:49:42 · 205 阅读 · 0 评论 -
每日一练09：VUE编写简易添加商品和删除商品功能
效果如下：说明：利用goods.length获取物品全部数量 利用循环把物品循环出来 this.goods.splice(idx, 1)删除当前商品 用for (var i in this.goods) {if (this.goods[i].name == name) {return;}}去重 为了避免传递进去的name值有空格，我们这里使用name.trim()，...原创 2019-11-21 15:24:17 · 505 阅读 · 0 评论 -
每日一练08：VUE写的简易穿梭框
效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfil...原创 2019-11-20 16:58:57 · 259 阅读 · 0 评论 -
每日一练07：canvas时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-11-19 17:31:49 · 205 阅读 · 0 评论 -
每日一練06：javascript原生拖拽写的日食
看下效果：日食：代码献上：<!DOCTYPE HTML><html><head> <link href="work.css" rel="stylesheet"> <meta charset="UTF-8"> <meta name="Generator" content="Edit...原创 2019-11-20 14:50:16 · 187 阅读 · 0 评论 -
每日一練05：Javascript表单验证
先看下成果：可以看到这里面包含常用的几个验证信息思路编写页面样式 美化页面 构造不同的验证方法 正确时显示什么，错误时显示什么 定义一个构造函数Validator，把每个input，每个input需要验证什么方法写进去 在这个构造函数中定义一个数组arr用来存放每个验证方法 在这个构造函数中添加一个接收input传进来的名字和方法的add原型方法，循环传递进来的方法从里...原创 2019-11-18 15:03:39 · 227 阅读 · 0 评论 -
每日一練04：无限极目錄
JS原生獲取節點：childNodes; //获取a的全部子节点；parentNode; //获取a的父节点；nextSibling; //获取a的下一个兄弟节点previousSibling; //获取a的上一个兄弟节点firstChild; //获取a的第一个子节点lastChild; //获取a的最后一个子节点CSS： ul { wi...原创 2019-11-09 16:57:56 · 128 阅读 · 0 评论 -
每日一練03：拖拽框
HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2019-11-08 17:14:48 · 163 阅读 · 0 评论 -
每日一練02：new Set取交集
取交集var arr1 =[1,2,3,4,1,3],arr2=[1,66,3,45,1,3]; var a = arr1.filter(function(v,i){ return new Set(arr2).has(v) }); var a2 = new Set(a) console.log(a2);取大于2并去重var arr =[1,2,3,4,1,3]; ...原创 2019-10-27 14:12:46 · 398 阅读 · 0 评论 -
每日一練01：大乐透 双色球
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-10-23 17:04:44 · 330 阅读 · 0 评论 -
每日小練習之JQuery月份和天數不足2位加零（part6）
方法一：slice（）var aa = new Date();var yy =aa.getFullYear();var mm =aa.getMonth()+1;var dd =aa.getDate();alert(yy+'-'+('00'+mm).slice(-2)+'-'+('00'+dd).slice(-2));結果：2019-07-24方法二：var aa =...原创 2019-07-24 13:23:03 · 247 阅读 · 0 评论 -
每日小練習之JQuery計時三分鐘后停止（part5）
HTML：<label for="min">mm</label><input type="text" id="min" value="0"> <label for="sec">sec</label><input type="text" id="sec" value="0"><script src="http...原创 2019-04-03 17:16:21 · 189 阅读 · 0 评论 -
每日小練習之JQuery網頁加載進度條（part3）
1：當圖片加載完後loading消失HTML<div class="loading"> <div class="picc"> <i></i> <i></i> <i></i> <i></i> <i></i&...原创 2019-04-03 15:41:56 · 142 阅读 · 0 评论 -
每日小練習之css3的loading（part4）
純 css3編寫loading功能<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>loading</title></head><style> .loading { width: 100%; height...原创 2019-04-03 15:31:15 · 280 阅读 · 0 评论 -
每日小練習之JQuery選項卡（part2）
今天來一波簡單的選項卡功能編寫運用了以下方法：1：load()方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。2：each()方法规定为每个匹配元素规定运行的函数。3：removeClass() 方法从被选元素移除一个或多个类。addClass() 方法向被选元素添加一个或多个类。4：setTimeout()方法用于在指定的毫秒数后调用函数或计算表达...原创 2019-04-03 15:17:56 · 158 阅读 · 0 评论 -
每日小練習之九九乘法表、寫出1-50的3的倍數、判斷月份是30天還是31天（part1）
1:利用for寫出1-50的3的倍數 for (i = 1; i <= 50; i++) { if (i % 3 == 0) continue; document.write(i+'<br/>') }結果：2:使用循環語句判斷月份是30天還是31天//注意：利用switch var mo...原创 2019-04-02 16:17:39 · 244 阅读 · 0 评论