避免篇幅太长，这里接上一篇博客--------------------gogogo
Document对象
常用属性
| 名称 | 说明 |
|---|---|
| referrer | 返回载入当前文档的URL |
| URL | 返回当前文档的URL |
语法结构：
document.referrer
document.URL
代码示例：
<script>//载入当前文档的url自己弄一个
document.write(document.referrer +"---"+document.URL);
</script>
来看一个代码的实际应用：
目的：为了防止爬虫(当然，这个案例只是用作学习)
流程图如下：
代码如下：
<a href="3.html">领取奖品</a> //这里是2.html页面
<script>
var preUrl = document.referrer;
//载入页面url必须包含2.html
if(preUrl.indexOf("2.html")==-1){
document.write("亲，请从领奖页面过来领取奖品");
//延时：让客户看到错误信息 单位：毫秒
setTimeout("location.href='2.html'",5000);
}else{
document.write("<h1 >恭喜你，获得一个充气的娃娃！！！</h1>");
}
</script>
常用方法：
| 名称 | 说明 |
|---|---|
| getElementById() | 获取对拥有指定id的第一个对象的引用【对象的id唯一】 |
| getElementsByName() | 获取带有指定名称的对象的集合【相同name属性】 |
| getElementsByTagName() | 获取带有指定标签名的对象的集合【相同的元素】 |
| write() | 向文档写文本、HTML表达式或JavaScript代码 |
| getElementsByClassName() | 获取所有指定类名的元素： |
getElementsByClassName() 方法
代码示例：
<style>
div {
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div class="example">
<p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。</p>
</div>
<div class="example color">
<p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。</p>
</div>
<div class="example color">
<p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。</p>
</div>
<p>点击按钮修改第一个类为 "example" 的 div 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("example color");
x[0].style.backgroundColor = "red";
}
</script>
</body>
注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。
先补充一个下面代码中要用到的知识点
innerText 获取标签文本内容
innerHTML 获取HTML内容
value 获取值，即form提交表单的值
代码如下:
<div class="zhang">1111</div>
<div class="yan">2222</div>
<input class="lin" type="text" value="张岩林">
<script>
document.getElementsByClassName("zhang").innertext = 123; // 获取类名为zhang的标签并把内容改为123
document.getElementsByClassName("yan").innerHTML = 456; //获取类名为yan的标签并把内容改为456
document.getElementsByClassName("lin").value = "爱你，中国"; //获取类名为lin的标签并把内容改为爱你，中国
</script>
下面用具体案例来解释方法的使用：
代码应用一、：
<body>
<div class="content">
<img src="images/book.jpg" alt="西游记"/>
<div class="r">
<div id="book"><span style="color:red">书名：</span>西游记</div>
<input name="changeBook" value="换换名称" type="button" onclick="alterBook();" /><br>
四季名称：
<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" /><br><br>
<input name="b3" type="button" value="四季名称" onclick="s_input()" />
<p id="replace"></p>
</div>
</div>
<script type="text/javascript">
function alterBook(){
//1.通过getElementById获取div元素对象
var bookInfoTagObj = document.getElementById("book");//div标签对象
//innerText获取文本类容，innerHTML获取标签及文本类容
//2.修改标签内容
bookInfoTagObj.innerText="今天天气真好！！";
}
function s_input(){
//3.通过getElementsByName获取div元素对象
var seasonTagObjArray = document.getElementsByName("season");
//4.获取显示内容的p标签
var replaceObj = document.getElementById("replace");
//seasonTagObjArray多个名字叫season的input标签对象
for (let index = 0; index < seasonTagObjArray.length; index++) {
var seasonValue = seasonTagObjArray[index].value;
replaceObj.innerHTML+=seasonValue+" "
}
}
</script>
</body>
代码应用二、：
<body>
<div class="content">
<div class="cartList">
<ul>
<li>¥<input type="text" name="price" value="21.90" ></li>
<li><input type="button" name="minus" value="-" onclick="minus(this)">
<input style="width:30px;" type="text" name="amount" value="1">
<input type="button" name="plus" value="+" onclick="plus(this)"></li>
<li id="price0">¥21.90</li>
<li><p>移入收藏</p><p>删除</p></li>
</ul>
<ul>
<li>¥<input type="text" name="price" value="24.00"></li>
<li><input type="button" name="minus" value="-" onclick="minus(this)">
<input style="width:30px;" type="text" name="amount" value="1">
<input type="button" name="plus" value="+" onclick="plus(this)"></li>
<li id="price1">¥24.00</li>
<li><p>移入收藏</p><p>删除</p></li>
</ul>
<ol>
<li id="totalPrice"> </li>
<li><span>结 算</span></li>
</ol>
</div>
</div>
</body>
<script>
function test1(){
//得到商品的价格和数量
var s1 =document.getElementsByName("price");
var s2= document.getElementsByName("amount");
//计算商品的总价
var sum =parseFloat(s1[0].value) * parseFloat(s2[0].value) + parseFloat(s1[1].value) * parseFloat(s2[1].value);
//把总价放到结算处
document.getElementById("totalPrice").innerHTML=sum.toFixed(2);
}
//调用方法
test1();
//商品数量减一
//obj.parentNode 获取该元素的父节点 childNodes获取所有子元素，
//console.log(obj.parentNode.childNodes);//控制台查看
function minus(obj){
var amount= obj.parentNode.childNodes[2].value;
if (amount==1) {
amount=1;
}else{
obj.parentNode.childNodes[2].value--;
}
//重新计算价格
test1();
}
//商品数量加一
function plus(obj){
obj.parentNode.childNodes[2].value++;
//重新计算价格
test1();
}
</script>
更具体的在这章里面有讲到=============gogogo
JavaScript内置对象：
常用有如下几种：
Date对象：
语法结构:
var 日期对象=new Date(参数)
参数格式：MM DD,YYYY,hh:mm:ss
例如：
Var today=new Date( ); //返回当前日期和时间
var tdate=new Date(“september 1,2013,14:58:12”);
常用方法：
| 方法 | 说明 |
|---|---|
| getDate() | 返回 Date 对象的一个月中的每一天，其值介于1～31之间 |
| getDay() | 返回 Date 对象的星期中的每一天，其值介于0～6之间 |
| getHours() | 返回 Date 对象的小时数，其值介于0～23之间 |
| getMinutes() | 返回 Date 对象的分钟数，其值介于0～59之间 |
| getMonth() | 返回 Date 对象的月份，其值介于0～11之间 |
| getFullYear() | 返回 Date 对象的年份，其值为4位数 |
| getTime() | 返回自某一时刻（1970年1月1日）以来的毫秒数 |
| getSeconds() | 返回 Date 对象的秒数，其值介于0～59之间 |
来看看这些方法使用的案例：
案例一、
<body >
<div>
<p id="myclock">
<script type="text/javascript">
function disptime(){
var today = new Date(); //获得当前时间
var nian = today.getFullYear();//获得年份
var yue = today.getMonth()+1; //获得月份
var tian= today.getDate();//获得天数
var hh = today.getHours(); //获得小时
var mm = today.getMinutes();//获得分钟
var ss = today.getSeconds(); //获得秒
if (hh<=12){
a=("<br/>"+"上午好！欢迎来到梦想商城！")
}else if (hh > 12 && hh <= 18){
a=("<br/>"+"下午好！欢迎来到梦想商城！")
}else{
a=("<br/>"+"晚上好！欢迎来到梦想商城！")
}
document.getElementById("myclock").innerHTML="今天日期:"+nian+"年"+yue+"月"+tian+"日"+"<br/>"+"现在的时间:"+hh +":"+mm+": "+ss+""+a;
}
var myTime = setInterval("disptime()",1000);
</script>
</body>
案例二、
<script>
function showTime(){
//1.获取系统时间
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
//2.将系统时间添加div标签上
var dateTagObj = document.getElementById("colock");
dateTagObj.innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
//调用
showTime();
//3.定时器 每个一秒钟向页面输入一个 123
// setInterval(function(){
// document.write("123");
// },1000)
setInterval(showTime, 1000);//单位毫秒
</script>
Math对象
常用方法：
| 方法 | 说明 | 示例 |
|---|---|---|
| ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
| floor() | 对数进行下舍入 | Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
| round() | 把数四舍五入为最接近的数 | Math.round(25.5);返回26 Math.round(-25.5);返回-26 |
| random() | 返回0~1之间的随机数 | Math.random();例如：0.6273608814137365 |
代码案例：
<input type="button" onclick="getColor()" value="点击我换颜色"/>
<script>
function getColor(){
var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
var colorArray = colorElements.split(",");
var color ="#";
for(var i =0;i<6;i++){
color+=colorArray[Math.floor(Math.random()*16)];
}
document.write(color);
}
</script>