js 调取能调取手机系统的日历功能吗
1个回答
展开全部
日期控件，主要使用js的Date对象。下面是简单是日期控件，仅供参考：
<style>
* { margin:0; padding:0; }
.calander { position:relative; width:210px; border:1px solid red; margin:50px auto; }
.calander a { position:absolute; top:0; height:40px; line-height:40px; }
.calander .prev { left:0; padding-left:10px; }
.calander .next { right:0; padding-right:10px; }
.calander span { display:block; height:40px; line-height:40px; text-align:center; font-weight:bold; }
.calander ul, .calander ol { overflow:hidden; }
.calander li { float:left; width:30px; height:30px; line-height:30px; text-align:center; list-style:none; }
.calander .week { color:#f40; }
.calander .today { color:blue; }
.calander .past { color:#ccc; }
</style>
<script>
window.onload=function (){
var oDiv=document.getElementById('calander');
var oSpan=oDiv.getElementsByTagName('span')[0];
var oUl=oDiv.getElementsByTagName('ul')[0];
var oPrev=oDiv.getElementsByTagName('a')[0];
var oNext=oDiv.getElementsByTagName('a')[1];
var now=0;
create();
oNext.onclick=function (){
now++;
create();
};
function create()
{
oUl.innerHTML='';
// span
var oDate=new Date(); // ?
oDate.setMonth(oDate.getMonth()+now, 1);
var y=oDate.getFullYear();
var m=oDate.getMonth();
oSpan.innerHTML=y+'年'+(m+1)+'月';
// 创建空格
var oDate=new Date(); // ?
oDate.setMonth(oDate.getMonth()+now, 1);
oDate.setDate(1);
var week=oDate.getDay(); // 0-6
(week==0) && (week=7);
for (var i=0; i<week-1; i++)
{
var oLi=document.createElement('li');
oUl.appendChild(oLi);
}
// 创建真正日期
var oDate=new Date();//?
oDate.setMonth(oDate.getMonth()+now, 1);
oDate.setMonth(oDate.getMonth()+1, 0);
var total=oDate.getDate();
for (var i=0; i<total; i++)
{
var oLi=document.createElement('li');
oLi.innerHTML=i+1;
oUl.appendChild(oLi);
}
// 处理周末
var aLi=oUl.children;
for (var i=0; i<aLi.length; i++)
{
if (i%7==5 || i%7==6)
{
aLi[i].className='week';
}
}
// 今天
if (now == 0)
{
var oDate=new Date();
for (var i=0; i<aLi.length; i++)
{
if (aLi[i].innerHTML == oDate.getDate())
{
aLi[i].className='today';
}
else if (aLi[i].innerHTML < oDate.getDate())
{
aLi[i].className='past';
}
}
}
}
};
</script>
</head>
<body>
<div class="calander" id="calander">
<a href="javascript:;" class="prev">←</a>
<a href="javascript:;" class="next">→</a>
<span>2015年04月</span>
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li class="week">六</li>
<li class="week">日</li>
</ol>
<ul>
</ul>
</div>
</body>
<style>
* { margin:0; padding:0; }
.calander { position:relative; width:210px; border:1px solid red; margin:50px auto; }
.calander a { position:absolute; top:0; height:40px; line-height:40px; }
.calander .prev { left:0; padding-left:10px; }
.calander .next { right:0; padding-right:10px; }
.calander span { display:block; height:40px; line-height:40px; text-align:center; font-weight:bold; }
.calander ul, .calander ol { overflow:hidden; }
.calander li { float:left; width:30px; height:30px; line-height:30px; text-align:center; list-style:none; }
.calander .week { color:#f40; }
.calander .today { color:blue; }
.calander .past { color:#ccc; }
</style>
<script>
window.onload=function (){
var oDiv=document.getElementById('calander');
var oSpan=oDiv.getElementsByTagName('span')[0];
var oUl=oDiv.getElementsByTagName('ul')[0];
var oPrev=oDiv.getElementsByTagName('a')[0];
var oNext=oDiv.getElementsByTagName('a')[1];
var now=0;
create();
oNext.onclick=function (){
now++;
create();
};
function create()
{
oUl.innerHTML='';
// span
var oDate=new Date(); // ?
oDate.setMonth(oDate.getMonth()+now, 1);
var y=oDate.getFullYear();
var m=oDate.getMonth();
oSpan.innerHTML=y+'年'+(m+1)+'月';
// 创建空格
var oDate=new Date(); // ?
oDate.setMonth(oDate.getMonth()+now, 1);
oDate.setDate(1);
var week=oDate.getDay(); // 0-6
(week==0) && (week=7);
for (var i=0; i<week-1; i++)
{
var oLi=document.createElement('li');
oUl.appendChild(oLi);
}
// 创建真正日期
var oDate=new Date();//?
oDate.setMonth(oDate.getMonth()+now, 1);
oDate.setMonth(oDate.getMonth()+1, 0);
var total=oDate.getDate();
for (var i=0; i<total; i++)
{
var oLi=document.createElement('li');
oLi.innerHTML=i+1;
oUl.appendChild(oLi);
}
// 处理周末
var aLi=oUl.children;
for (var i=0; i<aLi.length; i++)
{
if (i%7==5 || i%7==6)
{
aLi[i].className='week';
}
}
// 今天
if (now == 0)
{
var oDate=new Date();
for (var i=0; i<aLi.length; i++)
{
if (aLi[i].innerHTML == oDate.getDate())
{
aLi[i].className='today';
}
else if (aLi[i].innerHTML < oDate.getDate())
{
aLi[i].className='past';
}
}
}
}
};
</script>
</head>
<body>
<div class="calander" id="calander">
<a href="javascript:;" class="prev">←</a>
<a href="javascript:;" class="next">→</a>
<span>2015年04月</span>
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li class="week">六</li>
<li class="week">日</li>
</ol>
<ul>
</ul>
</div>
</body>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
