js+css实现带计算器的儿童电子手表代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：js+css实现带计算器的儿童电子手表代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    * {
	box-sizing:border-box;
	padding:0;
	margin:0;
}
/* center the watch in the viewport */
body {
	min-height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background:hsl(0,0%,90%);
	background-repeat:no-repeat;
	background-position:100% 100%;
}
div.svelte-1x9sc7x {
	display:flex;
	align-items:center;
	filter:drop-shadow(0 0 0.65rem hsl(0,0%,80%));
	height:18rem
}
section.svelte-1x9sc7x {
	width:18rem;
	height:100%;
	padding:2rem;
	background:hsl(0,0%,95%);
	background:linear-gradient(to right,transparent 25%,hsl(0,0%,5%) 25%,hsl(0,0%,5%) 75%,transparent 75%),hsl(0,0%,100%)
}
main.svelte-1x9sc7x {
	width:100%;
	height:100%;
	background:hsl(120,30%,58%);
	border:0.25rem solid hsl(0,0%,5%);
	position:relative
}
main.svelte-1x9sc7x:before,main.svelte-1x9sc7x:after {
	content:"";
	position:absolute;
	left:0%;
	width:100%;
	height:50%;
	background:hsl(0,0%,5%);
	transform:scaleY(0);
	z-index:10;
	transition:transform 0.5s cubic-bezier(0.445,0.05,0.55,0.95)
}
main.svelte-1x9sc7x:before {
	top:0%;
	transform-origin:50% 0%
}
main.svelte-1x9sc7x:after {
	bottom:0%;
	transform-origin:50% 100%
}
main.changing.svelte-1x9sc7x:before,main.changing.svelte-1x9sc7x:after {
	transform:scaleY(1)
}
nav.svelte-1x9sc7x {
	width:5rem;
	height:100%;
	padding:3rem 2rem;
	padding-left:0rem;
	background:hsl(0,0%,100%);
	border-radius:0 5rem 5rem 0;
	display:flex;
	flex-direction:column
}
nav.svelte-1x9sc7x button.svelte-1x9sc7x {
	background:hsl(360,85%,65%);
	border:0.25rem solid hsl(0,0%,5%);
	flex-grow:1
}
nav.svelte-1x9sc7x button.svelte-1x9sc7x:active {
	filter:brightness(95%)
}
nav.svelte-1x9sc7x button.svelte-1x9sc7x:first-of-type {
	border-top-right-radius:2rem;
	border-bottom:none
}
nav.svelte-1x9sc7x button.svelte-1x9sc7x:last-of-type {
	border-bottom-right-radius:2rem
}
svg.svelte-xfw2u4 {
	display:block;
	width:100%;
	height:auto
}
.colon.svelte-xfw2u4 {
	animation:svelte-xfw2u4-blink 1s step-end infinite
}
@keyframes svelte-xfw2u4-blink {
	50% {
	opacity:0
}
100% {
	opacity:1
}
}svg.svelte-5bte90 {
	display:block;
	width:100%;
	height:100%
}
svg.svelte-q3c1vs {
	display:block;
	width:100%;
	height:auto
}
button.svelte-q3c1vs {
	margin:0 auto;
	width:64px;
	height:58px;
	background:none;
	border:none;
	border:2px solid hsl(0,0%,0%);
	border-bottom:none;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:5
}
button.svelte-q3c1vs svg.svelte-q3c1vs {
	display:block;
	height:80%;
	width:auto
}
button.svelte-q3c1vs:before {
	position:absolute;
	content:"";
	top:100%;
	left:-2px;
	width:100%;
	height:8px;
	border:2px solid hsl(0,0%,0%);
	border-top:none;
	z-index:-5
}
button.svelte-q3c1vs:after {
	position:absolute;
	content:"";
	top:100%;
	left:0%;
	width:100%;
	height:8px;
	background:hsl(0,0%,0%);
	opacity:0.3;
	z-index:-5
}
button.svelte-q3c1vs:active {
	transform:translateY(8px)
}
button.svelte-q3c1vs:active:before {
	transform:translateY(-8px)
}
button.svelte-q3c1vs:active:after {
	transform:scaleY(0)
}
svg.svelte-1knese7 {
	display:block;
	width:95%;
	height:auto;
	margin:0.5rem auto
}
section.svelte-1knese7 {
	margin:0 auto;
	width:95%;
	display:grid;
	grid-gap:14px 4px;
	grid-template-areas:"seven eight nine clear clear" "four five six addition subtraction" "one two three multiplication division" "zero zero decimal equal equal"
}
button.svelte-1knese7 {
	width:100%;
	height:26px;
	background:none;
	border:none;
	border:2px solid hsl(0,0%,0%);
	border-bottom:none;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:5
}
button.svelte-1knese7 svg.svelte-1knese7 {
	display:block;
	height:60%;
	width:auto
}
button.svelte-1knese7:before {
	position:absolute;
	content:"";
	top:100%;
	left:-2px;
	width:100%;
	height:6px;
	border:2px solid hsl(0,0%,0%);
	border-top:none;
	z-index:-5
}
button.svelte-1knese7:after {
	position:absolute;
	content:"";
	top:100%;
	left:0%;
	width:100%;
	height:6px;
	background:hsl(0,0%,0%);
	opacity:0.3;
	z-index:-5
}
button.svelte-1knese7:active {
	transform:translateY(6px)
}
button.svelte-1knese7:active:before {
	transform:translateY(-6px)
}
button.svelte-1knese7:active:after {
	transform:scaleY(0)
}
</style>
</head>

<body>
    <script>

var app = function() {
    "use strict";

    function t() {}

    function e(t) {
        return t()
    }

    function r() {
        return Object.create(null)
    }

    function n(t) {
        t.forEach(e)
    }

    function a(t) {
        return "function" == typeof t
    }

    function o(t, e) {
        return t != t ? e == e : t !== e || t && "object" == typeof t || "function" == typeof t
    }

    function s(t, e) {
        t.appendChild(e)
    }

    function i(t, e, r) {
        t.insertBefore(e, r || null)
    }

    function l(t) {
        t.parentNode.removeChild(t)
    }

    function c(t, e) {
        for (let r = 0; r < t.length; r += 1) t[r] && t[r].d(e)
    }

    function h(t) {
        return document.createElement(t)
    }

    function u(t) {
        return document.createElementNS("http://www.w3.org/2000/svg", t)
    }

    function d() {
        return t = " ", document.createTextNode(t);
        var t
    }

    function f(t, e, r, n) {
        return t.addEventListener(e, r, n), () => t.removeEventListener(e, r, n)
    }

    function p(t, e, r) {
        null == r ? t.removeAttribute(e) : t.setAttribute(e, r)
    }
    let m;

    function g(t) {
        m = t
    }

    function v(t) {
        (function() {
            if (!m) throw new Error("Function called outside component initialization");
            return m
        })().$$.on_destroy.push(t)
    }
    const $ = [],
        k = [],
        w = [],
        x = [],
        M = Promise.resolve();
    let y = !1;

    function b(t) {
        w.push(t)
    }

    function q() {
        const t = new Set;
        do {
            for (; $.length;) {
                const t = $.shift();
                g(t), _(t.$$)
            }
            for (; k.length;) k.pop()();
            for (let e = 0; e < w.length; e += 1) {
                const r = w[e];
                t.has(r) || (r(), t.add(r))
            }
            w.length = 0
        } while ($.length);
        for (; x.length;) x.pop()();
        y = !1
    }

    function _(t) {
        t.fragment && (t.update(t.dirty), n(t.before_update), t.fragment.p(t.dirty, t.ctx), t.dirty = null, t.after_update.forEach(b))
    }
    const C = new Set;
    let j;

    function z(t, e) {
        t && t.i && (C.delete(t), t.i(e))
    }

    function E(t, e, r, n) {
        if (t && t.o) {
            if (C.has(t)) return;
            C.add(t), j.c.push(() => {
                C.delete(t), n && (r && t.d(1), n())
            }), t.o(e)
        }
    }

    function B(t, r, o) {
        const {
            fragment: s,
            on_mount: i,
            on_destroy: l,
            after_update: c
        } = t.$$;
        s.m(r, o), b(() => {
            const r = i.map(e).filter(a);
            l ? l.push(...r) : n(r), t.$$.on_mount = []
        }), c.forEach(b)
    }

    function L(t, e) {
        t.$$.fragment && (n(t.$$.on_destroy), t.$$.fragment.d(e), t.$$.on_destroy = t.$$.fragment = null, t.$$.ctx = {})
    }

    function S(t, e) {
        t.$$.dirty || ($.push(t), y || (y = !0, M.then(q)), t.$$.dirty = r()), t.$$.dirty[e] = !0
    }

    function I(e, a, o, s, i, l) {
        const c = m;
        g(e);
        const h = a.props || {},
            u = e.$$ = {
                fragment: null,
                ctx: null,
                props: l,
                update: t,
                not_equal: i,
                bound: r(),
                on_mount: [],
                on_destroy: [],
                before_update: [],
                after_update: [],
                context: new Map(c ? c.$$.context : []),
                callbacks: r(),
                dirty: null
            };
        let d = !1;
        u.ctx = o ? o(e, h, (t, r, n = r) => (u.ctx && i(u.ctx[t], u.ctx[t] = n) && (u.bound[t] && u.bound[t](n), d && S(e, t)), r)) : h, u.update(), d = !0, n(u.before_update), u.fragment = s(u.ctx), a.target && (a.hydrate ? u.fragment.l(function(t) {
            return Array.from(t.childNodes)
        }(a.target)) : u.fragment.c(), a.intro && z(e.$$.fragment), B(e, a.target, a.anchor), q()), g(c)
    }
    class N {
        $destroy() {
            L(this, 1), this.$destroy = t
        }
        $on(t, e) {
            const r = this.$$.callbacks[t] || (this.$$.callbacks[t] = []);
            return r.push(e), () => {
                const t = r.indexOf(e); - 1 !== t && r.splice(t, 1)
            }
        }
        $set() {}
    }

    function O(t) {
        return t >= 10 ? t.toString() : `0${t}`
    }

    function T(t) {
        return t.padStart(9, " ")
    }

    function A(t) {
        var e, r, n, a, o, c, h, d, f, m, g, v;
        return {
            c() {
                e = u("g"), r = u("use"), a = u("g"), o = u("use"), h = u("g"), d = u("use"), m = u("g"), g = u("use"), p(r, "href", n = "#" + t.hours[0]), p(e, "transform", "translate(14 0)"), p(o, "href", c = "#" + t.hours[1]), p(a, "transform", "translate(35 0)"), p(d, "href", f = "#" + t.minutes[0]), p(h, "transform", "translate(65 0)"), p(g, "href", v = "#" + t.minutes[1]), p(m, "transform", "translate(86 0)")
            },
            m(t, n) {
                i(t, e, n), s(e, r), i(t, a, n), s(a, o), i(t, h, n), s(h, d), i(t, m, n), s(m, g)
            },
            p(t, e) {
                t.hours && n !== (n = "#" + e.hours[0]) && p(r, "href", n), t.hours && c !== (c = "#" + e.hours[1]) && p(o, "href", c), t.minutes && f !== (f = "#" + e.minutes[0]) && p(d, "href", f), t.minutes && v !== (v = "#" + e.minutes[1]) && p(g, "href", v)
            },
            d(t) {
                t && (l(e), l(a), l(h), l(m))
            }
        }
    }

    function D(e) {
        var r, n, a, o, c, h, d, f, m, g, v, $, k, w, x, M, y, b, q, _, C, j, z = e.now && A(e);
        return {
            c() {
                r = u("svg"), n = u("defs"), a = u("path"), o = u("path"), c = u("path"), h = u("path"), d = u("path"), f = u("g"), m = u("use"), g = u("path"), v = u("path"), $ = u("path"), k = u("path"), w = u("rect"), x = u("g"), M = u("g"), z && z.c(), y = u("g"), b = u("use"), q = u("use"), _ = u("g"), C = u("g"), j = u("path"), p(a, "id", "0"), p(a, "d", "M -6 -15 h 12 v 30 h -12 z"), p(o, "id", "1"), p(o, "d", "M 6 -15 v 30"), p(c, "id", "2"), p(c, "d", "M -6 -15 h 12 v 15 h -12 v 15 h 12"), p(h, "id", "3"), p(h, "d", "M -6 -15 h 12 v 30 h -12 m 0 -15 h 12"), p(d, "id", "4"), p(d, "d", "M -6 -15 v 15 h 12 v 15 m 0 -30 v 15"), p(m, "href", "#2"), p(m, "transform", "scale(-1 1)"), p(f, "id", "5"), p(g, "id", "6"), p(g, "d", "M 6 -15 h -12 v 30 h 12 v -15 h -12"), p(v, "id", "7"), p(v, "d", "M -6 -15 h 12 v 30"), p($, "id", "8"), p($, "d", "M -6 -15 h 12 v 30 h -12 z m 0 15 h 12"), p(k, "id", "9"), p(k, "d", "M 6 15 v -30 h -12 v 15 h 12"), p(w, "id", "square"), p(w, "x", "-2.5"), p(w, "y", "-2.5"), p(w, "width", "5"), p(w, "height", "5"), p(M, "fill", "none"), p(M, "stroke", "currentColor"), p(M, "stroke-width", "5"), p(M, "stroke-linecap", "square"), p(M, "stroke-linejoin", "square"), p(b, "href", "#square"), p(b, "y", "-10"), p(q, "href", "#square"), p(q, "y", "10"), p(y, "class", "colon svelte-xfw2u4"), p(y, "transform", "translate(50 0)"), p(x, "transform", "translate(0 50)"), p(j, "d", "M 0 0 q -25 -5 -25 -25 q -10 0 -10 12 q 0 -20 5 -20 q -15 0 -15 10 a 22.5 22.5 0 0 1 45 0 q 10 0 15 -20 q 0 -8 -5 -8 q 15 0 15 8 l 5 5 l -5 5 q 0 33 -25 33"), p(C, "opacity", "0.35"), p(C, "fill", "currentColor"), p(C, "stroke", "currentColor"), p(C, "stroke-width", "5"), p(C, "stroke-linecap", "round"), p(C, "stroke-linejoin", "round"), p(_, "transform", "translate(25 100) scale(0.45)"), p(r, "viewBox", "0 0 100 100"), p(r, "class", "svelte-xfw2u4")
            },
            m(t, e) {
                i(t, r, e), s(r, n), s(n, a), s(n, o), s(n, c), s(n, h), s(n, d), s(n, f), s(f, m), s(n, g), s(n, v), s(n, $), s(n, k), s(n, w), s(r, x), s(x, M), z && z.m(M, null), s(x, y), s(y, b), s(y, q), s(r, _), s(_, C), s(C, j)
            },
            p(t, e) {
                e.now ? z ? z.p(t, e) : ((z = A(e)).c(), z.m(M, null)) : z && (z.d(1), z = null)
            },
            i: t,
            o: t,
            d(t) {
                t && l(r), z && z.d()
            }
        }
    }

    function P(t, e, r) {
        let n, a, o = new Date,
            s = setInterval(() => {
                r("now", o = new Date)
            }, 1e3);
        return v(() => {
            clearInterval(s)
        }), t.$$.update = (t = {
            now: 1
        }) => {
            t.now && r("hours", n = O(o.getHours())), t.now && r("minutes", a = O(o.getMinutes()))
        }, {
            now: o,
            hours: n,
            minutes: a
        }
    }
    class H extends N {
        constructor(t) {
            super(), I(this, t, P, D, o, [])
        }
    }

    function F(t, e, r) {
        const n = Object.create(t);
        return n.href = e[r].href, n.area = e[r].area, n
    }

    function G(t, e, r) {
        const n = Object.create(t);
        return n.character = e[r], n.index = r, n
    }

    function J(e) {
        var r;
        return {
            c() {
                p(r = u("use"), "href", "#asterisk")
            },
            m(t, e) {
                i(t, r, e)
            },
            p: t,
            d(t) {
                t && l(r)
            }
        }
    }

    function K(t) {
        var e, r;
        return {
            c() {
                p(e = u("use"), "href", r = "#" + t.operator)
            },
            m(t, r) {
                i(t, e, r)
            },
            p(t, n) {
                t.operator && r !== (r = "#" + n.operator) && p(e, "href", r)
            },
            d(t) {
                t && l(e)
            }
        }
    }

    function Q(e) {
        var r;
        return {
            c() {
                p(r = u("use"), "href", "#placeholder")
            },
            m(t, e) {
                i(t, r, e)
            },
            p: t,
            d(t) {
                t && l(r)
            }
        }
    }

    function R(t) {
        var e, r;
        return {
            c() {
                p(e = u("use"), "href", r = "#" + t.character)
            },
            m(t, r) {
                i(t, e, r)
            },
            p(t, n) {
                t.display && r !== (r = "#" + n.character) && p(e, "href", r)
            },
            d(t) {
                t && l(e)
            }
        }
    }

    function U(t) {
        var e;

        function r(t, e) {
            return " " !== e.character ? R : Q
        }
        var n = r(0, t),
            a = n(t);
        return {
            c() {
                e = u("g"), a.c(), p(e, "transform", "translate(" + (61 + 39 * t.index) + " 0)")
            },
            m(t, r) {
                i(t, e, r), a.m(e, null)
            },
            p(t, o) {
                n === (n = r(0, o)) && a ? a.p(t, o) : (a.d(1), (a = n(o)) && (a.c(), a.m(e, null)))
            },
            d(t) {
                t && l(e), a.d()
            }
        }
    }

    function V(t) {
        var e, r, n, a, o, c;

        function m() {
            return t.click_handler(t)
        }
        return {
            c() {
                var s, i, l, g;
                e = h("button"), r = u("svg"), n = u("g"), a = u("use"), o = d(), p(a, "href", "#" + t.href), p(n, "fill", "none"), p(n, "stroke", "currentColor"), p(n, "stroke-width", "6"), p(n, "stroke-linecap", "square"), p(n, "stroke-linejoin", "square"), p(r, "viewBox", "0 0 40 40"), p(r, "width", "40"), p(r, "height", "40"), p(r, "class", "svelte-1knese7"), p(e, "aria-label", t.area), s = e, i = "grid-area", l = t.area, s.style.setProperty(i, l, g ? "important" : ""), p(e, "class", "svelte-1knese7"), c = f(e, "click", m)
            },
            m(t, l) {
                i(t, e, l), s(e, r), s(r, n), s(n, a), s(e, o)
            },
            p(e, r) {
                t = r
            },
            d(t) {
                t && l(e), c()
            }
        }
    }

    function W(e) {
        var r, n, a, o, f, m, g, v, $, k, w, x, M, y, b, q, _, C, j, z, E, B, L, S, I, N, O, A, D;

        function P(t, e) {
            return e.operator ? K : J
        }
        var H = P(0, e),
            Q = H(e);
        let R = T(e.display),
            W = [];
        for (let t = 0; t < R.length; t += 1) W[t] = U(G(e, R, t));
        let X = e.buttons,
            Y = [];
        for (let t = 0; t < X.length; t += 1) Y[t] = V(F(e, X, t));
        return {
            c() {
                r = u("svg"), n = u("defs"), a = u("path"), o = u("path"), f = u("path"), m = u("path"), g = u("path"), v = u("path"), $ = u("path"), k = u("path"), w = u("path"), x = u("path"), M = u("path"), y = u("path"), b = u("path"), q = u("path"), _ = u("path"), C = u("path"), j = u("path"), z = u("path"), E = u("path"), B = u("use"), L = u("g"), S = u("rect"), I = u("g"), N = u("g"), O = u("g"), Q.c();
                for (let t = 0; t < W.length; t += 1) W[t].c();
                A = d(), D = h("section");
                for (let t = 0; t < Y.length; t += 1) Y[t].c();
                p(a, "id", "0"), p(a, "d", "M 10 5 h 20 v 30 h -20 z"), p(o, "id", "1"), p(o, "d", "M 20 5 h 5 v 30 m -5 0 h 10"), p(f, "id", "2"), p(f, "d", "M 10 5 h 20 v 15 h -20 v 15 h 20"), p(m, "id", "3"), p(m, "d", "M 10 5 h 20 v 30 h -20 m 0 -15 h 20"), p(g, "id", "4"), p(g, "d", "M 10 5 v 15 h 20 m -5 -15 v 30"), p(v, "id", "5"), p(v, "d", "M 30 5 h -20 v 15 h 20 v 15 h -20"), p($, "id", "6"), p($, "d", "M 30 5 h -20 v 30 h 20 v -15 h -20"), p(k, "id", "7"), p(k, "d", "M 10 5 h 20 v 30"), p(w, "id", "8"), p(w, "d", "M 10 5 h 20 v 30 h -20 z m 0 15 h 20"), p(x, "id", "9"), p(x, "d", "M 30 35 v -30 h -20 v 15 h 20"), p(M, "id", "+"), p(M, "d", "M 5 20 h 30 m -15 -15 v 30"), p(y, "id", "-"), p(y, "d", "M 5 20 h 30"), p(b, "id",.........完整代码请登录后点击上方下载按钮下载查看