初学javascript，整理整理笔记（二）
来源：互联网 发布：mac开机客人用户 编辑：程序博客网 时间：2024/05/16 06:21
一：JavaScript基本组成
1， ECMAScript----------JavaScript的核心，描述了语言的基本语法和对象。
2，ODM------------------The Document Object Model，描述了作用于网页内容的方法和接口。
3，BOM------------------The Browser Object Model，描述了和浏览器交互的方法和接口。
二：Date（）对象
1，创建一个新的Date（）对象
var myDate=new Date（）;
2，Date（）对象方法
(1),Date() 返回当日的日期和时间
(2),getTime() 返回1970 年 1 月 1 日至今的毫秒数
document.write(myDate.getTime()+"<br>"); //1497509577747
(3),getDay() 返回当前的星期
document.write(myDate.getDay()+"<br>"); //4
(4),getFullYear() 返回当前的年份
document.write(myDate.getFullYear()+"<br>"); //2017
(5),getMonth() 返回当前的月份(0-11)
document.write(myDate.getMonth()+"<br>"); //5
(6),getDate() 返回当前的日期
document.write(myDate.getDate()+"<br>"); //15
(7),getHours() 返回当前的小时
document.write(myDate.getHours()+"<br>"); //15
(8),getMinutes() 返回当前的分钟数
document.write(myDate.getMinutes()+"<br>"); //6
(9),getSeconds() 返回当前的秒数
三，Math()对象
1，Math()对象属性
(1),Math.E 返回算术常量 e，即自然对数的底数（约等于2.718）。
(2),Math.LN2 返回 2 的自然对数（约等于0.693）。
(3).Math.LN10 返回 10 的自然对数（约等于2.302）。
(4),Math.LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
(5),Math.LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
(6),Math.PI 返回圆周率（约等于3.14159）。
(7),Math.SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。
(8),Math.SQRT2 返回 2 的平方根（约等于 1.414）。
2,Math()对象方法
(1),Math.abs(); 返回数的绝对值
(2),Math.sin(); 返回数的正弦值
(3),Math.cos(); 返回数的余弦值
(4),Math.asin(); 返回数的反正弦值
(5),Math.acos(); 返回数的反余弦值
(6),Math.ceil(); 对数进行对上取整
(7),Math.floor(); 对数进行向下取整
(8),Math.max(x,y); 返回x和y中最大值
(9),Math.min(x,y); 返回x和y中最小值
(10),Math.pow(x,y); 返回x的y次幂
(11),Math,sqrt(x); 返回x的平方根
(12),Math.round(x); 对x进行四舍五入
(13),Math.random(); 返回 0 ~ 1 之间的随机数(包括0，不包括1)
四；数据类型及转换
JS有这几种数据类型：字符串，数字，布尔值，数组，对象，Null，Undefined
(1),Number(); 将字符串转化为数字
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
(2),parseInt(), 把值转换为整数
parseInt("1234blue"); //returns 1234
parseInt("0xA"); //returns 10
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN
parseInt("AF", 16); //returns 175
当然，对二进制、八进制，甚至十进制（默认模式），都可以这样调用parseInt()方法：
parseInt("10", 2); //returns 2
parseInt("10", 8); //returns 8
parseInt("10", 10); //returns 10
如果十进制数包含前导0，那么最好采用基数10，这样才不会意外地得到八进制的值。例如：
parseInt("010"); //returns 8
parseInt("010", 8); //returns 8
parseInt("010", 10); //returns 10
(3),parseFloat(), 把数转换为浮点型
parseFloat("1234blue"); //returns 1234.0
parseFloat("0xA"); //returns NaN
parseFloat("22.5"); //returns 22.5
parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN
(4),Boolean(n), 若n为字符串，空返回false，其他返回true。
若n为数字，整数为true，0和负数是false
五：几个小例子
(1),选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 100px;
background: gray;
display: none;
}
.active {
background: red;
}
</style>
</head>
<body>
<span id="oSpan">
<button class="active">div1</button>
<button>div2</button>
<button>div3</button>
<button>div4</button>
<div>
div1
</div>
<div>
div2
</div>
<div>
div3
</div>
<div>
div4
</div>
</span>
<script type="text/javascript">
var oBtn = document.getElementsByTagName("button");
var oDiv = document.getElementsByTagName("div");
for(var i = 0; i < oBtn.length; i++) {
oBtn[i].index = i;
oDiv[0].style.display="block";
oBtn[i].onclick = function() {
for(var i = 0; i < oBtn.length; i++) {
oBtn[i].className ="";
oDiv[i].style.display = "none";
}
oBtn[this.index].className = "active";
oDiv[this.index].style.display="block";
}
}
</script>
</body>
</html>
(2),验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 300px;
height: 100px;
background: gray;
margin: 0 auto;
padding-top: 20px;
}
input {
width: 100px;
height: 30px;
float: left;
margin-left: 20px;
padding-left: 5px;
}
span {
width: 100px;
height: 32px;
float: left;
display: block;
background: white;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 30px;
border: 1px solid black;
}
button {
display: block;
clear: both;
margin-left: 20px;
width: 240px;
height: 30px;
background: orange;
}
#div2 {
width: 150px;
float: left;
margin-left: 20px;
font-size: 10px;
margin-bottom: 20px;
}
a {
display: block;
font-size: 12px;
line-height: 30px;
}
</style>
</head>
<body>
<div id="div1">
<input type="text" placeholder="请输入验证码！" />
<div id="div2">
<span></span>
<a id="a1" href="javascript:;">换一张</a>
</div>
<button>点击验证</button>
<script type="text/javascript">
var oInp = document.getElementsByTagName("input")[0];
var oSpan = document.getElementsByTagName("span")[0];
var oBtn = document.getElementsByTagName("button")[0];
var arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m"];
var str = "";
var arrlength = arr.length;
function yzm() {
for(var i = 0; i < 8; i++) {
str += arr[Math.floor(Math.random() * 36)];
}
oSpan.innerHTML = str;
}
yzm();
oSpan.onclick = function() {
str = "";
for(var i = 0; i < 8; i++) {
str += arr[Math.floor(Math.random() * 36)];
}
oSpan.innerHTML = str;
}
oBtn.onclick = function() {
if(oInp.value == "") {
alert("请输入验证码！");
} else if(oInp.value != oSpan.innerHTML) {
alert("验证码错误！");
} else {
alert("验证码正确！");
}
}
</script>
</div>
</body>
</html>
- 初学javascript，整理整理笔记（二）
- 初学JavaScript，整理整理笔记（一）
- JavaScript 面向对象整理笔记（二）
- JavaScript学习笔记整理（二）
- socket初学笔记整理
- 初学http整理笔记
- JSP初学整理（二）：JSP+JAVABean
- 初学c#知识整理（二）
- 【JavaScript】基础知识整理（二）
- JavaScript数组整理（二）
- javaScript知识点整理（二）
- Delphi笔记整理（二）
- 纸质笔记整理（二）
- javascript(基础整理二)
- javascript基本知识整理二
- javascript笔记整理
- JavaScript学习笔记整理
- javascript笔记整理系列
- Excel 【小型成绩分析系统初稿】（功能及适应性有待完善）
- Android中Audio框架
- Go实战--go中函数(function)和方法(method)的使用(The way to go)
- 如何使用jedis对redis数据库操作
- ORACLE DATAGUARD传输原理
- 初学javascript，整理整理笔记（二）
- javascript实现数据结构中的基本排序方法
- hdu2544(Dijkstra算法最短路问题)最短路
- 51单片机---定时器工作方式
- 【Java】Java遍历删除集合中的元素
- Fragment+ViewPager 实现仿微信
- Easyui-datagrid groupview 点击行展开
- wget 命令下载ORACLE官方网JDK的方法
- 【JavaScript】你不知道的 console
