JavaScript = ECMAScript + BOM +DOM
BOM-浏览器对象模型-window
DOM-文档对象模型-document
1.JavaScript Date 对象
Date对象用于处理时间和日期
通过 new Date() 创建Date对象
例:页面显示时间
CSS
<style type="text/css">
#time{
float: right;
background-color: blue;
color: yellow;
width: 320px;
height: 40px;
font: 20px;
text-align: center;
line-height: 40px;
}
</style>
<body>
<div id="time">
<script type="text/javascript">
var days = ["日","一","二","三","四","五","六"]
function showTime(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var day = now.getDay();
var div = document.getElementById("time");
div.innerHTML = year + "年"
+(month <10 ? "0":"")+ month +"月"
+(date <10 ? "0":"")+ date +"日 "
+(hour < 10 ? "0":"")+ hour +":"
+(minute < 10 ? "0":"")+ minute +":"
+(second < 10 ? "0":"")+ second
+" 星期"+days[day];
}
showTime();
window.setInterval(showTime,1000);
</script>
</div>
</body>
image.png
2.JavaScript Math（算数） 对象
Math（算数）对象的作用是：执行常见的算数任务。Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
Math.random()---返回 0 到 1 之间的随机数
<body>
<p id="a" ></p>
<button onclick="creatNumber()" >点我</button>
<script type="text/javascript">
function creatNumber(){
var number = Math.random()
var content = document.getElementById("a")
content.textContent = number
}
</script>
</body>
parseInt(Math.random()*100+1)
#产生1-100随机整数
层叠的样式如何抉择?
遵循三条原则:
1.就近原则
2.具体性原则(ID>类>标签[]>标签>通配符)
3.重要性原则
#显示九九乘法表
<button onclick="showTable()">显示九九乘法表</button>
<script>
function showTable(){
document.write('<table style="border-collapse: collapse;" >');
for(var i = 1;i <= 9; i +=1){
document.write('<tr>');
for(var j = 1;j <= i; j +=1) {
document.write("<td style='border: 1px solid black;'>");
document.write(i+'*' +j +'='+ i*j);
document.write('</td>');
}
document.write('</tr>');
}
document.write('</table>');
}
</script>
3.HTML DOM Document 对象
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点
(1)document.querySelectorAll(".foo")[0];
是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
(2)document.querySelector(".foo");
返回文档中匹配指定的CSS选择器的第一元素
(3)document.getElementsByTagName("h1")[0];
返回带有指定标签名的对象集合。
(4)document.getElementsByClassName("foo");
返回文档中所有指定类名的元素集合，作为 NodeList 对象。
(5)document.getElementById("welcome")
返回对拥有指定 id 的第一个对象的引用。
推荐使用(1)和(2)
document.getElementById 拿到标签
Elements 很多标签是一个列表 用下标取到想要的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{
font-size: 20px;
color: black;
background-color: antiquewhite;
width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id="welcome" class="foo">欢迎来到千峰教育成都校区Python就业班 </h1>
<script type="text/javascript">
//var h1 = document.querySelectorAll(".foo")[0];
//var h1 = document.querySelector(".foo");
//var h1 = document.getElementsByTagName("h1")[0];
//var h1 = document.getElementsByClassName("foo");
var h1 = document.getElementById("welcome")
function move(){
var str = h1.textContent;
str = str.substring(1)+str.charAt(0);
substring 取子串
h1.textContent = str;
}
window.setInterval(move,200);
</script>
</div>
</body>
</html>
