jQuery彩色计算器代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery彩色计算器代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jQuery彩色计算器代码</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="prism.css">
<link rel="stylesheet" href="SimpleCalculadorajQuery.css">
<script src="prism.js"></script>
<script src="jquery-2.1.4.min.js"></script>
<script src="SimpleCalculadorajQuery.js"></script>
</head>
<body>
<div class="container">
	<div class="row">
		<div class=" col-md-4 ">
			<div id="idCalculadora"></div>
		</div>
		<div class="col-md-6" >
			<div id="micalc"></div>
		</div>
	</div>
</div>
<script>
 $("#idCalculadora").Calculadora();
 $("#micalc").Calculadora({'EtiquetaBorrar':'Clear',TituloHTML:'<a class="btn-block btn3d btn btn-success" href="http://www.baidu.com" target="_blank">内容</a>'});
$("#CalcOptoins").Calculadora({
	EtiquetaBorrar:'Clear',
	ClaseBtns1: 'warning', /* Color Numbers*/
	ClaseBtns2: 'success', /* Color Operators*/
	ClaseBtns3: 'primary', /* Color Clear*/
	TituloHTML:'<h2>bbbccc</h2>',
	Botones:["+","-","*","/","0","1","2","3","4","5","6","7","8","9",".","="]
});
</script>
</body>
</html>

JS代码(prism.js):

/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+clike+javascript */
self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{
}
;
	var Prism=function(){
	var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={
	util:{
	encode:function(e){
	return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&amp;
	").replace(/</g,"&lt;
	").replace(/\u00a0/g," ")}
,type:function(e){
	return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]}
,clone:function(e){
	var n=t.util.type(e);
	switch(n){
	case"Object":var a={
}
;
	for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));
	return a;
	case"Array":return e.map(function(e){
	return t.util.clone(e)}
)}
return e}
}
,languages:{
	extend:function(e,n){
	var a=t.util.clone(t.languages[e]);
	for(var r in n)a[r]=n[r];
	return a}
,insertBefore:function(e,n,a,r){
	r=r||t.languages;
	var i=r[e];
	if(2==arguments.length){
	a=arguments[1];
	for(var l in a)a.hasOwnProperty(l)&&(i[l]=a[l]);
	return i}
var s={
}
;
	for(var o in i)if(i.hasOwnProperty(o)){
	if(o==n)for(var l in a)a.hasOwnProperty(l)&&(s[l]=a[l]);
	s[o]=i[o]}
return t.languages.DFS(t.languages,function(t,n){
	n===r[e]&&t!=e&&(this[t]=s)}
),r[e]=s}
,DFS:function(e,n,a){
	for(var r in e)e.hasOwnProperty(r)&&(n.call(e,r,e[r],a||r),"Object"===t.util.type(e[r])?t.languages.DFS(e[r],n):"Array"===t.util.type(e[r])&&t.languages.DFS(e[r],n,r))}
}
,highlightAll:function(e,n){
	for(var a,r=document.querySelectorAll('code[class*="language-"],[class*="language-"] code,code[class*="lang-"],[class*="lang-"] code'),i=0;
	a=r[i++];
	)t.highlightElement(a,e===!0,n)}
,highlightElement:function(a,r,i){
	for(var l,s,o=a;
	o&&!e.test(o.className);
	)o=o.parentNode;
	if(o&&(l=(o.className.match(e)||[,""])[1],s=t.languages[l]),a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=a.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l),s){
	var u=a.textContent;
	if(u){
	u=u.replace(/^(?:\r?\n|\r)/,"");
	var g={
	element:a,language:l,grammar:s,code:u}
;
	if(t.hooks.run("before-highlight",g),r&&self.Worker){
	var c=new Worker(t.filename);
	c.onmessage=function(e){
	g.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(g.element),t.hooks.run("after-highlight",g)}
,c.postMessage(JSON.stringify({
	language:g.language,code:g.code}
))}
else g.highlightedCode=t.highlight(g.code,g.grammar,g.language),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",g)}
}
}
,highlight:function(e,a,r){
	var i=t.tokenize(e,a);
	return n.stringify(t.util.encode(i),r)}
,tokenize:function(e,n){
	var a=t.Token,r=[e],i=n.rest;
	if(i){
	for(var l in i)n[l]=i[l];
	delete n.rest}
e:for(var l in n)if(n.hasOwnProperty(l)&&n[l]){
	var s=n[l];
	s="Array"===t.util.type(s)?s:[s];
	for(var o=0;
	o<s.length;
	++o){
	var u=s[o],g=u.inside,c=!!u.lookbehind,f=0,h=u.alias;
	u=u.pattern||u;
	for(var p=0;
	p<r.length;
	p++){
	var d=r[p];
	if(r.length>e.length)break e;
	if(!(d instanceof a)){
	u.lastIndex=0;
	var m=u.exec(d);
	if(m){
	c&&(f=m[1].length);
	var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];
	b&&N.push(b);
	var O=new a(l,g?t.tokenize(m,g):m,h);
	N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}
}
}
}
}
return r}
,hooks:{
	all:{
}
,add:function(e,n){
	var a=t.hooks.all;
	a[e]=a[e]||[],a[e].push(n)}
,run:function(e,n){
	var a=t.hooks.all[e];
	if(a&&a.length)for(var r,i=0;
	r=a[i++];
	)r(n)}
}
}
,n=t.Token=function(e,t,n){
	this.type=e,this.content=t,this.alias=n}
;
	if(n.stringify=function(e,a,r){
	if("string"==typeof e)return e;
	if("Array"===t.util.type(e))return e.map(function(t){
	return n.stringify(t,a,e)}
).join("");
	var i={
	type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{
}
,language:a,parent:r}
;
	if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){
	var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];
	Array.prototype.push.apply(i.classes,l)}
t.hooks.run("wrap",i);
	var s="";
	for(var o in i.attributes)s+=o+'="'+(i.attributes[o]||"")+'"';
	return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+s+">"+i.content+"</"+i.tag+">"}
,!self.document)return self.addEventListener?(self.addEventListener("message",function(e){
	var n=JSON.parse(e.data),a=n.language,r=n.code;
	self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()}
,!1),self.Prism):self.Prism;
	var a=document.getElementsByTagName("script");
	return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}
();
	"undefined"!=typeof module&&module.exports&&(module.exports=Prism);
	;
	Prism.languages.markup={
	comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{
	pattern:/<\/?[^\s>\/]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{
	tag:{
	pattern:/^<\/?[^\s>\/]+/i,inside:{
	punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}
}
,"attr-value":{
	pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{
	punctuation:/[=>"']/}
}
,punctuation:/\/?>/,"attr-name":{
	pattern:/[^\s>\/]+/,inside:{
	namespace:/^[^\s>\/:]+:/}
}
}
}
,entity:/&#?[\da-z]{
	1,8}
;
	/i}
,Prism.hooks.add("wrap",function(t){
	"entity"===t.type&&(t.attributes.title=t.content.replace(/&amp;
	/,"&"))}
);
	;
	Prism.languages.css={
	comment:/\/\*[\w\W]*?\*\//,atrule:{
	pattern:/@[\w-]+?.*?(;
	|(?=\s*\{
	))/i,inside:{
	rule:/@[\w-]+/}
}
,url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{
	\}
\s][^\{
	\}
;
	]*?(?=\s*\{
	)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){
}
;
	:]/}
,Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{
	style:{
	pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/i,inside:{
	tag:{
	pattern:/<style[\w\W]*?>|<\/style>/i,inside:Prism.languages.markup.tag.inside}
,rest:Prism.languages.css}
,alias:"language-css"}
}
),Prism.languages.insertBefore("inside","attr-value",{
	"style-attr":{
	pattern:/\s*style=("|').*?\1/i,inside:{
	"attr-name":{
	pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside}
,punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{
	pattern:/.+/i,inside:Prism.languages.css}
}
,alias:"language-css"}
}
,Prism.languages.markup.tag));
	;
	Prism.languages.clike={
	comment:[{
	pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0}
,{
	pattern:/(^|[^\\:])\/\/.*/
,lookbehind:!0}
],string:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{
	pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{
	punctuation:/(\.|\\)/}
}
,keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/,operator:/[-+]{
	1,2}
|!|<=?|>=?|={
	1,3}
|&{
	1,2}
|\|?\||\?|\*|\/|~|\^|%/,punctuation:/[{
}
[\];
	(),.:]/}
;
	;
	Prism.languages.javascript=Prism.languages.extend("clike",{
	keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/(?!\d)[a-z0-9_$]+(?=\()/i}
),Prism.languages.insertBefore("javascript","keyword",{
	regex:{
	pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{
	0,5}
(?=\s*($|[\r\n,.;
}
)]))/,lookbehind:!0}
}
),Prism.languages.insertBefore("javascript","class-name",{
	"template-string":{
	pattern:/`(?:\\`|\\?[^`])*`/,inside:{
	interpolation:{
	pattern:/\$\{
	[^}
]+\}
/,inside:{
	"interpolation-punctuation":{
	pattern:/^\$\{
	|\}
$/,alias:"punctuation"}
,rest:Prism.languages.javascript}
}
,string:/[\s\S]+/}
}
}
),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{
	script:{
	pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/i,inside:{
	tag:{
	pattern:/<script[\w\W]*?>|<\/script>/i,inside:Prism.languages.markup.tag.inside}
,rest:Prism.languages.javascript}
,alias:"language-javascript"}
}
);
	;

CSS代码(prism.css):

/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+clike+javascript */
/** * prism.js Coy theme for JavaScript,CoffeeScript,CSS and HTML * Based on https://github.com/tshedor/workshop-wp-theme (Example:http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);* @author Tim Shedor */
code[class*="language-"],pre[class*="language-"]{color:black;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}
/* Code blocks */
pre[class*="language-"]{position:relative;margin:.5em 0;-webkit-box-shadow:-1px 0px 0px 0px #358ccb,0px 0px 0px 1px #dfdfdf;-moz-box-shadow:-1px 0px 0px 0px #358ccb,0px 0px 0px 1px #dfdfdf;box-shadow:-1px 0px 0px 0px #358ccb,0px 0px 0px 1px #dfdfdf;border-left:10px solid #358ccb;background-color:#fdfdfd;background-image:-webkit-linear-gradient(transparent 50%,rgba(69,142,209,0.04) 50%);background-image:-moz-linear-gradient(transparent 50%,rgba(69,142,209,0.04) 50%);background-image:-ms-linear-gradient(transparent 50%,rgba(69,142,209,0.04) 50%);background-image:-o-linear-gradient(transparent 50%,rgba(69,142,209,0.04) 50%);background-image:linear-gradient(transparent 50%,rgba(69,142,209,0.04) 50%);background-size:3em 3em;background-origin:content-box;overflow:visible;max-height:30em;}
code[class*="language"]{max-height:inherit;height:100%;padding:0 1em;display:block;overflow:auto;}
/* Margin bottom to accomodate shadow */
:not(pre) > code[class*="language-"],pre[class*="language-"]{background-color:#fdfdfd;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:1em;}
/* Inline code */
:not(pre) > code[class*="language-"]{position:relative;padding:.2em;-webkit-border-radius:0.3em;-moz-border-radius:0.3em;-ms-border-radius:0.3em;-o-border-radius:0.3em;border-radius:0.3em;color:#c92c2c;border:1px solid rgba(0,0,0,0.1);}
pre[class*="language-"]:before,pre[class*="language-"]:after{content:'';z-index:-2;display:block;position:absolute;bottom:0.75em;left:0.18em;width:40%;height:20%;-webkit-box-shadow:0px 13px 8px #979797;-moz-box-shadow:0px 13px 8px #979797;box-shadow:0px 13px 8px #979797;-webkit-transform:rotate(-2deg);-moz-transform:rotate(-2deg);-ms-transform:rotate(-2deg);-o-transform:rotate(-2deg);transform:rotate(-2deg);}
:not(pre) > code[class*="language-"]:after,pre[class*="language-"]:after{right:0.75em;left:auto;-webkit-transform:rotate(2deg);-moz-transform:rotate(2deg);-ms-transform:rotate(2deg);-o-transform:rotate(2deg);transform:rotate(2deg);}
.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#7D8B99;}
.token.punctuation{color:#5F6364;}
.token.property,.token.tag,.token.boolean,.token.number,.token.function-name,.token.constant,.token.symbol,.token.deleted{color:#c92c2c;}
.token.selector,.token.attr-name,.token.string,.token.char,.token.function,.token.builtin,.token.inserted{color:#2f9c0a;}
.token.operator,.token.entity,.token.url,.token.variable{color:#a67f59;background:rgba(255,255,255,0.5);}
.token.atrule,.token.attr-value,.token.keyword,.token.class-name{color:#1990b8;}
.token.regex,.token.important{color:#e90;}
.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,0.5);}
.token.important{font-weight:normal;}
.token.bold{font-weight:bold;}
.token.italic{font-style:italic;}
.token.entity{cursor:help;}
.namespace{opacity:.7;}
@media screen and (max-width:767px){pre[class*="language-"]:before,pre[class*="language-"]:after{bottom:14px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
}
/* Plugin styles */
.token.tab:not(:empty):before,.token.cr:before,.token.lf:before{color:#e0d7d1;}
/* Plugin styles:Line Numbers */
pre[class*="language-"].line-numbers{padding-left:0;}
pre[class*="language-"].line-numbers code{padding-left:3.8em;}
pre[class*="language-"].line-numbers .line-numbers-rows{left:0;}
/* Plugin styles:Line Highlight */
pre[class*="language-"][data-line]{padding-top:0;padding-bottom:0;padding-left:0;}
pre[data-line] code{position:relative;padding-left:4em;}
pre .line-highlight{margin-top:0;}

附件:下载该文件资源,减少时间成本(增值服务)