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