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