js+svg实现日历效果代码-html代码-BFW代码库

js+svg实现日历效果代码

代码语言：html

所属分类：其他

代码描述：js+svg实现日历效果代码

代码标签： svg 日历

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body{
	margin:0 auto;
	background:steelblue;
}
#d {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height:200px;
	width:200px;
	border-radius:13px;
	background:rgba(0,0,0,0.2);
	border:2px solid rgba(255,255,255,0.5);
	padding-top:10px;
	padding-bottom:10px;
}
.left, .right {
	background:none;
	color:#fff;
	padding:0;
	margin:0 auto;
	border:1px solid rgba(255,255,255,0.5);
	height:7.5%;
	width:7.5%;
	font-size:10px;
	line-height:10px;
	cursor:pointer;
	position:absolute;
}
.right{
	top:5%;
	left:10%;
	border-radius:0px 3px 3px 0px;
}
.left{
	top:5%;
	left:3%;
	border-radius:3px 0px 0px 3px;
}
.right:hover, .left:hover{
	opacity:0.7;
}
.day:hover{
	stroke:#fff;
}
.saturday, .sunday{
	fill:rgba(255,255,255,0.1);
}
svg{
/* 	border:2px solid red; */
}
.today{
	fill:rgba(0,255,0,0.3);
}
</style>


</head>

<body>
  <div id="d">
	<button class="left">
		<svg height="100%" width="100%" viewbox="0 0 10 10">
			<path d="m 7 1 L 1 5 L 7 9 Z" fill="rgba(255,255,255,0.8)" />
		</svg></button>
	<button class="right">
		<svg height="100%" width=".........完整代码请登录后点击上方下载按钮下载查看