- 博客(35)
- 收藏
- 关注
RSS订阅原创 英语白痴福利1
English words in HTML加粗：强调程度单词音译意译代码中chinese穿里子汉化，中国的vs插件名，汉化包keywordk我的关键字meta标签中，搜索关键字beautify标题Fi美化vs插件名，格式对齐meta妹它元标签常用name值，keyword、descriptioncontent康疼特内容meta中属性值ruby入比红宝石注音 《ruby》字《rt》zi《/rt》《/ruby》t
2021-08-30 12:53:03
166
原创 随机产生多个指定字符
随机验证码：let codeArr = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u',
2020-10-28 13:17:00
298
原创 百度地图api使用
百度地图API的基本用法一、获取一个百度地图api的密钥申请步骤1、搜索百度地图2、进入后，先登录然后点击申请密钥3、 申请成功后，拥有密钥4、引入百度API 5、绘制一个地图展示，点击地图示例——>地图展示——>复制源代码编辑器里的代码——>将它粘贴到你的编辑器中6、修改复制的代码的参数BMap.Map方法创建地图时候需要一个容器(地图会根据容器的大小自动进行调整。)，填写相关容器的id。map.centerAndZoom方法创建地图，第一个参数可以是根据之前
2020-10-28 13:04:29
358
原创 弹性布局
display : flex 给一个盒子设置弹性布局，设置以后，会有许多弹性布局设置的默认值就会添加进来，具体表现为，内部的盒子会并排放置主轴方向：默认为X轴，可以修改副轴方向：默认为Y轴属性名justify-content: 设置主轴排列方式属性值center : 在主轴方向居中显示flex-start : 在主轴起点方向排列 默认值flex-end : 再主轴终点方向排列space-around : 元素和元素之间有间隙 两端也有 而且 元素间的间隙是两端的两倍space-be
2020-10-21 13:33:57
101
原创 旋转盒子
<style> .box { width: 300px; height: 200px; border: 1px solid rebeccapurple; margin: 400px auto; } ul { list-style: none; margin: 0px;
2020-10-21 13:17:00
267
原创 常用属性
1、color2、background-color3、font-size4、font-weigth5、font-family6、font-style7、text-decortation underline8、text-indent9、line-height10、text-align11、letter-spacing12、width13、min-width14、max-width15、height16、min-height17、max-height18、box-shadow
2020-10-10 00:30:35
111
原创 记忆点
语义化：1、每一个HTML元素都有具体的含义2、所有元素与展示效果无关3、语义化方便搜索引擎优化4、为了让浏览器理解页面内容与样式分离的好处：1、外部样式可以解决多个页面样式重复问题2、有利于浏览器缓存，从而提高页面响应速度3、有利于代码分离，从而更容易阅读和维护常用伪类：hover 鼠标悬停：link 超链接为访问时的状态：visited 访问后的状态：active 激活，鼠标按下的状态：focus 获取焦点：nth-last-of-type（）倒数第参数个元素：nth-
2020-10-09 23:51:04
896
1
原创 line偏移属性
<style> #svgty { background-color: tan; } #svgty:hover #line { stroke-dashoffset: 0; } #svgty:hover #line2 { stroke-dashoffset: 0; }
2020-10-09 21:03:22
227
原创 white-space属性
white-space CSS属性，设置文字的的空白处理方式测试文字： <div class="text"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex, similique! Culpa tenetur porro est mollitia fugiat veniam vero provident iste! Lorem ipsum dolor sit amet, consecte
2020-10-08 14:00:16
419
原创 canvas时钟
已知半径c，和x的角度求点的坐标，求点的坐标相当于求b跟a的值，b=sinx.c a=cosx.c,所有圆上任意点的坐标为（sinx.c,cosx.c）var canvas = document.getElementsByTagName('canvas')[0];var ctx = canvas.getContext('2d');// 时钟圆心坐标var x = canvas.width / 2;var y = canvas.height / 2;var r = 150; fu.
2020-09-27 21:17:10
136
原创 产生指定范围的随机整数或字母
//数字//产生50到100之间的整数Math.floor(Math.random() * 51)+50;//产生80到100之间的整数Math.floor(Math.random() * 21)+80;第一个示例： 产生【0，51）之间的数字，向下取整得到【0,50】，然后加上50，相当于区间为【50,100】第二个示例：产生【0，21）之间的数字，向下取整得到【0,20】，然后加上80，相当于区间为【80,100】//大写字母String.fromCharCode(Math.floor
2020-09-27 20:49:09
254
原创 2020-09-20
var x = 1,y = 2;function show(){ var x = 3; return { x: x, fun: function(a,b){ x = a + b; } }}var obj = show();obj.fun(x, y);console.log(obj.x);console.log(x);输出结果：3 1解析：题目定义了两个变量和一个函数，函数中定义了一个局部变量x=
2020-09-20 23:25:46
86
原创 2020-09-20
for (var i = 0; i < 3; i++) { setTimeout(function(){ console.log(i) }, 1);}console.log(i++);for (var i = 0; i < 3; i++) { (function(i){ setTimeout(function() {console.log(i)}, 1); })(i); }输出结果：3 3 3 3 012解析：题目的中有两个循环和3个
2020-09-20 23:04:25
114
原创 弹跳球方法
function yigeqiu(div) { var x = Math.random() * (window.innerWidth - 100), //div坐上的横坐标 y = Math.random() * (window.innerHeight - 100), //纵坐标 xDis = 2, //每次移动的距离x yDis = 2, //y dura
2020-09-14 00:29:37
416
1
原创 获取视口
.div1 { width: 200px; height: 200px; margin: 30px 30px; background-color: aqua; border: 1px solid red; padding: 2px; position: relative; } .div2 {
2020-09-14 00:07:40
170
原创 2048移动方法
leftMove() { // 保存左移之前的数据 var beforeChangeTS = this.data.toString(); // console.log(that, this.data); // 后面有值的下标 var behindIndex = -1; // 循环遍历行列 for (var r = 0; r < this.RN; r++) { for
2020-09-06 22:35:37
948
原创 绑定按键功能
// 给键盘上下左右绑定移动事件 document.onkeydown = function(k) { // console.log(k.keyCode); switch (k.keyCode) { case 37: // console.log('1'); game.leftMove(); b
2020-09-06 21:53:15
598
原创 文档片段对象的使用及优点
var frag = document.createDocumentFragment();创建文档片段对象；我们可以通过document.create…这种形式的方法创建出很多Element对象。document.createElement(“标签名”); 创建元素节点document.createTextNode(‘文本内容’);创建文本节点document.createComment(‘这是注释信息’);创建注释信息document.createDocumentFragment(); 创建
2020-08-30 22:59:45
393
原创 12306验证思路
var youhuming = document.querySelectorAll('.zhonginput input')[0];console.log(youhuming.value);// 获取单击事件onfocusyouhuming.onfocus = function() { this.parentElement.parentElement.nextElementSibling.classList.add('yingchang'); this.parentElement.ne
2020-08-30 22:34:05
171
原创 深度克隆递归
function deepClone(origin,target){var target=target || {}; //防止target为空 var toString=Object.prototype.toString, arrClass='[object Array]', objectClass='[object Object]'; for(var prop in origin){ // 判断是否为基本数据类型 // 判断传入的对象属性的属性值是
2020-08-23 23:17:35
182
原创 原型的特殊点
// 创建一个学生对象function Student(name, age) { this.name = name; this.age = age;}console.log(Student); //方法体console.log(Student.__proto__); //ƒ () { [native code] } console.log(Function.prototype); //ƒ () { [native code] } prototype原型，本质是一个对象//Stu
2020-08-23 22:21:59
101
原创 2020-08-16
// 封装一个函数，根据密码的内容返回密码的强度 // 密码长度必须是6-12位 // 出现小写字母、大写字母、数字、特殊字符(!@#-,.) 返回 强 // 出现小写字母、大写字母、数字 返回 中 // 出现小写字母、大写字母 返回 若 // 其他 返回 不符合要求 function getQD(pwd) { var regQ = /^(?=.*[a-z]...
2020-08-16 22:23:37
69
原创 正则相关
// 匹配字符串var s = 'hello \nhai';// 正则对象var reg = /^h/gm; //匹配每一行，开头为h的 ‘h’关键字console.log(s.match(reg));// 输入六位数的数字密码reg = /^\d{6}$/; //匹配开头和结尾加起来 为6位数字的字符串while (!reg.test(prompt('请输入密码：'))) { //如果匹配不成功，重新输入，匹配不成功返回false，需要进入循环 取反 alert("密码不正确，请重新
2020-08-16 22:07:58
56
原创 数组方法中的小细节
// ()()立即执行函数(function(){// 凡是通过Array构造器创建的对象，都是数组console.log(new Array(1,2,3,4,5)); //Array是一个构造函数，用于构造数组// 构造函数的静态成员 通过Array.直接调用的属性或者方法// Array.from();将一个类数组转化成真数组function testFrom(){console.log(arguments); //Arguments组成的[1,2,3,4,5…其他内容] 这是一个Obj
2020-08-09 22:57:43
56
原创 查找数组中的每位数的个数
var arrCF = []; for (var i = 0; i < 20; i++) { arrCF.push(parseInt(Math.round(Math.random() * 10))); } console.log(arrCF); var arrFL = {}; for (var i = 0; i < arrCF.length; i++) {...
2020-08-09 22:52:54
238
原创 数组中方法的不同
var stu = new Array('张三', '李四', '王五'); var stu2 = [1, '2', true]; console.log(stu); console.log(stu2); console.log(stu[9]); console.log("stu[9]的值（越界）：" + stu); console.log([1, 2, 3]); var shu1...
2020-08-03 08:31:26
127
原创 for in的使用
var arrCF = []; for (var i = 0; i < 20; i++) { arrCF.push(parseInt(Math.round(Math.random() * 10))); } console.log(arrCF); var arrFL = {}; for (var i = 0; i < arrCF.length; i++) {...
2020-08-03 08:21:21
265
原创 js十进制转二进制
实现十进制转换为二进制function zhuan(a) { var L01=[]; for(var i=0;a!=0;i++){ L01.unshift(a%2); a= parseInt(a/2); } return L01; } console.log( zhuan(286));在数学运算中
2020-07-26 21:50:53
394
原创 冒泡排序解析
如果一个数组保存元素是有序的（从大到小），向这个数组中插入一个数，使得插入后的数组元素仍然保持有序var arrPX = [1, 2, 3, 5, 8, 6] // 冒泡排序 for (var i = 0; i < (arrPX.length - 1); i++) { for (var j = 0; j < arrPX.length - 1 - i; j++) { if (arrPX[j] < arrPX[j + 1]) { var TD =
2020-07-26 21:50:36
230
原创 单选按钮样式替换
单选按钮的样式更改//测试 写在body中 <label class="sex"> <input type="radio" name="sex"> <span class="jia"></span> <span>男</span> </label> <label class="sex">
2020-07-20 00:48:46
488
原创 判断是否为水仙花数
判断一个数是否是水仙花数：提示：接受用输入prompt('请输入一个数：');水仙花数是指一个 n 位数 ( n≥3 )，它的每个位上的数字的 n 次幂之和等于它本身。（例如：111 + 555 + 333 = 153 //获取数字 (整数) var inputnum = prompt('请输入一个整数'); // 获取它是多少位 console.log(inputnum.length); var leng = input
2020-07-20 00:47:20
1264
原创 css样式表、选择器、字体属性、尺寸属性、边框阴影
html3css概念字体样式汇总CSS的使用内联样式内部样式表外部样式表CSS样式表的特征CSS基础选择器css概念以统一的方式实现样式的定义提高页面样式的可重用性和可维护性实现了内容（HTML）和表示（CSS）的分离HTML和CSS之间有什么关系？HTML：构建网页的结构CSS ：构建HTML元素的样式字体样式汇总属性解释color字体颜色...
2020-07-05 13:20:45
125
原创 列表、表单、浮动框架、摘要与细节、度量标签
列表<ol><li><l/i></ol>有序列表<ul><li></li></ul>无序列表属性：type<dl><dt><dd></dd></dt></dl>自定义列表表单<font></font&...
2020-07-05 13:20:08
89
原创 边框、轮廓、元素分类、盒子模型
HTML4边框属性轮廓元素的分类盒子模型边框属性作用：给元素加上一个边框第一种：border-topborder-bottomborder-leftboder-right三个属性 粗细 线型 颜色第二种：border ：粗细 线型 颜色透明色：transparent轮廓作用：绘制于元素周围的一条线，位于边框外属性： 粗细 线型 颜色outline-wid...
2020-06-29 16:27:51
124
原创 HTML简介、文字处理标签、超链接、转义字符、锚点、跑马灯、图片、表格
HTML简介HyperText Markup language 超文本标记语言HTML网页设计语言，以.html和.htm结尾的（后缀）由浏览器运行。文本标记 <b></b>加粗 <i></i>倾斜 <u></u>下划线 <s></s> 删除线 ...
2020-06-29 16:25:31
166
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人