日期和色彩选择器

稿源：互联网 2022-04-02 21:43:14 点击： 1299 撤稿纠错

点击输入框弹出日期选择器和一个颜色选择器效果。

以下讨论的是和点击弹出相关的日期和色彩选择器教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 一个日期与色彩选择器 站长特效网欢迎您。</title>
<style type="text/css">

</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

日期
<input name="date" type="text" size="24" maxlength="63" t="title" value="2000-1-1" onfocus="Focus('date_',this)" />
<input name="date" type="text" size="24" maxlength="63" t="title" value="2000-1-1" onfocus="Focus('date_',this)" />
<input name="date" type="text" size="24" maxlength="63" t="title" value="2009-1-1" onfocus="Focus('date_',this)" />
<input name="date" type="text" size="24" maxlength="63" t="title" value="2000-1-1" onfocus="Focus('date_',this)" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />色彩
<input name="date" type="text" size="24" maxlength="63" t="title" value="#FFFFFF" onfocus="Focus('color_',this)" />
<input name="date" type="text" size="24" maxlength="63" t="title" value="#FFFFFF" onfocus="Focus('color_',this)" />
<input name="date" type="text" size="24" maxlength="63" t="title" value="#FFFFFF" onfocus="Focus('color_',this)" />
<input name="date" type="text" size="24" maxlength="63" t="title" value="#FFFFFF" onfocus="Focus('color_',this)" />
<script type="text/javascript">
$tmp=[];
function $(id,n){return n==null?document.getElementById(id):document.getElementsByName(id)[n]}
//日期
function DATE(id){
temp('<table id="'+id+'" title="" summary="" onclick="date_(event,this.title,this.id)" style="display:none;position:absolute;top:-200px;left:-800px;font-size:12px;line-height:12px;background:#DDD;border:1px solid #CCC;padding:0px;" cellspacing="1"><col style="color:#FF0000" /><col span="5" /><col style="color:#FF0000" /><tr><th onclick="date(this.parentNode.parentNode.parentNode.id,this.parentNode.parentNode.parentNode.title,1)">《</th><th onclick="date(this.parentNode.parentNode.parentNode.id,this.parentNode.parentNode.parentNode.title,2)">〈</th><td colspan="3"></td><th onclick="date(this.parentNode.parentNode.parentNode.id,this.parentNode.parentNode.parentNode.title,3)">〉</th><th onclick="date(this.parentNode.parentNode.parentNode.id,this.parentNode.parentNode.parentNode.title,4)">》</th></tr>'+'<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr><tbody bgcolor="#FFFFFF"><tr><td></td><td></td><td></td><td></td><td></td><td></td><td>　</td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td>　</td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td>　</td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td>　</td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td>　</td></tr><tr><td></td><td></td><td></td><td>年</td><td>月</td><td>关</td><td>今</td></tr></tbody></table>');
date(id)}
function date(id,date,t){
var D=new Date(),o=$(id);if(arguments.length>1){s=date.split(/D+/i);for(i=s.length;i<3;)s[i++]=1;if(s[1])s[1]--;
if(arguments.length>2){if(t==1)s[0]--;if(t==2)s[1]--;if(t==3)s[1]++;if(t==4)s[0]++;}D=new Date(s[0],s[1],s[2]);}
var y=D.getFullYear(),m=D.getMonth()+1,d=D.getDate(),w=D.getDay(),w=D.getDay();o.title=y+'-'+m;
var M=[0,31,(y%4==0&&y%100!=0)||y%400==0?29:28,31,30,31,30,31,31,30,31,30,31],l=(36+w-d)%7;
for(o=o.getElementsByTagName("td"),l1=l+M[m]+1,i=1;i<38;i++){o[i].innerText=(i>l&&i<l1)?i-l:'　';o[i].style.backgroundColor=i-l==d?'#f66':'';}o[0].innerText=y+'-'+m;}
function date_(event,s,id){var O=$tmp[id],o=event.srcElement?event.srcElement:event.originalTarget;if (o.nodeName.toLowerCase()=='td')
{if(o.innerHTML=='关')o.parentNode.parentNode.parentNode.style.left='-900px';if(o.innerHTML=='今')date(id);
$s=parseInt(o.innerHTML);if(!isNaN($s)&&$s>0&&$s<32){O.value=s+'-'+$s;o.parentNode.parentNode.parentNode.style.left='-900px';}}}
function Focus(id,o){$tmp[id]=o;var t=o.offsetTop+o.offsetHeight,l=o.offsetLeft;while(o=o.offsetParent){t+=o.offsetTop;l+=o.offsetLeft;}
var c=$(id);if(c){c.style.left= l+'px';c.style.top= t+'px';c.style.display='block';c.focus();$tmp[id+'_xy']=l+','+t}}
//色彩
function color(id){var t=[],r=['fc','96','30'],g='fc96300369cf',b='fc96300369cffc9630',I=0;for(i=0;i<12;i++){for(l=0;l<18;l++)t[++I]=r[parseInt(l/6)].charAt(parseInt(i/6))+g.charAt(i)+b.charAt(l);t[I]+='</tr>n<tr>';}t[I]=t[I].slice(0,3);
temp('<table id="'+id+'" onclick="color_(event,''+id+'')" style="position:absolute;left:-900px;top:500px" width="180" height="120" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"><caption style="background:#ccc;font-size:12px;">关闭</caption>n<tr>'+t.join('').replace(/([fc9630])([fc9630])([fc9630])/gm,'<td bgcolor="#$1$1$2$2$3$3"></td>')+'</tr>n</table>');}
function color_(event,id){var O=$tmp[id],o=event.srcElement?event.srcElement:event.originalTarget;if(o.nodeName.toLowerCase()=='td'&&O!=null)
{O.value=o.bgColor;O.style.backgroundColor=o.bgColor;o.parentNode.parentNode.parentNode.style.left='-900px';}if (o.nodeName.toLowerCase()=='caption'&&O!=null)o.parentNode.style.left='-900px';}
function temp(s){if(!$('_temp_'))
{var o=document.createElement("div");document.body.appendChild(o);
//o.style.display='none';
o.id='_temp_';
o.style.position='absolute';
//o.style.left='-900px';
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
$('_temp_').insertAdjacentHTML('afterEnd',s)}
/*@cc_on window.onunload=CollectGarbage;@*/
/*@if(@_jscript)
document.nativeGetElementById=document.getElementById;document.getElementById = function(id){ var elem = document.nativeGetElementById(id);if(elem){if(elem.attributes['id'].value==id){return elem;}else{for(var i=1;i<document.all[id].length;i++){if(document.all[id][i].attributes['id'].value == id){return document.all[id][i];}}}} return null;};
//$("__ie_onload").onreadystatechange=function(){if(this.readyState == "complete")init();};
@else @*/    //Firefox不支持条件注释    //document.addEventListener("DOMContentLoaded", init, false); //在DOM调用完后调用init
HTMLElement.prototype.insertAdjacentHTML=function(where,htmlStr){var r=this.ownerDocument.createRange();r.setStartBefore(this);this.insertAdjacentElement(where,r.createContextualFragment(htmlStr))}
HTMLElement.prototype.insertAdjacentElement=function(where,o){switch(where){case "beforeBegin":this.parentNode.insertBefore(o,this);break;case "afterBegin":this.insertBefore(o,this.firstChild);
break;case "beforeEnd":this.appendChild(o);break;case "afterEnd":if(this.nextSibling)this.parentNode.insertBefore(o,this.nextSibling);else this.parentNode.appendChild(o);break}}
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){ var r=this.ownerDocument.createRange();r.setStartBefore(this);var df=r.createContextualFragment(sHTML);this.parentNode.replaceChild(df,this);return sHTML});
HTMLElement.prototype.__defineGetter__("outerHTML",function(){var attr,attrs=this.attributes,str="<"+this.tagName;for(var i=0;i<attrs.length;i++){attr=attrs[i];if(attr.specified)str+=" "+attr.name+'="'+attr.value+'"'}return str+">"+this.innerHTML+"</"+this.tagName+">"; });
HTMLElement.prototype.__defineSetter__("innerText",function(sHTML){this.textContent=sHTML;});
/*@end @*/
DATE('date_');color('color_');
</script>
</body>
</html>

关于日期和色彩选择器的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091564673.shtml方便下次再访问哦。

·上一篇： 点击广告图片后才显示下载地址
·下一篇： 鼠标感应隔行换色效果

日期和色彩选择器

文章分类LIST >>返回首页

最新游戏

最新新闻