- 博客(29)
- 资源 (7)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 js实例《四》轮播
HTML：<div id="show"> <div id="box"> <div><img src="01.jpg" alt=""></div> <div><img src="02.jpg" alt=""></div> <div><img src="03.jpg" alt=""></div>
2021-06-22 18:19:43
155
原创 媒体查询移动端实训《一》 苏宁
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable = no, initial-scale=1.0,minimum-scale = 1.0,maximum-scale = 1.0"> <title>Document
2021-06-22 17:01:24
166
原创 ajax详解
什么是ajaxajax 全名 async javascript and XMLAJAX 不是新的编程语言，而是是综合HTTP异步通信、js、xml、以及JSON等多种网络技术的一种编程模式。AJAX优缺点优点页面局部刷新可以充分利用客服端的闲置的处理能力，减轻服务器和网络传输的负担缺点破坏浏览器的机制，历史记录机制<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
2021-06-15 12:36:25
155
1
原创 bootstrap实例《一》星巴克官网
html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入外部css样式文件 --> <link rel="stylesheet" href="bootstrap
2021-06-15 12:22:51
2365
2
原创 移动端适配
移动端适配方法1.百分比适配：根据父级算百分比，需配合其他布局实用2.viewport适配：把所有机型的css像素设置成一致的 1.viewport需要通过js动态设置 2.通过设置比例（初始比例以及缩放比例），把宽度设置成一致 公式： 缩放比 = css像素 / 目标像素3.rem适配 概念： em : 作为font-size的单位时，代表父元素的字体大小，作为其他属性单位时，代表自身的字体大小 rem : root:根
2021-06-07 18:55:53
218
原创 媒体查询移动端适配
* { margin: 0; padding: 0;}html { font-size: 60px;}@media screen and (min-width:0px) and (max-width:320px) { html { font-size: calc(320px / 15); }}@media screen and (min-width:321px) and (max-width:360px) { html {
2021-06-07 18:48:34
345
原创 js信息管理系统《二》分页与查询
这里我们接上篇增删查改做完以后，信息管理不可能只有增删查改，所以我们为这个增加一些功能分页的思路很简单，大家不要想复杂。我们只需要将我们想看到的显示出来，不想看到的隐藏掉就行了，即做一个区间，区间内的数据显示，区间外的隐藏，通过更改区间达到数据的切换，实现分页功能 function fy() { var num = 10; var all = Math.ceil(ul.length / num) var now = 1
2021-05-23 22:20:09
304
原创 js信息管理系统之数据增删查改
学习js中的一个小案例，做一个简易版的学生信息管理系统.一开始给的是一个对象数组的信息的js文件。增删查改都是通过对数据进行操作，之后渲染道页面上。但是我们操作却不能直接修改源文件，所以先创建一个数组，将源文件上的数据传入数组之后再对我们数组进行操作 var arr = []; var ul = document.getElementsByClassName('user') function datadate() { for (let
2021-05-23 22:06:19
994
原创 js案例之贪吃蛇
声明变量将游戏所需的变量申明 var map; //地图 var snake; //蛇 var food; //食物 var timer; //定时器 var initSpeed=200; //初始定时器时间间隔（毫秒）,间接代表蛇移动速度 var nowSpeed=initSpeed; //游戏进行时蛇移动速度 var grade=0; //积分 var flag=1; //（可间接看做）关卡地图开始构建游戏地图，创
2021-05-17 20:51:13
172
1
原创 canvas实训之飞机大战
<!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> div{ m
2021-05-17 20:26:48
146
原创 花里胡哨的canvas时钟
<!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> <canvas
2021-05-17 20:24:54
106
原创 canvas实例，随机创建随机图形
<!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> <canvas
2021-05-12 20:46:04
544
原创 h5新增表单属性及详介与拾色器纯js
H5新增属性HTML5 拥有多个新的属性。这些新特性提供了更好的输入控制和验证。从拾色器中选择一个颜色:选择一个颜色：<input type="color">从一个日期选择器选择一个日期。 <form> 选择一个日期:<input type="date"> </form>email类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值是否合法有效:tel定义输入电
2021-05-12 20:26:35
260
原创 闭包与垃圾回收机制
闭包闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。内存泄漏内部函数被拿到外部调用，造成原有的作用域链不会被释放，造成内存泄漏；闭包的特点让外部访问函数内部变量成为可能；局部变量会常驻在内存中；为什么要用闭包可以避免使用全局变量，防止全局变量污染；在多个代码进行整合时，不同人可能创建相同变量名在全局变量中，不注意就可能后面变量覆盖前面变量，这就是所谓代码污染。隐藏变量;例如游戏代码中，角色生命变量隐藏至函数中，外部代码只有对应函
2021-04-25 20:21:46
443
原创 作用域与作用域链详解
作用域作用域 ： 就是变量和函数的可访问范围。作用域有两种工作模式：词法作用域和动态作用域。js采用的词法作用域工作模型，词法作用域意味着作用域由书写代码时的变量和函数声明的位置决定的。全局作用域写在脚本块中的代码全局作用域中声明的变量，会被提前到代码块的顶部进行定义，成为全局对象window的属性最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的： <script> var a = 1; function fn(){
2021-04-25 19:38:29
277
原创 js预编译详解----分分钟了解预编译
在JavaScript中存在一种预编译的机制，这也是Java等一些语言中没有的特性，也就正是因为这个预编译的机制，导致了js中变量提升的一些问题函数声明整体提升变量声明提升众所周知，在js中undefined通常用于指示变量尚未赋值。对未定义值的引用返回特殊值 undefined。而我们也知道js属于解释型语言即解释一句执行一句。 <script> console.log(a) var a = 10; console.log(b
2021-04-21 20:26:51
1035
原创 城市三级联动
js大致样式var data = [ { "code" : "110000", "name" : "北京市", "children" : [{ "code" : "110100", "name" : "市辖区", "children" : [{ "code" : "110101", "name" : "东城区" }, { "code" : "110102", "name" : "西城区" }, {
2021-04-19 20:24:35
131
原创 js实例《三》随机背景颜色及js对象
对象JavaScript 对象是拥有属性和方法的数据真实生活中，一辆汽车是一个对象。对象有它的属性，如重量和颜色等，方法有启动停止等:所有汽车都有这些属性，但是每款车的属性都不尽相同。所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同对象就是一组无序相关属性和方法的集合JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…var 对象名 = { 属性名:属性值}属性名永远是字符串，多个属性与方法中间用逗号分隔，方法冒号后面跟一个匿名函数您可以通过为对象赋值，向已有对象添
2021-04-12 20:54:50
178
原创 js入门《三》
JavaScript 循环for - 循环代码块一定的次数while - 当指定的条件为 true 时循环指定的代码块do/while - 同样当指定的条件为 true 时循环指定的代码块循环得配合自增自减量进行使用，不然容易死循环while(判断条件){执行语句}do{执行语句}while(判断条件)for(声明自增量;判断条件;自增量自增){执行语句}一加到一百，三种循环的代码：<script> var i =1; var num = 0;
2021-04-12 19:52:56
58
原创 js入门《二》
算数运算符赋值运算符 “=”变量名 = 变量值 <script> var a = 1; console.log(a); </script>将数值1赋值给变量名为a的变量算术运算符 + 用于把值加起来。用于把文本值或字符串变量加起来（连接起来）。如需把两个或多个字符串变量连接起来，请使用 + 运算符。字符串类型的数字与数字类型相加时，字符串类型的数字会与数字类型相拼接;布尔类型会隐式转换转为字符串，true为1，false为0
2021-04-12 19:15:49
59
原创 js实例＜二＞比较大小并按顺序排列
<script> var arr =[776,999,12,32432,32,423,3432,324,786,786,768,6678,678,678,68,67,867,86,78,768,67,867,867,8,68,678,6,]; for(i=0;i<arr.length;i++){ for(j=0;j<arr.length;j++){ if(arr[j]>arr[j+1]){
2021-03-31 18:46:55
598
原创 js实例＜一＞九九乘法表
<script> for(i=1;i<=9;i++){ for(j=1,num=0;j<=i;j++){ num=i*j; document.write(j+"*"+i+"="+num+" "); } document.write("<br>"); } </script>
2021-03-31 18:41:43
71
原创 JS入门
JavaScript 是一种轻量级的编程语言，是一种运行在客户端上面的语言Script。JavaScript 是可插入 HTML 页面的编程代码，运行过程中由JS解释器（js引擎）逐行进行解释并执行。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript是单线程解释性语言js引入方式内部式外部式JS输出方式document.write("")在页面内打印console.log("")在页面控制台打印alert("")确定对话框confirm("
2021-03-25 19:24:19
104
1
原创 随背景边色的进度条 css3综合实训（二）
transitiontransition-property：监听过渡改变transition-duration：监听过渡所用时间transition-timing-function:运动状态transition-delay：延时 <style> div{ width: 100px; height: 100px; background-color: #f00; trans
2020-12-24 10:37:25
153
原创 CSS3综合实训
CSS3 <style> div{ width: 100px; height: 100px; border-radius: 3px 3px; border: 1px solid #000; } </style>当border-radius=width的二分之一或50%时 div{ width:
2020-12-21 19:02:09
215
1
原创 CSS布局及实例仿LOL主页
浮动概述如果将元素设置为浮动之后那么它将具备以下几个特点： 1.浮动元素会被排除在文档流之外，（脱离文档流）元素是不占有之前的页面空间，其他元素会上前补位 2.浮动元素会停靠在父元素的左边或右边，或者停留在其他已经浮动的元素的边上 3.浮动元素只会在当前行内浮动。 4.浮动元素拥有浮动功能之后依然还存在于父级元素中，只是飘起来了。 5.浮动处理----让多个块元素合成一排。浮动前：浮动后清除浮动清除浮动并不是说把某一
2020-12-16 18:08:03
619
1
原创 HTML+CSS综合实训（二） 仿制视频网
HTML+CSS综合实训（二）目标效果图：仿制思路1网页由一个大得div包裹，中间包括三个小div <div class="box"> <div class="top"></div> <div class="mid"></div> <div class="bottom"></div> </div>2top由两张图片及一个列表俩input
2020-12-14 14:53:44
412
原创 css+html综合实训（一）
CSS基础选择器标签选择器直接使用标签名ID选择器在标签内设置id名，使用#id名类名选择器在标签内设置class名，使用.class名通配符选择器*{}使用复杂选择器群组选择器 使用 ， 进行分隔后代选择器 使用 空格 进行分隔子代选择器 使用> 进行分隔属性选择器 使用[属性名="属性值"] 属性值时可以不写伪类选择器 hover 当鼠标指向时产生的样式 link 超链接未访问时的状态
2020-12-11 14:58:10
1027
原创 HTML基础(一)
HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。lang=“en” 注释：language en=englishcharset是编码字符集（1）utf-8最常用( 2 ) gbk国家标本扩展版本（包含亚裔版本，和繁体字符集）（3）unicode万国码HTML title元素title标签定义了不同文档的标题。title在 HTML/XHTML 文档中是必须的。效果图：段落标签，p标签效果图：
2020-12-07 16:40:28
90
HTML+CSS综合实训（二） 仿制视频网
2020-12-16
css+html综合实训（一）仿电影网
2020-12-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人