js基础第六天
获取节点属性
getAttribute(“属性”) 获取属性
setAttribute(“属性”,”值”); 设置节点属性
删除某个属性
removeAttribute(“属性”)
A.appendChild(B);
B一定是A的孩子，同时b放到了a里面，装到里面去了，在最后面。
A.insertBefore(B,C)
B C都是A的孩子，把B放到A里面，但是在C的前面。
微博案例
第一个if 语句中，if里面如果有return，那么就是返回，不执行下面的，终止执行，就不拥有else了。如果没有return的话，那么还得有else。
<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>
日期函数Date（）
所有日期函数首字母都要大写。
这个函数（对象）可以设置我们本地日期，年月日时分秒。
首先要声明日期：(创造声明一个新的日期函数)
var date = new Date(); date是最新的日期变量
拓展：var arr=new Array();这个是声明一个新的数组
1秒=1000毫秒
var date=new Date();
date.getTime(); 得到距离1970年的毫秒数
date.valueOf(); 得到距离1970年的毫秒数
以上这两个值是一样的，这两种是常用的。
Date.now()
+new Date() 也是得到距离1970年的毫秒数，但是这两个与上面是有几毫秒之差。
以上这两个值是一样的，可以直接使用。
常用的日期函数的方法
获取日期和时间
getDate() 获取日 1-31
getDay () 获取星期 0-6（这里要注意）
getMonth () 获取月 0-11（这里要注意）
getFullYear () 获取完整年份（浏览器都支持）
getHours () 获取小时 0-23
getMinutes () 获取分钟 0-59
getSeconds () 获取秒 0-59
getMilliseconds () 获取当前的毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
日历案例
<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>
定时器（共有2个，这是其中1个）
每个几秒钟就去执行一次什么事件，例如轮播图。
设定时间 让某个动作不断的去执行。这个我们在JS里面用定时器来表示。
setIntervar(“执行的函数”，间隔时间)
常用setIntervar(fun，1000); 每隔1秒钟，就去执行一次fun这个函数,fun是外面定义的。
setIntervar(“fun”，1000); 可以用，不提倡。
setIntervar(function(){}，1000); 每隔1秒钟立即去执行这个函数，是直接在里面的。
注意不可以这么写setIntervar(fun()，1000); 因为fun（）是立即去执行，跟1秒后执行是冲突的。
定时器特别像for循环，但定时器的最大特点是可以设定时间。
定时器案例（简单）
<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>
倒计时
计算倒计时需要两个条件
最终时间 12月12日
现在时间 11月13日
倒计时=最终时间 - 现在时间
由于日期相减数字会有大小问题，所以是需要使用毫秒来减的。
现在距离1970的毫秒数
将来时间 距离1970的毫秒数
将来毫秒-现在的毫秒就等于中间的毫秒 不断转换就可以了
中间的毫秒除以1000等于现在的秒数
中间的秒数除以60等于现在的分数
现在的分数除以60等于现在的小时数
现在的小时数除以24等于现在的天数
1小时等于3600秒
1小时=60分=60*60秒=3600秒
1天=24小时=24*60分=1444分=1444*60秒=86400秒
定义自己的日子
这是最好的写法，没有兼容性var endTime = new Date(“2015/12/12 17:30:00”);
如果date括号里面写日期 就是自己定义的时间。
如果date括号里面不写日期，就是当前时间。
<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 % 60);
//console.log(m);
var s = parseInt(second % 60); // 当前的秒
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>
问题：function fn() {} 与function() {}有什么区别？
手写代码，知道都怎么拼，css样式的补课
js基础第六天的更多相关文章
- js 基础篇（点击事件轮播图的实现）
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- js 基础
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
- js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- JS基础（超级简单）
1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) ...
- Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
- js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
- JS基础知识总结
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
- js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
随机推荐
- [搜片神器]BT种子下载超时很多的问题分析
继续接着第一篇写:使用C#实现DHT磁力搜索的BT种子后端管理程序+数据库设计(开源)[搜片神器] 谢谢园子朋友的支持,已经找到个VPS进行测试,国外的服务器: h31bt.org 大家可以给提点意 ...
- 1176: [Balkan2007]Mokia - BZOJ
Description维护一个W*W的矩阵,每次操作可以增加某格子的权值,或询问某子矩阵的总权值. 修改操作数M<=160000,询问数Q<=10000,W<=2000000.Inp ...
- js实现网页图片延时加载的原理和代码 提高网站打开速度
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- BZOJ 3173 [Tjoi2013] 最长上升子序列 解题报告
这个题感觉比较简单,但却比较容易想残.. 我不会用树状数组求这个原排列,于是我只好用线段树...毕竟 Gromah 果弱马. 我们可以直接依次求出原排列的元素,每次找到最小并且最靠右的那个元素,假设这 ...
- ubuntu的vi
ubuntu12.04的vi 1. 安装vim full版本由于Ubuntu预安装的是tiny版本,就会导致我们在使用上的产生不便.所以我们要安装vim的full版本.首先,先卸掉旧版的vi,输入以下 ...
- uva 11461
简单 打个表 case数不超过200 数据比较水 木有超时的风险~~ /*************************************************************** ...
- NIO的Selector
参考自 Java NIO系列教程(六) Selector Java-NIO-Selector java.nio.channels.Selector NIO新功能Top 10(下) 出发点: 如何管理多 ...
- tomcat安全设置
1.关闭服务器端口:server.xml默认有下面一行: <Server port="8005" shutdown="SHUTDOWN"> 这样允许 ...
- HDU4612+Tarjan缩点+BFS求树的直径
tarjan+缩点+树的直径题意:给出n个点和m条边的图,存在重边,问加一条边以后,剩下的桥的数量最少为多少.先tarjan缩点,再在这棵树上求直径.加的边即是连接这条直径的两端. /* tarjan ...
- 组策略限制添加用户作为服务登录导致ITAtomcat服务无法启动（log on as a service）
[故障类型]:ITA tomcat服务器无法启动. [关 键 词]:Logon as a service 作为服务登录 tomcat loggeter [适用版本]:FusionCloud So ...