- 博客(21)
- 收藏
- 关注
RSS订阅原创 移动端适配
rem 布局em 是CSS3新增的一个相对单位，它以 HTML 元素的 font-size 为比例：/* 设置html元素的字体大小为 16px，即 1rem = 16px */html { font-size: 16px;}/* 设置box元素宽 160px，10rem = 160px */.box { width: 10rem; /* 160px */}’修改HTML元素的字体大小可以成比例的调整以 rem 为单位的属性，通过这一个特性，我们可以实现将视窗按一定比例划
2021-06-08 13:01:12
174
原创 jQuery入门
1. 获取元素jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。1.1 选择器使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。选择表达式可以是：CSS选择器$(document) // 选择整个文档对象$('#myId') // 选择ID为myId的网页元素$('div.myClass') // 选择class为myClass的div元素
2021-06-08 12:44:42
118
原创 带你玩转2048小游戏
首先他的HTML和CSS<!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> .scor
2021-05-25 10:45:33
266
3
原创 小飞机 呼呼呼
用画布写飞机大战<!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-UA-Compatible" content="ie=edge"> <title>
2021-05-24 20:28:34
92
原创 用画布玩一个哆啦A梦
用画布写一个哆啦A梦首先要画一个脑袋// 1.大脑袋 context.beginPath(); context.arc(300, 300, 250, 0, Math.PI * 2); context.lineWidth = "5"; context.stroke(); context.fillStyle = "rgb(34,118,207)"; context.fill();然后画一个脸带子 context.beginPath(); con
2021-05-17 21:03:39
81
原创 教你如何在画布上生成随机小球并运动
首先肯定要创建一个画布的<canvas id="game" width="500" height="500" style="background-color: black;"></canvas>然后我们创建小球function ball() { this.r = this.rand(20); this.x = this.r; this.y = this.r; this.speedX = this.rand(10); this.speed
2021-05-17 20:07:47
502
原创 JS写学生管理系统
JS写学生管理系统1.系统分析目前学生管理系统需要增删改功能，于是我用add还有delete这些表示add：添加功能，我在表里面添加ul然后导入进div里面delete：删除功能，点击删除然后删除父级的ul就行了revise：修改功能，点击修改就跳出一个修改框，相当于接收你输入值然后修改他的innerHTML代码块css代码 *{ margin: 0; padding: 0;}.left{ float: left; border: 1px solid;
2021-05-17 09:22:08
2594
1
原创 canvas绘制炫酷时钟
canvas绘制时钟刻度表基本知识点canvas.drawText：绘制文字，注意基线的位置为文字的左下角y轴所在的线canvas.drawLine:绘制线段，指定起始位置就好canvas.save:保存canvas的状态，比如translate平移之前或者rotate(单位为°，正为顺时针)旋转之前的状态canvas.restore:恢复到保存时候的canvas状态，这么理解：translate平移了坐标，从初始位置屏幕左上角（0,0）到屏幕中间(mWidth/2,mHeight/2)，这时候如
2021-05-17 08:53:46
107
原创 for循环写长方形，直角三角形，等腰三角形
长方形 for(var j = 0;j<5;j++){ document.write("*") }那么怎么输出多行这五个星号呢。这时候可以再套一个for循环矩形 for (var i=0;i<5;i++){ for(var j = 0;j<5;j++){ document.write("* ") }document.write("<br/>")
2021-05-12 09:18:36
170
原创 全局与函数的预编译
预编译首先是全局预编译 三步第1步. 创建一个GO对象 Global Object第2步. 将var关键字声明的变量当作GO对象的属性，赋值为undefined,有重名的直接覆盖第3步. 将function关键字声明函数 当作GO对象的属性，值为函数体，重名直接覆盖。 console.log(i); var i = 30; console.log(i); function i() { } var i = function () { }
2021-05-10 16:02:48
99
原创 2021-05-10
JS同步加载以及异步加载的三种方式同步加载就是一种我们最常用的一种方式。这种加载方式带来的一种影响就是会导致页面阻塞。因为js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以建议是把script标签写在body的后面。尽量避免这种阻塞带来的影响。异步加载1.defer的用法-以前适用于IE，写在可以在主流浏览器上使用。 <script src="test.js" defer></script>defer可以直接在script标签上使用。他的
2021-05-10 08:35:34
47
原创 全局与函数的预编译
预编译首先是全局预编译 三步第1步. 创建一个GO对象 Global Object第2步. 将var关键字声明的变量当作GO对象的属性，赋值为undefined,有重名的直接覆盖第3步. 将function关键字声明函数 当作GO对象的属性，值为函数体，重名直接覆盖 console.log(i); var i = 30; console.log(i); function i() { } var i = function () { }
2021-04-27 18:41:57
85
原创 用CSS3设计照片墙
这个墙可以环绕起来 并转动首先清楚一下思路第一步：可以将这八张照片叠起来第二步：用CSS3设置3d空间第三步：分别将这八张图片在3d空间里沿着父级的Y轴分别旋转45，90,135度…（因为360度里分八份）。第四步：做到这一步会发现，这八张图虽然已经转开，但是还没有彼此产生间距，这个时候用transform属性的translateZ属性将每个图里父级的距离移开，就会形成这个照片墙。第五步：给父级设置关键帧动画，就可以将整个照片墙旋转起来。就下来进行代码展示： <div> .
2021-04-27 18:39:08
594
原创 JS中this的指向问题
this是什么1.this实际是在函数被调用时才发生的绑定，也就是说this具体指向什么，取决于你是怎么调用的函数。this的四种基本用法1.在一般函数方法中使用 this 指代全局对象2.作为对象方法调用，this 指代上级对象3.作为构造函数调用，this 指代new 出的对象4.apply 调用 ，apply方法作用是改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象，this指代第一个参数第一种是默认绑定的方式，因为函数直接调用。没有应用其他的绑定规则，这里进行了默认绑定
2021-04-27 18:33:11
60
原创 DOM获取元素对象
一、为什么要获取页面元素？例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作。二、获取元素的5种方式：1.根据id获取元素document.getElementById(“id属性的值”)var div = document.getElementById("main");console.log(div);// 获取到的数据类型 HTMLDivElement，对象都是有类型的// HTMLDivElement <-- HTMLElemen
2021-04-12 20:26:38
180
原创 正则表达式
JavaScript正则表达式功能：搜索、替换、判断JavaScript正则表达式格式：/正则表达式主体/修饰符JavaScript正则表达式主体内容：JavaScript正则表达式中修饰符的使用：修饰符：修饰符 描述i 执行对大小写不敏感的匹配。g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。m 执行多行匹配。JavaScript正则表达式中方括号的使用：将一些规则连在一起匹配一个字符方括号：表达式 描述[abc] 查找方括号之间的任何字符。[^abc] 查找任
2021-04-12 18:38:57
57
原创 使用两种while方式做1-100的奇数和
第一种方法就是利用奇数的特点 隔了一个数就是一个奇数，所以就可以设置i自加2达到这样的效果，然后设置一个sum让他自身加出来实例代码如下<script> var i = 1; sum= 0; while(i<=100){ sum = sum + i; i += 2; } document.write(a);``</script>运行
2021-03-29 12:54:39
4396
原创 CSS3快速入门：三种CSS导入方式
三种CSS导入方式按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为以下三大类：行内样式表（行内式）内部样式表（嵌入式）外部样式表（链接式）三者之间的优先级：内联样式>内部样式>外部样式1.外部样式表外部样式表包括链接式和@import导入式两种，之间的优先级遵循就近原则，其特点如下：css保存在.css文件中在HTML中使用标签或@import导入链接式的特点：属于XHTML，无兼容问题优先加载CSS文件到页面导入式@import的特点：属于CSS2
2021-03-29 12:36:56
283
原创 教你如何做一个三角形
在电脑上打开网页编辑器，新建一个HTML页面，如图：制作一个宽、高为0，边框为100px的正方形，如图：然后给这个正方形的各个边框设置边框色，把其中一个边框色设置为blue，其他的设置为透明的，即：border-color:blue transparenttransparent transparent;代码如图：用浏览器打开该页面，查看css绘制的三角形效果；点击页面单击鼠标右键，选择【查看元素】，打开浏览器的代码控制台，可查看当前网页源码，或代码调试。由于ie6不支持transpare
2021-03-22 08:38:14
3035
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人