JS原生第五篇 (帅哥)
1.1 节点
1. 节点 网页是有很多的节点组成的 。
元素节点 指的是 : 标签 li span
文本节点 属性节点
父子兄弟 父 parentNode nextSibling
孩子 childNodes nodeType == 1 来判断 是否是 元素节点
<ul>
<li>
最喜欢用的 children 只得到 元素节点
1.获取节点属性 getAttribute(“title”)
2.设置节点属性 setAttribute (“class”,”one”)
3.删除节点属性 removeAttribute(“title”);
4. 日期函数 Date();
声明: var date = new Date();
使用: 得到现在的年分 date.getFullYear();
月份: date.getMonth();
日子; date.getDate();
星期: date.getDay();
5. 定时器
定时器 不需要人工操作 按照一定的时间进行某种动作。
setInterval(“函数”,间隔时间 ) 每隔 n秒去执行一次函数
1.2 时钟案例
分两步进行的。
第一步: 要得到现在的 时 分 秒
但是这里面有一个小玄机 。
比如现在是 9点整 时针指向 9 是没错的
但是如果现在是 9点半 时针应该指向的是 9到10 之间 才对
所以,我们不但要得到现在的小时 ,还要得到 已经过去了多少分
ms = date.getMilliseconds(); // 现在的毫秒数
s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s
m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟
h = date.getHours() % 12 + m / 60 ;
旋转角度原理
秒针 一秒 走多少度呢 ?
一圈 360 ° 一共有 60 秒 每秒 6 °
分针 一圈 360 一圈走 60次 每次 6° 每分钟 6°
时针 一圈 360 一共 12 个 表盘没有24小时 每个小时 走 30°
完整代码:
1 <script>
2 var hour = document.getElementById("hour");
3 var minute = document.getElementById("minute");
4 var second = document.getElementById("second");
5 // 开始定时器
6 var s = 0,m = 0, h = 0, ms = 0;
7 setInterval(function() {
8 // 内容就可以了
9 var date = new Date(); // 得到最新的时间
10 ms = date.getMilliseconds(); // 现在的毫秒数
11 s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s
12 m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟
13 h = date.getHours() % 12 + m / 60 ;
14 // console.log(h);
15 // 旋转角度
16 // 一圈 360 ° 一共有 60 秒 每秒 6 ° 现在是 s秒
17 second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
18 // 变化 旋转 deg 度
19 minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
20 hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
21 second.style.MozTransform = "rotate("+ s*6 +"deg)";
22 // 变化 旋转 deg 度
23 minute.style.MozTransform = "rotate("+ m*6 +"deg)";
24 hour.style.MozTransform = "rotate("+ h*30 +"deg)";
25
26 },30);
27 </script>
1.3 按钮不可用
button 不可以用 disabled 不可用的意思
btn.disabled = “disabled” || btn.disabled = true;
灰色的
注意:
- 因为 button是个双标签 所以要更改他的值, 使用 innerHTML 的,不是value。
- 关闭定时器 clearInterval(定时器名称); 定时器不再进行
1.4 this
this 指向的是 事件的调用者 ,或者是函数的使用者。
var btn.onclick = function() { this}
一般情况下,我们喜欢 var that = this;
var that = this; // 把 btn 对象 给 that var _this = this;
1.5 定时器之 setTimeout()
时间去哪儿了 类似于定时炸弹 。。
setTimeout(“函数”, 时间 )
setInterval(fn,5000); 每隔 5秒钟,就去执行函数fn一次
setTimeout(fn,5000); 5秒钟之后,去执行 fn 函数, 只执行一次
1.5.1 深层次的看待定时器区别
setInterval是排队执行的
假如 间隔时间是1秒, 而执行的程序的时间是2秒 上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒
setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒.
1.6 5秒钟自动跳转页面
JS 页面跳转: window.location.href = ”http://www.itcast.cn” ; BOM
函数自己调用自己的过程 我们称之为 : 递归调用 自残
但是这样用,一定要加一个退出 if 的条件,不然成为死循环了。
目的就是为了,模拟使用 settimeout 来实现setinterval 的效果。
辞海 10万字 2500 汉字 1000次常用汉字
1.6.1 arguments 对象
function fn(a,b,c) { console.log(a+b+c); alert(arguments.length;)}
fn(1,3,4,6);
arguments.length; 返回的是 实参的个数。
但是这个对象有讲究,他只在正在使用的函数内使用。
arguments.callee;
返回的是正在执行的函数。 也是在函数体内使用。 在使用函数递归调用时推荐使用arguments.callee代替函数名本身。
function fn() { console.log(arguments.callee); }
这个callee 就是 : function fn() { console.log(arguments.callee); }
1.7 运算符
一元操作符 ++, -- + - +5 -6
逻辑操作符 ! && ||
基本运算符 +, -, *, /, %
关系操作符 >, <, >=, <=, ===, ==, !=, !==
= 赋值 == 判断 === 全等
条件操作符 (三元运算符) ? :
赋值运算符 +=, -=, *=, /=, %=
a+=5 a= a + 5
逗号运算符 , var a=0,b=0;
1.7.1 运算符顺序
1 ()
2 !、-、++、-- (-10) 负号 正号
3 *、/、%
4 +、- 10-5
5 <、<=、<、>=
6 ==、!=、===、!==、
7 &&
8 ||
9?:
10 =、+=、-=、*=、/=、%= 赋值
1+2*3
1.7.2 几个面试题
1. a&&b 结果是什么?
如果a 为假 ,则返回 a
如果a 为真 ,则返回 b
var aa = 0&&1;
alert(aa) // 0
var bb = 1&&0;
alert(bb); //0
var cc = 1&&10;
alert(cc); // 10
- a||b
如果 a 为假 则返回b
如果 a 为真 则返回a
console.log(0||1); 1
console.log(1||0); 1
console.log(1||5); 1
console.log(5||1); 5
var a = 1 && 2 && 3;
console.log(a); 3
var b = 0 && 1 && 2;
console.log(b); 0
var c = 1 && 0 && 2;
console.log(c); 0
%=
a+=3
a = a % 3;
1.8 字符串对象常用方法
我们工作中经常进行字符串操作。
1.8.1 转换为字符串
1. + “” 2+ “” = “2” 2+”ab” = “2ab”
2. String() 转换为字符串
3. toString(基数) ; 基数就是进制
var txt = 10;
txt.toString(2) 二进制 1010
1.8.2 获取字符位置方法
charAt,获取相应位置字符(参数: 字符位置)
charCodeAt获取相应位置字符unicode编码(参数: 字符位置)
var txt = “abcedf”;
比如, txt.charAt(4); 索引号一定是从0开始 返回的结果是 d
我们根据我们输入的 位数 返回相应的 字符 。
unicode编码 是我们字符的字符的唯一表示 。
JS原生第五篇 (帅哥)的更多相关文章
- JS原生第六篇 (帅哥)
复习 按钮不可用 disabled = "disabled" || true setTimeout 只执行一次 setInterval 执行很多次 递归调用 ...
- JS原生第三篇 (帅哥)
1.1 数 组 1. 数组 看电影 电影院 座位 大的变量 里面可以放很多的值 var arr = [1,3,57]; var ar = new Array(); ...
- JS原生第八篇 (帅哥)
1.1 复习 1. clientX clientWidth 可视区域的宽度 clientWidth width + padding offsetWidth ...
- JS原生第七篇 (帅哥)
1.1 复习 offset 自己的 偏移 offsetWidth 得到自己的宽度 offsetHeight 构成 : width + padding + border div ...
- JS原生第四篇 (帅哥)
1.1 1. 循环 for(初始化; 退出条件; 增量) { } while(退出条件) { } do { 语句 } while(退出条件) 2. switch( ) 多选1 ...
- JS原生基础终结篇 (帅哥)
闭包 基础 面向对象基础 1.1 闭包 在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落.这些外部执行域的非 ...
- JS数据结构第五篇 --- 二叉树和二叉查找树
一.二叉树的基本概念 从逻辑结构角度来看,前面说的链表.栈.队列都是线性结构:而今天要了解的“二叉树”属于树形结构. 1.1 多叉树的基本概念,以上图中“多叉树”为例说明 节点:多叉树中的每一个点都叫 ...
- web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史
秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...
- 跟我学SpringCloud | 第十五篇:微服务利剑之APM平台(一)Skywalking
目录 SpringCloud系列教程 | 第十五篇:微服务利剑之APM平台(一)Skywalking 1. Skywalking概述 2. Skywalking主要功能 3. Skywalking主要 ...
随机推荐
- java-并发-活性
浏览以下内容前,请点击并阅读 声明 一个并发程序以适时方式执行的能力叫活性.以下部分介绍最常见的一种活性问题,死锁,并简单介绍其他两种活性问题,饥饿和活锁. 死锁 死锁描述了一种情况:两个或两个以上的 ...
- 词法分析程序(C)
#include <stdio.h> #include <string.h> ],word[],ch; int type,p,i,n,sum; ]={"begin&q ...
- BZOJ1120 : [POI2009]STR
因为问题的对称性,只需要考虑求出有多少点离$A$更近即可. 枚举$4$个绝对值的正负号,可以解出坐标范围. 若可以转化为二维数点,则可以统一扫描线+树状数组解决. 否则是三维数点,按一维排序,剩下两维 ...
- ASP.NET图形验证码的生成
效果: 调用方法: int[] r = QAPI.VerifImage.RandomList();//取得随机数种子列 );//产生验证码字符 pictureBox1.Image = QAPI.Ver ...
- 第一章 DeepLab的创作动机
这一段时间一直在做深度学习方面的研究,目前市场上的深度学习工具主要分为两大块.一块是基于Python语言的theano:另一块是可以在多个语言上使用并能够在GPU和CPU之间随意切换的Caffe.但是 ...
- Angularjs ng-if和ng-show的区别
ng-if:判断条件,为true时向html中插入节点,否则从html中移除节点: ng-show: 简单的显示和隐藏(display) 坑点:ng-if会创建一个新的作用域(scope),如果内部元 ...
- 将Web应用发布到tomcat中的三种方法
坑啊,为什么网易的博客不能搬过来!!!我一个一个复制过来容易嘛!!!!原文地址:http://buffalo-l.blog.163.com/blog/static/244954022201539111 ...
- AOP面向切面编程的四种实现
一.AOP(面向切面编程)的四种实现分别为最原始的经典AOP.代理工厂bean(ProxyFacteryBean)和默认自动代理DefaultAdvisorAutoProxyCreator以及Bea ...
- POJ2369 Permutations(置换的周期)
链接:http://poj.org/problem?id=2369 Permutations Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- 学习笔记——SQLite介绍
简介:Google为android的较大数据的处理提供了SQLlite, 他在数据存储.管理.维护.等各方面都相当出色功能也非常强大. 1.创建数据库 Android 为了让我们能够更加方便地管理数据 ...