01前端基础教程html_css_js
关注
分享
扫一扫
python基础教程
走过这么多岁月，才发现自己懂的那么少，所以利用所有可以利用的时间给自己充电，希望通过自己的双手创造美好的明天。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
高级前端课程列表
原创 2019-08-22 17:54:36 · 670 阅读 · 0 评论 -
tx6总结
JS第十三天 网页特效6 1.闭包 在程序语言中，所谓闭包，是指语法域位于某个特定的区域，具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留他们在闭包最初定义(或创建)时的值。 白话：我们可以用一个函数去访问另外一个函数的内部变量的方式就是闭包。 闭包优点：不产生全局变量，实现属性私有化 闭包缺点：闭包中的数据会常驻内存原创 2016-11-01 13:25:53 · 367 阅读 · 0 评论 -
tx6-面向对象版的下拉菜单
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; }原创 2016-11-01 11:17:56 · 486 阅读 · 0 评论 -
tx6-prototype原型
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> Array.prototype.run = function () { alert("酸辣土豆丝"); } v原创 2016-11-01 11:17:11 · 234 阅读 · 0 评论 -
tx6-new关键字来声明对象
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> function Person(name,age){ //构造函数就是一个普通函数，为了和普通函数区别，第一个字母大写。 th原创 2016-11-01 11:16:09 · 358 阅读 · 0 评论 -
tx6-封装对象
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> // var obj = new Object();// var obj = {};// obj.name = "名字";/原创 2016-11-01 11:15:41 · 324 阅读 · 0 评论 -
tx6-多个tab栏切换闭包版
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ list-style原创 2016-11-01 11:15:05 · 802 阅读 · 0 评论 -
tx6-屏幕缩放事件-闭包版函数节流
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <div id="demo"></div></body></html><script> var num =0; var demo = document.getEleme原创 2016-11-01 11:14:27 · 462 阅读 · 0 评论 -
tx6-闭包面试题
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> function outFun(){ var a = 0; function inFun(){原创 2016-11-01 11:13:49 · 238 阅读 · 0 评论 -
tx4-封装运动框架基本函数(多个属性)
还没加定时器的<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ w原创 2016-10-20 15:27:37 · 364 阅读 · 0 评论 -
tx4-封装运动框架基本函数(单个属性)
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width: 1原创 2016-10-20 14:19:58 · 401 阅读 · 0 评论 -
封装返回当前样式的函数
得到css样式 obj.style获取的是行内样式，即style属性中的值。 obj.currentStyle外部（使用）和内嵌(使用<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #demo{ width:原创 2016-10-20 13:51:38 · 588 阅读 · 0 评论 -
轮播图效果
比较复杂，好好看。。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none;原创 2016-10-19 23:12:07 · 637 阅读 · 0 评论 -
封装缓动动画函数
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width: 1原创 2016-10-20 11:28:30 · 386 阅读 · 0 评论 -
缓动动画原理
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; left: 0; } #box{ width: 100p原创 2016-10-20 11:07:56 · 419 阅读 · 0 评论 -
tx5总结
** JS第七天： 1.根据字符返回位置 返回前面起第一个字符的位置indexOf() 返回后面起第一个字符的位置lastIndexOf() 根据位置返回字符 charAt() 2.网址编码 encodeURIComponent(myweb); decodeURIComponent(myweb); 3.字符串操作 slice(起始位置，[结束位置]) 取到结束位置 substr原创 2016-10-28 17:04:56 · 409 阅读 · 0 评论 -
根据动画原理，初步封装运动函数 2
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #box{ width: 100px; height: 100px; background-color: pink;原创 2016-10-19 17:03:15 · 294 阅读 · 0 评论 -
根据动画原理，初步封装 运动函数
注意obj.timer =setInterval()这个用法。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #run{ width: 100px; height: 100px;原创 2016-10-19 16:09:24 · 342 阅读 · 0 评论 -
tx6-面向原型的对象
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> function Person(name,age){ //构造函数 this.name = name; thi原创 2016-11-01 11:17:34 · 304 阅读 · 0 评论 -
变量提升
<script> var c = 1; function add(){ var a = 0; console.log(a);//0 console.log(c);//undefined var c = 1; } add(); //相当于 function add(){ va原创 2016-12-11 10:22:02 · 262 阅读 · 0 评论 -
变量和函数声明提升
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> //变量声明提升 function test() { var a = "1"; var f = fun原创 2016-12-12 15:23:37 · 444 阅读 · 0 评论 -
汪磊老师整理的前端进阶课程目录
前端工程化、Vue/React 框架进阶、Node.js、Gatsby、TypeScript、Flutter、Electron，课程为全新设计的系列进阶课原创 2019-08-02 13:53:14 · 2508 阅读 · 0 评论 -
Flex弹性盒模型
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。<style> div{ display: flex; } </style> <div> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> </div>...原创 2019-08-02 16:55:47 · 172 阅读 · 0 评论 -
flex可以使其内部的元素弹性布局
仿天猫头部 使用diplay:flex可以使其内部的元素弹性布局<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scal原创 2017-05-20 15:53:03 · 664 阅读 · 0 评论 -
移动web
移动web2.移动web的基础知识2.1 pixel 移动开发像素基础iphone5 分辨率640*1136px:css pixels 逻辑像素，浏览器使用的抽象单位dp,pt:device independent pixels 设备无关像素dpr:devicePixelRatio 设备像素缩放比计算公式：1px = dpr*dpr*dp平面上：1px = 2*2*dp纬度上：1px =原创 2017-04-06 17:05:16 · 503 阅读 · 0 评论 -
一个javascript面试题
<script> (function(){ var a = b = 5; })(); console.log(b);</script>这样输出结果是5,吃惊不？ 为什么呢？因为，a是个局部变量，但是b却是个全局变量，如果使用严格模式( use strict )的话就会提示b is not defined 了。原创 2017-03-02 13:38:32 · 313 阅读 · 0 评论 -
javascript代码运行分两个阶段：预解析，执行
1，预解析：把所有的函数定义提前，所有的变量声明提前，变量的赋值不提前 2，执行 ：从上到下执行，但有例外(setTimeout,setInterval,ajax中的回调函数，事件中的函数需要触发执行)原创 2016-11-24 15:57:14 · 1187 阅读 · 0 评论 -
面试题目详解
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> function addSpace(str){ return str.split('').join(' '); };原创 2016-12-12 15:43:47 · 335 阅读 · 0 评论 -
时间日期函数
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script>/***************************************************************************原创 2016-12-12 15:40:30 · 357 阅读 · 0 评论 -
数组的方法
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> //数组容器中包含的属性 //var arr1 = [1,2,3,4,5]; //arr1.length; /*******原创 2016-12-12 15:38:48 · 231 阅读 · 0 评论 -
字符串对象属性和方法
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> //字符串的属性 - length var myString="JavaScript"; myString.length;/*原创 2016-12-12 15:37:50 · 2179 阅读 · 0 评论 -
document工具包
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div>我是好人</div><a href="http://www.sina.com">新浪</a></body></html><script> document.title =原创 2016-12-12 15:34:23 · 922 阅读 · 0 评论 -
五大数据类型
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> document.write("<h1 style='color:red'>五大数据类型</h1>"); //数值型 var n原创 2016-12-12 15:31:37 · 768 阅读 · 0 评论 -
逗号表达式
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> var x= 0,y= 0,z=0; var result = (x=8*2,x*4) /*整个表达式的值为64，x的值为16*/原创 2016-12-12 15:30:06 · 325 阅读 · 0 评论 -
相等==和全等===
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> //自动类型转换 if(1=='1'){ alert('==一样') //一样 } //比较的时候不会原创 2016-12-12 15:27:07 · 658 阅读 · 0 评论 -
js运算符
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script>// 算术运算符 +（加） ——（减） *（乘） /（除） %(取余数)// 复合赋值运算符 -= += *= /= %=//原创 2016-12-12 15:26:07 · 324 阅读 · 0 评论 -
变量声明提升笔试题
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> var v = "hello"; function test (){ console.log(v); v原创 2016-12-12 15:24:51 · 578 阅读 · 0 评论 -
函数的执行环境和作用域
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></html><script> //代码执行：先生成一个执行环境，再执行 //全局作用域（全局变量）： //1，最外层函数和在最外层函数外面定义的变量拥有全局作原创 2016-12-12 15:24:09 · 545 阅读 · 0 评论 -
动画基本原理
动画原理，盒子的offsetleft+步长<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; bac原创 2016-10-19 16:00:55 · 924 阅读 · 0 评论 -
选中文字弹出对话框
选择文字：选中的时候不弹出来，弹起鼠标的时候出现。用onmouseup ，盒子坐标 是鼠标坐标。 获得用户选择的内容： 标准浏览器：window.getSelecttion().toString(); ie:document.selection.createRange().text; 兼容性写法： if(window.getSelection){ txt = window.getSele原创 2016-10-19 14:41:16 · 1559 阅读 · 0 评论