HTML
导入代码模板：
if (window.addEventListener) {
window.addEventListener("resize", browserResize);
} else if (window.attachEvent) {
window.attachEvent("onresize", browserResize);
}
var xbeforeResize = window.innerWidth;
function browserResize() {
var afterResize = window.innerWidth;
if ((xbeforeResize < (970) && afterResize >= (970)) || (xbeforeResize >= (970) && afterResize < (970)) ||
(xbeforeResize < (728) && afterResize >= (728)) || (xbeforeResize >= (728) && afterResize < (728)) ||
(xbeforeResize < (468) && afterResize >= (468)) || (xbeforeResize >= (468) && afterResize < (468))) {
xbeforeResize = afterResize;
googletag.cmd.push(function() {
googletag.pubads().refresh([gptAdSlots[0]]);
});
}
}
/*! jQuery Color v@2.1.2 https://github.com/jquery/jquery-color | jquery.org/license */
(function(a, b) {
function m(a, b, c) {
var d = h[b.type] || {};
return a == null ? c || !b.def ? null : b.def : (a = d.floor ? ~~a : parseFloat(a), isNaN(a) ? b.def : d.mod ? (a + d.mod) % d.mod : 0 > a ? 0 : d.max < a ? d.max : a)
}
function n(b) {
var c = f(),
d = c._rgba = [];
return b = b.toLowerCase(), l(e, function(a, e) {
var f, h = e.re.exec(b),
i = h && e.parse(h),
j = e.space || "rgba";
if (i) return f = c[j](i), c[g[j].cache] = f[g[j].cache], d = c._rgba = f._rgba, !1
}), d.length ? (d.join() === "0,0,0,0" && a.extend(d, k.transparent), c) : k[b]
}
function o(a, b, c) {
return c = (c + 1) % 1, c * 6 < 1 ? a + (b - a) * c * 6 : c * 2 < 1 ? b : c * 3 < 2 ? a + (b - a) * (2 / 3 - c) * 6 : a
}
var c = "backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",
d = /^([\-+])=\s*(\d+\.?\d*)/,
e = [{
re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
parse: function(a) {
return [a[1], a[2], a[3], a[4]]
}
}, {
re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
parse: function(a) {
return [a[1] * 2.55, a[2] * 2.55, a[3] * 2.55, a[4]]
}
}, {
re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,
parse: function(a) {
return [parseInt(a[1], 16), parseInt(a[2], 16), parseInt(a[3], 16)]
}
}, {
re: /#([a-f0-9])([a-f0-9])([a-f0-9])/,
parse: function(a) {
return [parseInt(a[1] + a[1], 16), parseInt(a[2] + a[2], 16), parseInt(a[3] + a[3], 16)]
}
}, {
re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
space: "hsla",
parse: function(a) {
return [a[1], a[2] / 100, a[3] / 100, a[4]]
}
}],
f = a.Color = function(b, c, d, e) {
return new a.Color.fn.parse(b, c, d, e)
},
g = {
rgba: {
props: {
red: {
idx: 0,
type: "byte"
},
green: {
idx: 1,
type: "byte"
},
blue: {
idx: 2,
type: "byte"
}
}
},
hsla: {
props: {
hue: {
idx: 0,
type: "degrees"
},
saturation: {
idx: 1,
type: "percent"
},
lightness: {
idx: 2,
type: "percent"
}
}
}
},
h = {
"byte": {
floor: !0,
max: 255
},
percent: {
max: 1
},
degrees: {
mod: 360,
floor: !0
}
},
i = f.support = {},
j = a("
")[0],
k, l = a.each;
j.style.cssText = "background-color:rgba(1,1,1,.5)", i.rgba = j.style.backgroundColor.indexOf("rgba") > -1, l(g, function(a, b) {
b.cache = "_" + a, b.props.alpha = {
idx: 3,
type: "percent",
def: 1
}
}), f.fn = a.extend(f.prototype, {
parse: function(c, d, e, h) {
if (c === b) return this._rgba = [null, null, null, null], this;
if (c.jquery || c.nodeType) c = a(c).css(d), d = b;
var i = this,
j = a.type(c),
o = this._rgba = [];
d !== b && (c = [c, d, e, h], j = "array");
if (j === "string") return this.parse(n(c) || k._default);
if (j === "array") return l(g.rgba.props, function(a, b) {
o[b.idx] = m(c[b.idx], b)
}), this;
if (j === "object") return c instanceof f ? l(g, function(a, b) {
c[b.cache] && (i[b.cache] = c[b.cache].slice())
}) : l(g, function(b, d) {
var e = d.cache;
l(d.props, function(a, b) {
if (!i[e] && d.to) {
if (a === "alpha" || c[a] == null) return;
i[e] = d.to(i._rgba)
}
i[e][b.idx] = m(c[a], b, !0)
}), i[e] && a.inArray(null, i[e].slice(0, 3)) < 0 && (i[e][3] = 1, d.from && (i._rgba = d.from(i[e])))
}), this
},
is: function(a) {
var b = f(a),
c = !0,
d = this;
return l(g, function(a, e) {
var f, g = b[e.cache];
return g && (f = d[e.cache] || e.to && e.to(d._rgba) || [], l(e.props, function(a, b) {
if (g[b.idx] != null) return c = g[b.idx] === f[b.idx], c
})), c
}), c
},
_space: function() {
var a = [],
b = this;
return l(g, function(c, d) {
b[d.cache] && a.push(c)
}), a.pop()
},
transition: function(a, b) {
var c = f(a),
d = c._space(),
e = g[d],
i = this.alpha() === 0 ? f("transparent") : this,
j = i[e.cache] || e.to(i._rgba),
k = j.slice();
return c = c[e.cache], l(e.props, function(a, d) {
var e = d.idx,
f = j[e],
g = c[e],
i = h[d.type] || {};
if (g === null) return;
f === null ? k[e] = g : (i.mod && (g - f > i.mod / 2 ? f += i.mod : f - g > i.mod / 2 && (f -= i.mod)), k[e] = m((g - f) * b + f, d))
}), this[d](k)
},
blend: function(b) {
if (this._rgba[3] === 1) return this;
var c = this._rgba.slice(),
d = c.pop(),
e = f(b)._rgba;
return f(a.map(c, function(a, b) {
return (1 - d) * e[b] + d * a
}))
},
toRgbaString: function() {
var b = "rgba(",
c = a.map(this._rgba, function(a, b) {
return a == null ? b > 2 ? 1 : 0 : a
});
return c[3] === 1 && (c.pop(), b = "rgb("), b + c.join() + ")"
},
toHslaString: function() {
var b = "hsla(",
c = a.map(this.hsla(), function(a, b) {
return a == null && (a = b > 2 ? 1 : 0), b && b < 3 && (a = Math.round(a * 100) + "%"), a
});
return c[3] === 1 && (c.pop(), b = "hsl("), b + c.join() + ")"
},
toHexString: function(b) {
var c = this._rgba.slice(),
d = c.pop();
return b && c.push(~~(d * 255)), "#" + a.map(c, function(a) {
return a = (a || 0).toString(16), a.length === 1 ? "0" + a : a
}).join("")
},
toString: function() {
return this._rgba[3] === 0 ? "transparent" : this.toRgbaString()
}
}), f.fn.parse.prototype = f.fn, g.hsla.to = function(a) {
if (a[0] == null || a[1] == null || a[2] == null) return [null, null, null, a[3]];
var b = a[0] / 255,
c = a[1] / 255,
d = a[2] / 255,
e = a[3],
f = Math.max(b, c, d),
g = Math.min(b, c, d),
h = f - g,
i = f + g,
j = i * .5,
k, l;
return g === f ? k = 0 : b === f ? k = 60 * (c - d) / h + 360 : c === f ? k = 60 * (d - b) / h + 120 : k = 60 * (b - c) / h + 240, h === 0 ? l = 0 : j <= .5 ? l = h / i : l = h / (2 - i), [Math.round(k) % 360, l, j, e == null ? 1 : e]
}, g.hsla.from = function(a) {
if (a[0] == null || a[1] == null || a[2] == null) return [null, null, null, a[3]];
var b = a[0] / 360,
c = a[1],
d = a[2],
e = a[3],
f = d <= .5 ? d * (1 + c) : d + c - d * c,
g = 2 * d - f;
return [Math.round(o(g, f, b + 1 / 3) * 255), Math.round(o(g, f, b) * 255), Math.round(o(g, f, b - 1 / 3) * 255), e]
}, l(g, function(c, e) {
var g = e.props,
h = e.cache,
i = e.to,
j = e.from;
f.fn[c] = function(c) {
i && !this[h] && (this[h] = i(this._rgba));
if (c === b) return this[h].slice();
var d, e = a.type(c),
k = e === "array" || e === "object" ? c : arguments,
n = this[h].slice();
return l(g, function(a, b) {
var c = k[e === "object" ? a : b.idx];
c == null && (c = n[b.idx]), n[b.idx] = m(c, b)
}), j ? (d = f(j(n)), d[h] = n, d) : f(n)
}, l(g, function(b, e) {
if (f.fn[b]) return;
f.fn[b] = function(f) {
var g = a.type(f),
h = b === "alpha" ? this._hsla ? "hsla" : "rgba" : c,
i = this[h](),
j = i[e.idx],
k;
return g === "undefined" ? j : (g === "function" && (f = f.call(this, j), g = a.type(f)), f == null && e.empty ? this : (g === "string" && (k = d.exec(f), k && (f = j + parseFloat(k[2]) * (k[1] === "+" ? 1 : -1))), i[e.idx] = f, this[h](i)))
}
})
}), f.hook = function(b) {
var c = b.split(" ");
l(c, function(b, c) {
a.cssHooks[c] = {
set: function(b, d) {
var e, g, h = "";
if (d !== "transparent" && (a.type(d) !== "string" || (e = n(d)))) {
d = f(e || d);
if (!i.rgba && d._rgba[3] !== 1) {
g = c === "backgroundColor" ? b.parentNode : b;
while ((h === "" || h === "transparent") && g && g.style) try {
h = a.css(g, "backgroundColor"), g = g.parentNode
} catch (j) {}
d = d.blend(h && h !== "transparent" ? h : "_default")
}
d = d.toRgbaString()
}
try {
b.style[c] = d
} catch (j) {}
}
}, a.fx.step[c] = function(b) {
b.colorInit || (b.start = f(b.elem, c), b.end = f(b.end), b.colorInit = !0), a.cssHooks[c].set(b.elem, b.start.transition(b.end, b.pos))
}
})
}, f.hook(c), a.cssHooks.borderColor = {
expand: function(a) {
var b = {};
return l(["Top", "Right", "Bottom", "Left"], function(c, d) {
b["border" + d + "Color"] = a
}), b
}
}, k = a.Color.names = {
aqua: "#00ffff",
black: "#000000",
blue: "#0000ff",
fuchsia: "#ff00ff",
gray: "#808080",
green: "#008000",
lime: "#00ff00",
maroon: "#800000",
navy: "#000080",
olive: "#808000",
purple: "#800080",
red: "#ff0000",
silver: "#c0c0c0",
teal: "#008080",
white: "#ffffff",
yellow: "#ffff00",
transparent: [null, null, null, 0],
_default: "#ffffff"
}
})(jQuery);
var resultHTML = "",
currentSelector = "",
w3Sels = [];
w3Sels.push(".intro");
w3Sels.push("#Lastname");
w3Sels.push(".intro, #Lastname");
w3Sels.push("h1");
w3Sels.push("h1, p");
w3Sels.push("div p");
w3Sels.push("div > p");
w3Sels.push("ul + h3");
w3Sels.push("ul ~ table");
w3Sels.push("*");
w3Sels.push("[id]");
w3Sels.push("[id=my-Address]");
w3Sels.push("[id$=ess]");
w3Sels.push("[id|=my]");
w3Sels.push("[id^=L]");
w3Sels.push("[title~=beautiful]");
w3Sels.push("[id*=s]");
w3Sels.push(":checked");
w3Sels.push(":disabled");
w3Sels.push(":enabled");
w3Sels.push(":empty");
w3Sels.push(":focus");
w3Sels.push("p:first-child");
w3Sels.push("p::first-letter");
w3Sels.push("p::first-line");
w3Sels.push("p:first-of-type");
w3Sels.push("h1:hover");
w3Sels.push("input:in-range");
w3Sels.push("input:out-of-range");
w3Sels.push("input:invalid");
w3Sels.push("input:valid");
w3Sels.push("p:lang(it)");
w3Sels.push("p:last-child");
w3Sels.push("p:last-of-type");
w3Sels.push("tr:nth-child(even)");
w3Sels.push("tr:nth-child(odd)");
w3Sels.push("li:nth-child(1)");
w3Sels.push("li:nth-last-child(1)");
w3Sels.push("li:nth-of-type(2)");
w3Sels.push("li:nth-last-of-type(2)");
w3Sels.push("b:only-child");
w3Sels.push("h3:only-of-type");
w3Sels.push("ul li:eq(0)");
w3Sels.push("ul li:gt(0)");
w3Sels.push("ul li:lt(2)");
w3Sels.push("li:not(:eq(1))");
w3Sels.push(":root");
var w3SelDescriptions = [];
w3SelDescriptions.push('All elements with class="intro"');
w3SelDescriptions.push('The element with id="Lastname"');
w3SelDescriptions.push('All elements with class="intro", and the element with id="Lastname"');
w3SelDescriptions.push('All <h1> elements.');
w3SelDescriptions.push('All <h1> elements and all <p> elements.');
w3SelDescriptions.push('All <p> elements that are inside a <div> element.');
w3SelDescriptions.push('All <p> elements where the parent is a <div> element.');
w3SelDescriptions.push('The <h3> element that are next to each <ul> elements.');
w3SelDescriptions.push('All <table> elements that are siblings of a <ul> element.');
w3SelDescriptions.push("All elements.");
w3SelDescriptions.push('All elements with an id attribute.');
w3SelDescriptions.push('All elements with an id attribute value equal to "my-Address"');
w3SelDescriptions.push('All elements with an id attribute value ending with "ess"');
w3SelDescriptions.push('All elements with an id attribute value equal to "my" or starting with "my" followed by a hyphen (-)');
w3SelDescriptions.push('All elements with an id attribute value starting with the letter "L"');
w3SelDescriptions.push('All elements with a title attribute value containing the word "beautiful"');
w3SelDescriptions.push('All elements with an id attribute value containing the string "s"');
w3SelDescriptions.push("All checked form elements.");
w3SelDescriptions.push("All disabled form elements.");
w3SelDescriptions.push("All enabled form elements.");
w3SelDescriptions.push('All empty elements
(like <input />)');
w3SelDescriptions.push('The element that currently has focus.');
w3SelDescriptions.push('All <p> elements that are the first child of their parent.');
w3SelDescriptions.push('The first letter of all <p> elements.');
w3SelDescriptions.push('The first line of all <p> elements.');
w3SelDescriptions.push('All <p> elements that are the first <p> element of their parent.');
w3SelDescriptions.push('All <h1> elements, but only when you hover them.
Try hover (mouse over) the H1 element in the result.');
w3SelDescriptions.push('All <input> elements with a max and/or min value, where the value is within the specific range.
Try typing a number higher than 10, and you will see the styling disappear.
Note: This selector does not work in IE 9 and earlier.
');w3SelDescriptions.push('All <input> elements with a max and/or min value, where the value is outside the specific range.
Try typing in the "Your lucky number" field, and if you are out of range, the styling will appear.
Note: This selector does not work in IE 9 and earlier.
');w3SelDescriptions.push('All <input> elements where the value is invalid according to their limitations.
Try typing in the input fields, and if your input is invalid, the styling will appear.
Note: This selector does not work in IE 9 and earlier.
');w3SelDescriptions.push('All <input> elements where the value is valid according to their limitations.
Try typing in the input fields, and if your input is invalid, the styling will disappear.
Note: This selector does not work in IE 9 and earlier.
');w3SelDescriptions.push('All <p> elements with a lang attribute value starting with "it"');
w3SelDescriptions.push('All <p> elements that are the last child of their parent.');
w3SelDescriptions.push('All <p> elements that are the last <p> element of their parent.');
w3SelDescriptions.push('All even <tr> elements.');
w3SelDescriptions.push('All odd <tr> elements.');
w3SelDescriptions.push('All <li> elements that are the first child of their parent.');
w3SelDescriptions.push('All <li> elements that are the first child of their parent, counting from the <li> element.');
w3SelDescriptions.push('All <li> elements that are the second <li> element of their parent.');
w3SelDescriptions.push('All <li> elements that are the second <li> element of their parent, counting from the <li> element.');
w3SelDescriptions.push('All <b> elements that are the only child of their parent.');
w3SelDescriptions.push('All <h3> elements that are the only child of its type, of their parent.');
w3SelDescriptions.push('The first <li> element of <ul> elements (index starts at 0).');
w3SelDescriptions.push('All <li> elements of <ul> elements with an index greater than 0.');
w3SelDescriptions.push('All <li> elements of <ul> elements with an index less than 2.');
w3SelDescriptions.push('All <li> elements that is not the second child element (index starts at 0).');
w3SelDescriptions.push('The document’s root element.');
function w3jQuerySelectorLoad() {
var l = w3Sels.length,
x = "";
for (i = 0; i < l; i++) {
x = x + "
}
document.getElementById("selectorOptions").innerHTML = x;
clickSelOpt('h1');
}
function clickSelOpt(sel) {
var l = w3Sels.length,
ll, x, y, z, patt, arrPos, i, cc, dd;
currentSelector = sel;
if (resultHTML !== "") {
document.getElementById("iframeResult").innerHTML = resultHTML;
resultHTML = "";
}
z = document.getElementById("selectorOptions").getElementsByTagName("DIV");
for (i = 0; i < z.length; i++) {
z[i].style.fontWeight = "normal";
}
$("#iframeResult p").css("background-color", "");
$("#iframeResult p").css("borderColor", "");
for (i = 0; i < l; i++) {
if (w3Sels[i] !== "p::first-letter" && w3Sels[i] !== "p::first-line" && w3Sels[i] !== "input:in-range" && w3Sels[i] !== "input:out-of-range" && w3Sels[i] !== "input:invalid" && w3Sels[i] !== "input:valid") {
$("#iframeResult " + w3Sels[i] + " :not(.noSel)").css("background-color", "");
$("#iframeResult " + w3Sels[i] + " :not(.noSel)").css("borderColor", "");
}
if (w3Sels[i] === sel) {
arrPos = i;
}
}
$("option").css("color", "black");
$("#iframeResult .newsletter").css("border-color", "#0099FF");
$("#iframeResult .newsletter").css("background-color", "#99D6FF");
document.getElementById("selectorDescription").style.display = "block";
document.getElementById("selectorDescription").innerHTML = "
Selector:
" + w3Sels[arrPos] + "
" + w3SelDescriptions[arrPos] + "
";$("#iframeResult :radio").css("outlineColor", "transparent");
$("#iframeResult :checkbox").css("outlineColor", "transparent");
$("select").css("color", "#000000");
paintElements(sel, 1);
if (sel === ":focus") {
document.getElementsByTagName("INPUT")[0].focus();
}
if (sel === ":root") {
markSelector("#iframeResult");
} else {
document.getElementById("iframeResult").style.backgroundColor = "";
document.getElementById("iframeResult").style.borderColor = "";
}
patt = /,/g;
x = "#iframeResult " + sel;
if (sel === "*") {
x = "#helpIntro,#iframeResult p,#Lastname,#iframeResult .helpUl,#iframeResult li,#iframeResult .helpTable,#iframeResult tr,#iframeResult td,#iframeResult th,#iframeResult .helpHref,#iframeResult .newsletter,#iframeResult input,#iframeResult"
if (sel === "*") {
x = x + ",#iframeResult :text";
}
markSelector(x, sel);
if (sel === "*") {
x = "#iframeResult :radio,#iframeResult :checkbox";
markRadioSelector(x);
}
return;
}
if (sel === ":empty") {
//x = "#iframeResult :text";
x = "#iframeResult input";
markSelector(x, sel);
x = "#iframeResult :radio,#iframeResult :checkbox";
markRadioSelector(x);
return;
}
if (sel === "p::first-letter") {
resultHTML = document.getElementById("iframeResult").innerHTML;
x = document.getElementsByTagName("p");
ll = x.length;
for (i = 0; i < ll; i++) {
cc = x[i].innerHTML;
if (cc.indexOf('<p><b>') > -1) {
x[i].innerHTML = "<p><b>" + cc.substr(83, 1) + "" + cc.substr(84);
} else if (cc.indexOf('<p>') > -1) {
x[i].innerHTML = "<p>" + cc.substr(37, 1) + "" + cc.substr(38);
} else if (cc.indexOf('<p id="my-Address">') > -1) {
x[i].innerHTML = '<p id="my-Address">' + cc.substr(53, 1) + "" + cc.substr(54);
} else if (cc.indexOf('<p lang="it" title="Hello beautiful">') > -1) {
x[i].innerHTML = '<p lang="it" title="Hello beautiful">' + cc.substr(71, 1) + "" + cc.substr(72);
}
}
paintElements(sel, 2);
return;
}
if (sel === "p::first-line") {
resultHTML = document.getElementById("iframeResult").innerHTML;
x = document.getElementsByTagName("p");
ll = x.length;
for (i = 0; i < ll; i++) {
cc = x[i].innerHTML;
if (cc.indexOf('All my friends are great!') > -1) {
x[i].innerHTML = '<p>All my friends are great!<br>
But I really like Daisy!!</p>';
} else if (cc.indexOf('Ciao bella') > -1) {
x[i].innerHTML = cc.replace("Ciao bella", 'Ciao bella');
} else if (cc.indexOf('My latest disco') > -1) {
x[i].innerHTML = cc.replace("My latest discoveries has led me to believe that we are all animals:", 'My latest discoveries has led me to believe that we are all animals:');
} else if (cc.indexOf('I have many friends') > -1) {
x[i].innerHTML = cc.replace("I have many friends:", 'I have many friends:');
} else if (cc.indexOf('I live in Duckburg') > -1) {
x[i].innerHTML = cc.replace("I live in Duckburg", 'I live in Duckburg');
} else if (cc.indexOf('My name is Donald') > -1) {
x[i].innerHTML = '<p>My name is Donald <span id="Lastname">Duck.</span></p>'
}
}
paintElements(sel, 2);
return;
}
if (sel === "h1:hover") {
$("h1").hover(function() {
$("h1").css("background-color", "#FFFF99");
$("h1").css("border-color", "#FF6666");
}, function() {
$("h1").css("background-color", "");
$("h1").css("border-color", "");
});
} else {
$("h1").hover(function() {
$("h1").css("background-color", "");
$("h1").css("border-color", "");
}, function() {
$("h1").css("background-color", "");
$("h1").css("border-color", "");
});
}
if (sel === ".intro") {
x = "#iframeResult #helpIntro";
}
if (sel === ".intro, #Lastname") {
x = "#iframeResult #helpIntro, #Lastname";
}
if (sel === "div > p") {
x = "#iframeResult div.intro > p";
}
if (sel === "div p") {
x = "#iframeResult div.intro p";
}
if (sel === "[id^=L]") {
x = "#iframeResult #Lastname, .helpUl";
}
x = x.replace(patt, ",#iframeResult ");
if (sel === ":radio" || sel === ":checkbox" || sel === ":checked") {
markRadioSelector(x);
} else {
y = x + ":not(.noSel)";
markSelector(y, sel);
if (sel === ":input" || sel === ":enabled" || sel === ":disabled" || sel === "*") {
markRadioSelector(x);
}
}
}
function paintElements(sel, n) {
if (n === 2 && sel !== "tr:nth-child(even)" && sel !== "tr:nth-child(odd)") {
$("#iframeResult tr").css("background-color", "#f1f1f1");
}
}
function markSelector(x, sel) {
$(x).animate({
borderColor: "#FF6666"
}, 10);
$(x).animate({
backgroundColor: "#FFFF99"
}, 100, function() {
paintElements(sel, 2);
});
}
function markRadioSelector(x) {
$(x).animate({
outlineColor: "#FF0000"
}, 100);
}
function changeLuckyNumber(obj) {
if (currentSelector === "input:in-range" || currentSelector === "input:valid") {
var x = obj.value;
if (isNaN(x) === true || Number(x) < 1 || Number(x) > 10) {
obj.style.backgroundColor = "";
obj.style.borderColor = "";
} else {
obj.style.backgroundColor = "#FFFF99";
obj.style.borderColor = "#FF6666";
}
} else if (currentSelector === "input:out-of-range" || currentSelector === "input:invalid") {
var x = obj.value;
if (isNaN(x) === true || Number(x) < 1 || Number(x) > 10) {
obj.style.backgroundColor = "#FFFF99";
obj.style.borderColor = "#FF6666";
} else {
obj.style.backgroundColor = "";
obj.style.borderColor = "";
}
}
}
function changeEmail(obj) {
if (currentSelector === "input:invalid") {
if (obj.checkValidity() === false) {
obj.style.backgroundColor = "#FFFF99";
obj.style.borderColor = "#FF6666";
} else {
obj.style.backgroundColor = "";
obj.style.borderColor = "";
}
} else if (currentSelector === "input:valid") {
if (obj.checkValidity() === true) {
obj.style.backgroundColor = "#FFFF99";
obj.style.borderColor = "#FF6666";
} else {
obj.style.backgroundColor = "";
obj.style.borderColor = "";
}
}
}
body {
line-height: 15px;
}
h1 {
line-height: 34px;
margin-bottom: 0px;
margin-top: 10px;
}
#iframeResult {
font-family: Arial;
border-radius: 5px;
}
#iframeResult *:not(.noSel) {
border: 1px solid transparent;
}
#iframeResult span.markup {
color: #aaaaaa;
font-size: 12px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: normal;
}
#selectorOptions div {
font-family: "Courier New", Courier, monospace;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
line-height: 16px;
cursor: pointer;
}
#selectorOptions div:hover {
background-color: #f1f1f1;
}
#content,
#footer {
background-color: #f1f1f1;
}
#content {
border-top: none;
}
.headerText,
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #222222;
}
#selectorDescription {
padding: 10px;
display: none;
width: 225px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
border-radius: 5px;
position: fixed;
top: 150px;
left: 230px;
text-align: center;
font-family: Verdana;
font-size: 12px;
}
.smalldevice {
display: none;
}
@media screen and (max-width: 1160px) {
.smalldevice {
display: inline;
}
.largedevice {
display: none;
}
}
@media screen and (max-width: 950px) {
#selectorDescription {
left: 200px;
width: 150px;
}
}
@media only screen and (max-width: 768px) {
#textareaCode {
padding: 5px;
}
.iframewrapper {
overflow: auto;
}
.container {
min-width: 320px;
}
.textarea,
.iframe {
height: 97%;
}
.textareacontainer,
.iframecontainer {
height: 50%;
float: none;
width: 98%;
}
.textarea,
.iframe {
height: 97%;
padding: 15px;
}
.textareacontainer {
height: 300px;
}
.container {
bottom: initial;
height: initial;
min-width: 250px;
}
#selectorDescription {
width: 40%;
position: absolute;
top: 55px;
left: initial;
right: 10%;
}
}
@media screen and (max-height: 700px) {
.footerText {
display: none;
}
}
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-1428407818244-0');
});
Click a selector:
Click a selector to see which element(s)
that gets selected in the result:
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p>My name is Donald <span id="Lastname">Duck.</span></p>
<p id="my-Address">I live in Duckburg</p>
<p>I have many friends:</p>
</div>
<ul id="Listfriends>
- <li>Goofy</li>
- <li>Mickey</li>
- <li>Daisy</li>
- <li>Pluto</li>
</ul>
<p>All my friends are great!<br>
But I really like Daisy!!</p>
<p lang="it" title="Hello beautiful">Ciao bella</p>
<h3>We are all animals!</h3>
<p><b>My latest discoveries have led me to believe that we are all animals:</b>
</p>
<table>
| Name | Type of Animal |
|---|---|
| Mickey | Mouse |
| Goofey | Dog |
| Daisy | Duck |
| Pluto | Dog |
</table>
3152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
