设置节点属性
1.获取节点属性
getAttribute(属性) 获取属性
alert(demo.getAttribute("title"));
2.设置节点属性
setAttribute(“属性”,”值”);
将类名改为:demo:div.setAttribute(“class”,”demo”);
3.删除某个属性
removeAttribute(“属性”);
demo.removeAttribute(“title”)
这个盒子就没有title属性了
A.appendChild(B);
B一定是A的孩子,同时B放到了A的里面的最后
A. insertBefore(B,C)
B,C 都是A的孩子;把B放到A里面,但是是C的前面
节点的操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var demo = document.getElementById("demo");
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
// 创建新的节点
var newli = document.createElement("li");
newli.innerHTML = "文字";
// 插入节点
demo.appendChild(newli);
//子节点要放入的是父亲的最后面
demo.appendChild(demo.cloneNode());
demo.parentNode.appendChild(demo.cloneNode());
//我的爸爸添加孩子相当于给我的兄弟
}
}
</script>
</head>
<body>
<button>点击</button>
<ul id="demo">
</ul>
</body>
</html>
京东轮播图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul,ol{list-style:none}
.box {
width: 730px;
height: 454px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.circle {
position: absolute;
left: 50%;
margin-left:-50px;
bottom:10px;
}
.circle span {
float: left;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: pink;
text-align: center;
line-height: 18px;
margin-right: 10px;
cursor: pointer;
}
.circle span.current {
background-color: purple;
}
</style>
<script>
window.onload = function(){
var scroll = document.getElementById("scroll");
var circle = document.createElement("div"); // 新的
//circle.className = "circle"; // 更改的类名
circle.setAttribute("class","circle"); // 更为常用
scroll.appendChild(circle);
var ul = document.getElementById("ul");
var lis = ul.children; // ul 的所有孩子
//alert(lis.length);
// 生成了新的大盒子
// 大盒子里面要放入 n个小的span
for(var i=0; i<lis.length; i++)
{
var newspan = document.createElement("span"); // 创建 6次 span
newspan.innerHTML = i+1;
circle.appendChild(newspan);
}
var child = circle.children;
child[0].setAttribute("class","current"); // 第一个孩子 添加 current
}
</script>
</head>
<body>
<div class="box" id="scroll">
<div class="slider">
<ul id="ul">
<li><img src="images/11.jpg" alt=""/></li>
<li><img src="images/22.jpg" alt=""/></li>
<li><img src="images/33.jpg" alt=""/></li>
<li><img src="images/44.jpg" alt=""/></li>
<li><img src="images/55.jpg" alt=""/></li>
<li><img src="images/55.jpg" alt=""/></li>
<li><img src="images/66.jpg" alt=""/></li>
</ul>
</div>
<!--<div class="circle">-->
<!--<span>1</span>-->
<!--<span>2</span>-->
<!--<span>3</span>-->
<!--<span>4</span>-->
<!--<span>5</span>-->
<!--<span>6</span>-->
<!--</div>-->
</div>
</body>
</html>
效果如图(根据图片多少自动生成小圆圈):
微博发布
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style-type: none;}
*{margin:0;padding: 0;}
.box {
margin: 100px auto;
width: 600px;
height: auto;
border:1px solid #333;
padding: 30px 0;
}
textarea {
width: 450px;
resize: none; /*防止用户拖动 右下角*/
}
.box li {
width: 450px;
line-height: 30px;
border-bottom:1px dashed #ccc;
margin-left: 80px;
}
.box li a {
float: right;
}
</style>
<script>
window.onload = function(){
//获取对象 再次操作对象
var btn = document.getElementsByTagName("button")[0];
var txt = document.getElementsByTagName("textarea")[0];
var ul = document.createElement("ul"); // 创建ul
btn.parentNode.appendChild(ul); // 追加到 他的父亲里面
btn.onclick = function(){
if(txt.value == "")
{
alert("输入不能为空");
return false; // 终止函数执行
}
var newli = document.createElement("li");
newli.innerHTML = txt.value + "<a href ='javascript:;'>删除</a>"; // 把表单的值给 新li
txt.value = ""; // 清空 表单
var lis = ul.children; // 获得有多少个li
// if else 这个片段 让我们新发布的内容 最上显示
if(lis.length == 0) // 第一次创建
{
ul.appendChild(newli); // ul 的后面追加
}
else
{
ul.insertBefore(newli,lis[0]); // 每次生成的新的li 放到第一个li 的前面
}
var as = document.getElementsByTagName("a"); // 获得所 a
for(var i=0; i<as.length;i++)
{
as[i].onclick = function(){
//removeChild
ul.removeChild(this.parentNode); // UL 他的爸爸
// a 的粑粑是 li
}
}
}
}
</script>
</head>
<body>
<div class="box">
微博发布: <textarea name="" id="" cols="30" rows="10"></textarea> <button>发布</button>
</div>
</body>
</html>
日期函数Date()
1.声明日期
var date = new Date();
声明一个新的日期函数赋值给了date
2.使用函数
date.getTime();
date.valueOf();
//得到距离某个年份的毫秒数
var date = new Date();//声明
console.log(date.getTime());//提倡使用的
console.log(date.valueOf());
//直接使用
console.log(Date.now());
console.log(+new Date());
3.常用的日期方法
获取日期和时间
getDate() —— 获取日1-31
getDay() —— 获取星期0-6
getMonth() —— 获取月0-11
getFullYear() —— 获取完整年份( 浏览器都支持)
getHours() —— 获取小时0-23
getMinutes() —— 获取分钟0-59
getSeconds() —— 获取秒0-59
getMilliseconds() —— 获取当前的毫秒
getTime() —— 返回累计毫秒数(从1970、1/1午夜)
日历
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 150px;
height: 180px;
background-color: #369;
margin: 100px auto;
text-align: center;
}
.box p {text-align: center;
line-height: 60px;
font-size:12px;
color: #fff;
}
.box span{
display: block;
width: 75px;
height: 75px;
margin: 0 auto;
font-size:50px;
color: #000;
background-color: yellowgreen;
line-height: 75px;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById("box");
var boys = box.children;
//日期函数
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var date = new Date(); // 声明日期函数
boys[0].innerHTML = date.getFullYear()+"年"+ (date.getMonth()+1) +
"月" + date.getDate() + "日" + " " + arr[date.getDay()];
boys[1].innerHTML = date.getDate(); // 今天的日子
}
</script>
</head>
<body>
<div class="box" id="box">
<p></p>
<span></span>
</div>
</body>
</html>
定时器
很多情况下,一些操作不需要人工干预,代码会自动去不断执行,而且会有时间的绑定,比如每隔5秒就执行一次。这个时间我们可以设定,让每个动作不断地去执行,在js里面用定时器来表示。
倒计时 = 用将来的时间 - 现在的时间
用毫秒去减,减完后不断转换就行了
window.setInterval("执行的函数",间隔时间)
(window可以省略)
正确写法:
setInerval(fun,1000);
每隔1秒钟(1000毫秒),就去执行一次fun这个函数
setInterval(“fun()”,1000);
setInterval(function(){},1000);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var demo = document.getElementById("demo");
setInterval(fn,1000); // 每隔1秒,就去 调用 一次 fn 这个函数
var num = 1;
function fn(){
num++;
demo.innerHTML = num ;
}
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
定义自己时间
<script>
var date = new Date();
console.log(date); // 得到的是现在的时间
var endTime = new Date("2015/12/12");
console.log(endTime); // 得到的是 2015 12 .12
var time = new Date(2015,12,12);
</script>
定义自己的日子
var endTime = new Date("2015/12/12");
如果date括号里面写日期,就是自己定义的时间,
如果date括号里面不写日期,就是当前时间。
new Date("2015/12/12 17:30:00");
注意:日期和时分秒中间要用空格隔开
倒计时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
font-size:30px;
text-align: center;
color:red;
}
</style>
<script>
window.onload = function(){
var demo = document.getElementById("demo");
var endTime = new Date("2015/12/12 17:30:00"); // 最终时间
setInterval(clock,1000); // 开启定时器
function clock(){
var nowTime = new Date(); // 一定是要获取最新的时间
// console.log(nowTime.getTime()); 获得自己的毫秒
var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
// 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
// console.log(second);
// 一小时 3600 秒
// second / 3600 一共的小时数 /24 天数
var d = parseInt(second / 3600 / 24); //天数
//console.log(d);
var h = parseInt(second / 3600 % 24) // 小时
// console.log(h);
var m = parseInt(second / 60 );
//console.log(m);
var s = parseInt(second ); // 当前的秒
console.log(s);
/* if(d<10)
{
d = "0" + d;
}*/
d<10 ? d="0"+d : d;
h<10 ? h="0"+h : h;
m<10 ? m="0"+m : m;
s<10 ? s="0"+s : s;
demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
}
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>