JavaScript、CSS、HTML
じоνё靁〃
じоνё靁〃
展开
-
CSS3 学习笔记——鼠标滑过按钮特效(一)
鼠标滑过按钮特效(一)<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-03-28 16:28:43 · 677 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二十)Canvas实现PC画板
Canvas实现PC画板<!DOCTYPE html><!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2019-02-26 22:55:22 · 834 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二十二)jQuery、css3 实现横向轮播图
横向轮播图<!DOCTYPE html><html><head> <title>横向轮播图</title> <style> * { margin: 0; padding: 0; } .wrapper { position: absolu...原创 2019-03-03 19:34:40 · 986 阅读 · 0 评论 -
JavaScript CSS 红心,落雪花,旋转方块,移动登录框。
JavaScript CSS 红心,落雪花,旋转方块,移动登录框。<style> /* 容器,旋转中心点 */ .container { /* width:50px; height:50px; border:1px solid yellow; */ left: 600px; top: 200px; /*设置为绝对定位...原创 2019-03-07 01:07:44 · 263 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二十四)JavaScript 制作木头人(仿小羊肖恩)
JavaScript 制作木头人素材图片<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&a原创 2019-03-15 17:16:36 · 597 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二十五)JavaScript 拖拽方框
拖拽方框<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...原创 2019-03-16 09:52:12 · 360 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二十六)JavaScript 打砖块
打砖块<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...原创 2019-03-16 14:40:27 · 453 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二十三)JavaScript 制作2048小游戏
JavaScript 制作2048小游戏<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2019-03-13 12:50:19 · 615 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二十七)JQuery、CSS3、TweenMax 音乐播放器
JQuery、CSS3、TweenMax 音乐播放器<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...原创 2019-03-24 03:48:39 · 557 阅读 · 0 评论 -
JavaScript 手动排列方块
JavaScript 手动排列方块<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2019-03-31 19:48:29 · 211 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二十八)JavaScript 别踩方块
JavaScript 别踩方块<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-03-27 15:42:27 · 435 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(三十一)JavaScript消灭小星星游戏
JavaScript消灭小星星游戏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...原创 2019-04-05 15:58:17 · 904 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(三十二)JavaScript旋转方块
JavaScript旋转方块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-04-07 00:08:55 · 3248 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二十九)JavaScript 骇客帝国
JavaScript 骇客帝国<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-03-28 22:28:07 · 471 阅读 · 2 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(三十)jQuery实现Tab垂直滑动
jQuery实现Tab垂直滑动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-04-02 22:08:59 · 551 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(三十三)jQuery CSS 四叶草菜单
jQuery CSS 四叶草菜单<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-04-08 21:33:06 · 638 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(三十四)jQuery Canvas生成验证码
jQuery Canvas生成验证码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2019-04-10 00:11:06 · 560 阅读 · 4 评论 -
chrome插件开发
引用: 【干货】Chrome插件(扩展)开发全攻略此篇文章详细介绍了chrome插件是如何开发出来的,具有很强的参考价值。还可参考百度浏览器的入门教程 入门:建立百度浏览器应用manifest.json配置文件只要能读懂配置文件,就能做出chrome插件。{ // 清单文件的版本,这个必须写,而且必须是2 "manifest_version": 2, // 插件的名称...原创 2019-02-20 08:59:48 · 369 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二十一)CSS3实现Loading
CSS3实现Loading<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2019-02-28 22:20:46 · 797 阅读 · 1 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(十三)Date对象
Date<h1>日期对象</h1><script type = "text/javascript"> //日期对象 是系统提供的已封装好对象,操作日期的函数。 var date = new Date(); console.log(date.getDate()); console.log(date.getDay()); console.log(d...原创 2019-02-12 16:28:34 · 824 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(七)对象和包装类
Js对象有三种内置对象:ECMAScript 规定的对象,如:Math String Number Boolean Function Object... 宿主对象:Js运行环境中的对象,如DOM文档对象,BOM浏览器对象。 自定义对象:使用Js代码定义的对象。自定义对象使用字面量定义对象<script type = "text/javascript"> var o...原创 2019-01-25 09:57:18 · 1628 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(一)前言
Mosaic浏览器 NCSA Mosaic,或简称Mosaic(马赛克),是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器,它是由伊利诺伊大学厄巴纳-香槟分校的NCSA组织在1993年所发表,并于1997年1月7日正式终止开发和支持。在当时人气爆发的大受欢迎。Mosaic的出现,算是点燃了后期互联网热潮的火种之一。 注:摘自百度百科浏览器组成1、界面(shell)...原创 2019-01-21 11:32:26 · 9319 阅读 · 4 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(二)变量类型,运算符
JavaScript引入方式内嵌 <script type = "text/javascript"> document.write('hello,javascript!');</script>两个<script></script>代码块错误,不会互相影响。<script type = "text/javascrip...原创 2019-01-21 14:33:06 · 1197 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(三)条件语句,循环语句
if 条件判断语句if(条件){ 如果条件为真时,执行的代码。} else { 如果条件为假时,执行的代码。} <script type = "text/javascript"> var input = parseInt(window.prompt("输入你的成绩")); document.write("输入的值是:" + input + "...原创 2019-01-21 21:37:36 · 1593 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(四)引用类型及数据类型转换
对象JavaScript中所有事物都看作对象。如 数字、字符串、数组、函数等。并允许自定义对象。对象只是带有属性和方法的特殊数值类型(是引用类型)<script type = "text/javascript"> //自定义对象 var obj ={ lastName : "张三", age : 40, se...原创 2019-01-23 12:13:42 · 1005 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(十)数组的常用方法
数组的常用方法(ES3)以ES3.0为基础,ES5.0 在ES3基础上扩展,ES6.0 在ES5基础上扩展。改变原数组的方法:push、pop、shift、unshift、sort、reverse、splice.<script type = "text/javascript"> var arr = []; //1、push 在数组的最后添加数据 arr.push(...原创 2019-02-11 21:09:52 · 1580 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(十四)Window对象
获取元素位置信息<!DOCTYPE html><html lang="en"><body><div style ="width:1000px;height:2000px"> <div style ="position:absolute; width:300px;height:300px;border:1px solid原创 2019-02-15 11:18:44 · 1607 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(五)函数及预编译
函数(方法)被调用时执行的可重复使用的代码块。函数定义<script type = "text/javascript"> //函数的定义方式,命名方式要遵循小驼峰形式。 function funcName(){ var a = 1; document.write(a); } document.write(funcName.name); var getFi...原创 2019-01-24 08:42:06 · 2364 阅读 · 2 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(十五)事件
事件是前端语言,互联网体验的核心功能。添加和移除事件处理<h1>window事件</h1><div style='width:100px;height:100px;position:absolute;left:100px;top:100px;background-color:red' onclick='alert("a")'></div&g...原创 2019-02-16 23:13:22 · 1761 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(八)对象、原型
原型原型是构造函数 Function的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象。利用原型的特点和概念,可以提取共有属性。对象的有个隐式的属性:__proto__ ,指向构造函数的原型 Function.prototype对象原型具有指向构造函数的属性:constructor。<script type...原创 2019-01-30 11:32:37 · 2265 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(九)对象的继承、命名空间、对象属性枚举
继承传统形式:原型链的模式。缺点:没用的属性和方法都继承下来。 借用构造函数:不能继承构造函数的原型。并且需要执行一次构造函数。 共享原型:一个构造函数的原型设置成想要继承的构造函数的原型。这样就实现了继承,但这不能随便改动自己的原型。 圣杯模式:完善共享原型模式,中间添加个对象。 <script type = "text/javascript"> //圣杯模式实现继承...原创 2019-02-01 14:32:54 · 880 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(十六)JS实现弹出层
直播弹出层简单示例<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> p{ font-size:20px; } #btnLo原创 2019-02-15 21:34:43 · 488 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(十七)jQuery、css3 实现3D轮播图
jQuery、css3 实现3D轮播图图片素材可在网上找<!DOCTYPE html><html><head> <style> *{ margin:0; padding:0; font-size:0; } .wrapper{ position:relative;...原创 2019-02-16 21:49:43 · 733 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(十八)JSON,异步加载JS
JSON前后端传送数据,原使用XML格式。现以对象形式传递即JSON。JSON是静态类。有方法stringify、parse,对象转为字符串和字符串转对象。浏览器渲染浏览器渲染页面时,生成domTree(一边解析,一边下载),采用深度优先原则。domTree解析完,等待cssTree生成,合并成 randerTree,开始绘制页面。domTree节点的删除、增加,宽、高、位...原创 2019-02-17 01:01:29 · 1393 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(十九)正则表达式
正则表达式转义符号 \ ;多行字符串 ;文本换行符 \n等<body></body><script> //多行字符串 document.body.innerHTML = "\ <h1>正则表达式</h1>\ <div>编辑器多行演示</div>\ "; //原创 2019-02-17 22:18:11 · 843 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(十一)try……catch……和 ES5的严格模式
try……catch……<script type = "text/javascript"> try{ //正在执行的代码,如果出错会终止执行,转到执行catch中的代码 console.log('a'); console.log(b); console.log('c'); }catch(e){ // e 代表捕捉到的错误对象Erro...原创 2019-02-11 23:00:20 · 1499 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(十二)DOM
DOMDOM是Document Object Model的缩写即文档对象模型。DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象,有浏览器厂商,用来操作html和xml功能的一类对象的集合。也有人称DOM是对html以及xml的标准编程接口。html超文本标记语言:有固定的标签格式,用来定义网页的内容。xml可扩展标记语言:可自定义标签格式,用来传送自定义数据使用。逐渐被...原创 2019-02-12 15:26:05 · 1504 阅读 · 0 评论 -
渡一教育公开课web前端开发JavaScript精英课学习笔记(六)函数及作用域
函数作用域函数有个隐藏的属性[[scope]],这个属性就是作用域,其存储了运行期上下文的集合。[[scope]]存储运行期上下文集合,这些集合呈链式关系,就是作用域链。[[scope]]属性结构第一个元素 >>> 当前运行函数的 ActivationObject第二个元素 >>> 当前运行函数父函数的 ActivationObject第...原创 2019-01-24 14:26:54 · 2430 阅读 · 0 评论