一、Date对象
1. 获取
oDate.getFullYear() 获取年份
oDate.getMonth()+1 获取月份 0-11----->1-12
oDate.getDate() 获取日 1-31
var arr=['日','一','二','三','四','五','六'];var oDate=new Date();
oDate.getHours() 获取小时 oDate.getMinutes() 获取分 oDate.getSeconds() 秒
alert(oDate.getMillisecons()); //毫秒
oDate.getDay() 获取星期几 0-6 0:星期天
例:数码时钟
(1)获取系统时间----Date 对象----getHours、getMinutes、getSeconds
(2) 显示系统时间----字符串连接、空位补零
(3) 字符串[下标]获取一个字符,不兼容IE6/7,所以,设置图片路径。charAt方法----字符串.charAt(下标)兼容
2. 时间戳
oDate.getTime()----从1970年1月1日到现在的毫秒数
61秒= parseInt61/60 分 61%60 秒
3. 设置
(1)setFullYear(年,月,日 ) 年:必填 月日:可选-----获取完整的年份
setYear(); 获取年
(2)setMonth(月,日) 月:必填
(3)setDate(日)
oDate.setDate(31); //如果本月只有30天,会直接到下月第一天
oDate.setDate(0); 上个月最后一天
oDate.setDate(30);
alert(oDate.getDay());
本月最后一天星期几oDate.setMonth(oDate.getMonth()+1); //设置下个月1号// 因为本月是11月,getMonth()获取到的是10,所以要获取到11才是下个月oDate.setDate(0);alert(oDate.getDay());
(4)setHours(小时,分,秒,毫秒) 后面三个可选
例子:本月第一天是周几,本月共有多少天
var oDate=new Date();oDate.setDate(1);var week=oDate.getDay();alert('本月第一天是周'+week);oDate.setMonth(oDate.getMonth()+1);oDate.setDate(0);var day=oDate.getDate();alert('本月的总天数是:'+day);
例:倒计时
window.onload=function(){
var oSpan=document.getElementsByTagName('span')[0];
tick();
setInterval(tick,1000);
function tick(){
var oDate=new Date();
var oDateTarget=new Date();
oDateTarget.setFullYear(2014,11,1); //注意此处月份应设置比目标小1
oDateTarget.setHours(0,0,0,0);
var s=parseInt((oDateTarget.getTime()-oDate.getTime())/1000);
var d=parseInt(s/86400);
s%=86400;
var H=parseInt(s/3600);
s%=3600;
var M=parseInt(s/60);
s%=60;
oSpan.innerHTML="距离2014年12月1日"+d+"天"+H+"时"+M+"分"+s+"秒";
}
}
date对象的另外的用法-----设置时间可以进位、退位
二、封闭空间
1. 定时器中的括号问题:
setInterval(show,1000); //此处的show不能加括号,如果加则变成立刻执行,执行完之后,返回undefined
function show(){
alert(1);
}
js中语法规范:大括号不能直接跟小括号,如下:
function show(){
alert(1);
}()
但是,如果这样即可:
(function (){
alert(1);
})() /相当于立刻执行这个函数。如果后面再加show(); 则会报错
函数每调用一次,就复制一份,就执行一次
2. 封闭空间:多人配合时,避免函数重名问题
(fn1)(); //立即执行的匿名函数
例一:两个局部变量a不会重名,在两个不同的作用域下
function fn1(){
var a=44;
alert(a);
}
fuction fn2(){
var a=55;
alert(a);
}
例二:
(function(){
var a=55;
alert(a);
})(); //立即执行的匿名函数 封闭空间 这个函数只能用一次
例三:
var a=12;
function aaa(){
a=5;
}
aaa();
alert(a);
(function bbb(){
a=34;
})();
alert(a); //先后弹出5、34
利用封闭空间写选项卡
var oBox=document.getElementById('box');
var aBtn=oBox.getElementsByTagName('input');
var aDiv=oBox.getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++){
(function(index){
aBtn[i].onclick=function() {
for(var i=0;i<aDiv.length;i++) {
aBtn[i].className='';
aDiv[i].className='';
};
this.className='active';
aDiv[index].className='active';
};
})(i);
}
//function fn(index){ };
fn(i);
同(function(index){ })(i);
利用封闭空间写选项卡----封装
var oBox=document.getElementById('box');
var aBtn=oBox.getElementsByTagName('input');
var aDiv=oBox.getElementsByTagName('div');
tab(0);
tab(1);
tab(2);
function tab(index){
aBtn[i].onclick=function() {
for(var i=0;i<aDiv.length;i++) {
aBtn[i].className='';
aDiv[i].className='';
};
this.className='active';
aDiv[index].className='active';
};
}
求和函数:
(1)参数数量不固定的时候可用
(2)参数数组不是一个真正的数组,所以它不能用数组的方法
window.onload=function(){
function fn(){
var num=0;
for(var i=0;i<arguments.length;i++){
num+=arguments[i];
}
}
fn(222,33,456);
}
三、函数传参和封装
1.参数的基本知识:
(1)参数可以省 可以不传
(2)在调用函数的括号里传 在定义函数的括号里收
(3)参数名可以自定义 不用带引号
(4)可以传多个参数 中间用逗号分隔
(5)可以传多类型
2. 可变参(不定参):arguments
参数的个数可变,参数数组。参数数组, 有下标,有length,但并不是真正的数组,所以它不能用数组的方法。
3. 例1:求和-----求所有参数的和(用arguments)
例子:
function sum(){
//alert(arguments.length);
for(var i=0; i<arguments.length; i++){
result=0;
result+=arguments[i];
}
return result;
}
alert(sum(12,6,8));
4. 例2:CSS函数
(1)判断arguments.length
(2)给参数取名,增强可读性
四、获取非行间样式(不能用来设置):
(1)obj.currentStyle[attr]-----IE浏览器支持
(2)getComputedStyle(obj,false)[attr]------Chrome、fire fox、IE9、IE10
···false处,可以随便放任何值,如果不放则不兼容firefox低版本。如果不写第二个参数,不兼容firefox低版本;放false显得专业而已
只能取单一样式,不能取复合样式获取样式:css(oDiv,'width')设置样式:css(oDiv,'width','200px')
例一:获取样式封装
window.onload=function(){
var oBox=document.getElementById('box');
oBox.onclick=function(){
var w=parseInt(getStyle(this,'width'));
this.style.width=w+100+'px';
var oSpanH=getStyle(document.getElementById('s1'),'height');
}
}
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]; //var 和 return 必须写在行首
}
例二:函数封装和随机数配合使用
window.onload=function(){
var oBox=document.getElementById('box');
oBox.onclick=function(){
var w=parseInt(getStyle(oBox,'width'));
var r=rnd(10,100);
w+=r;
oBox.style.width=w+'px';
}
}
function rnd(n,m){
return parseInt(Math.random()*(m-n+1)+n);
}
例三:卷起广告
window.onload=function(){
var oBox=document.getElementById('box');
function fn(){
var timer=setInterval(function(){
var h=parseInt(getStyle(oBox,'height'))-10;
if(h<=0){
clearInterval(timer);
oBox.style.display='none';
}
oBox.style.height=h+'px';
},30)
}
setTimeout(fn,3000);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
五、字符串操作
1、截取字符串
(1) str.charAt(0)通过下标获取字符串第几位 兼容
str.substring(1)只传一个参数。从开始到最后
(2) str.substring(1,3)截取字符串【alert(name.ssubstring(name.lastIndexOf('.')+1));】
两参数:第一个是开始,第二个是结束位置 但不包括结束位置
str.substring(n); 截取字符串,从参数n开始到最后
2. indexOf();
indexOf() 查找字符串,返回下标,无论是输入两个还是输入词组,都只找第一个字符的下标;如果没有,则返回-1;
应用:浏览器独有的信息
window.navigator.userAgent; 找不到返回-1
if(copy.indexOf('MSIE 6.0')==-1){alert('不是IE6');}
var win=window.navigator.userAgent; //返回字符串
判断浏览器信息:
var win=window.navigator.userAgent.toLowerCase();
if(win.indexOf('Chrome')!=-1){
alert('chrome');
} else if(win.indexOf('Firefox')!=-1){
alert('f');
} else if(win.indexOf('MSIE')){
alert('ie');
} else{
alert('其它');
}
例一:
function findSame(arr,n){
if(arr.indexOf){
return arr.indexOf(n);
}
for(var i=0;i<arr.length;i++){
if(arr[i]==n){
return i;
}
}
return -1;
}
3. lastIndexOf();
从后面开始找,但同样返回下标 。 跟indexOf相反,是从后面开始找的,找不到也返回-1
应用:找一个字符串的文件扩展名
var string='a.b.cd.efg.c.d.fffd.png';
alert(string.substring(str.lastIndexOf('.')+1));
4. 字符串拆分成数组---split( )
5. 把英文字母转成大写/小写---toUpperCase()/toLowerCase();
alert(win.toUpperCase());
alert(win.toLowerCase());
var win=window.navigator.userAgent.toLowerCase();
5. 字符串排序
英文:按照字典序 alert('f'<'g'); ---->true
字符串数字:按照字典序 alert('624'>'53')-->true 先比较左侧第一位
中文:乱
相关推荐
本篇文章主要探讨的是如何使用JavaScript获取非行间样式的值,这对于理解和优化网页样式操作至关重要。 首先,我们要明白CSS样式分为行内样式、内部样式(位于`<style>`标签内)和外部样式(引用的CSS文件)。行内...
在前端开发中,获取元素的非行间样式是一个常见的需求。所谓非行间样式,通常指的是通过CSS样式表或者通过内联样式属性以外的方式设置的样式。这些样式可能会被浏览器内部通过计算得到,或者是在页面加载后通过脚本...
综上所述,本文详细讲解了JavaScript中获取非行间样式的两种方法以及如何封装成一个通用的函数,以便在不同浏览器中使用。这对于前端开发者来说非常有用,特别是在需要动态读取或改变页面上元素的样式时。需要注意的...
在JavaScript(JS)和jQuery中,获取非行间样式的方法有所不同。 在JavaScript中,获取非行间样式主要有以下两种方法: 1. `currentStyle`属性:在IE浏览器中,可以通过元素对象的`currentStyle`属性来获取元素的...
IE6与其他浏览器兼容,取非行间样式2: function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } }
在JavaScript编程中,函数封装是提高代码可读性、可维护性和重用性的关键实践。以下是一些在JS中常用且实用的函数封装方法: 1. **事件委托的封装**: ```javascript function eveEnt(child, cb) { return ...
本文将详细讲解如何使用原生JS来获取和修改CSS样式,包括行内样式、内部样式以及外部样式,同时也会涉及浏览器兼容性问题。 一、行内样式获取 行内样式是直接在HTML元素的`style`属性中定义的样式。例如: ```html ...
9. **获取非行间样式** 可以编写一个函数,利用 `window.getComputedStyle` 或 `element.currentStyle`(IE特有)来获取元素的非行内样式。 10. **事件委托** 事件委托是一种优化事件处理的方法,通过在父元素上...
9. 面向对象方法概念:面向对象方法的核心概念包括对象、消息、继承、多态和封装,过程调用是传统的程序设计概念,不属于面向对象。 10. Word视图:Word2000的状态栏中,从左到右依次是普通视图、Web版式视图、页面...
总结,JavaScript 获取 CSS 样式的方法涉及到行内样式和非行内样式。对于行内样式,直接通过`element.style.attr`获取或设置;对于非行内样式,需根据浏览器特性选择`element.currentStyle['attr']`或`...
- **`setStyle`函数**:用于获取元素的非行间样式值,兼容不同浏览器。 - **`move`函数**:封装了运动框架的核心逻辑。 - **步数计算**:`count`计算了整个动画需要多少步。 - **起始位置**:`start`变量获取了...
本文实例讲述了js获取元素外链样式的方法。分享给大家供大家参考。具体分析如下: 一般给元素设置行内样式,如”div1″ xss=removed>。如要获取它的样式,即可document.getElementById(“div1”).style.width来获取...
DTOC(DATE()) 返回日期时间的字符串表示;SUBSTR("ABCD",3,1) 也返回字符串类型。因此,这三个函数的返回值数据类型是一致的,均为字符串类型。 #### 4. 自动窗体向导的创建类型 - **知识点**: 在数据库管理软件...
- **总结**:从字符串 S 中,第二个字符开始获取 4 个字符的子字符串,正确的函数是 `Mid$(S, 2, 4)`。 #### 16. Java Application 与 Applet 的区别 - **知识点**:Java Application 和 Applet 在执行方式上有显著...