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,
     .........完整代码请登录后点击上方下载按钮下载查看