TweenMax+svg+Draggable实现拖拽刻度设置闹钟时间效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：TweenMax+svg+Draggable实现拖拽刻度设置闹钟时间效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
 background-color: #212121;
 overflow: hidden;
 text-align: center;
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 position: absolute;
 width: 100%;
 height: 100%;
 visibility: hidden;
 transform: translate(-50%, 0%);
}

.timeLabel,
.meridianLabel,
.bellBtnLabel,
.digitalTimeLabel {
 font-family: 'din-condensed-web', sans-serif;
 text-anchor: middle;
 fill: #7e7e7e;
 font-size: 40px;
}

.nextDayBtn,
.prevDayBtn {
 cursor: pointer;
 font-size: 21px;
}

.bellBtn text,
.nextDayBtn text,
.prevDayBtn text {
 font-size: 21px;
 fill: #D6DADD;
}

.meridianLabel {
 font-size: 72px;
 fill: #D6DADD;
}

.timeLabelGroup {
 cursor: pointer;
}

.timeLabelBtn .timeLabelGroup {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.bellBtn {
 cursor: pointer;
}

text {
 user-select: none;
 -webkit-user-select: none;
}
</style>
  <script src="https://use.typekit.net/rid3oni.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- partial:index.partial.html -->
<svg class="alarmSVG" viewBox="0 0 320 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
<path id="bell" d="M18.3,18.7h-6.2c-0.2,1.2-1.4,2.1-3,2.1c-1.6,0-2.8-0.9-3-2.1H0v-2.7c2.1-1.1,2.6-2.7,2.7-3.6c0,0,0-4,0-4.3
  c0-3.1,2.2-5.7,5.1-6.3V1.4C7.8,0.6,8.4,0,9.2,0c0.8,0,1.4,0.6,1.4,1.4V2c2.7,0.6,4.8,2.9,5,5.7l0,4.9c0.1,0.9,0.6,2.4,2.8,3.5V18.7
  z"/>  
  <g class="timeLabelGroup">
  <text class="timeLabel"/>
   <rect class="timeLabelBtn" width="40" height="40" y="-30" x="-15" fill="transparent"/>
   </g>

  </defs>

 <line opacity="1" class="dottedLine" x1="50%" x2="50%" y1="369" y2="450" stroke-dasharray="6 6" stroke="#7e7e7e"/>

 <g class="maskedTimeScale" >
  
 <g class="timeScaleGroup"> 

 <rect class="timeScaleHit" width="2880" x="160" height="160" y="400" fill="transparent"/>
  <g class="timeScaleMarkerGroup"/>

  <g class="alarmBell" opacity="0">
  <use x="151" y="468" xlink:href="#bell" fill="#3498DB"/>
   </g>   
  </g>

  </g>
      <g class="clockGroup" stroke="#7e7e7e">
        <circle cx="50%" cy="140" r="80" fill="none"  stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
        <line class="minuteHand" stroke="#D6DADD" x1="50%" y1="140" x2="50%" y2="75" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
        <line class="hourHand" stroke="#D6DADD" x1="50%" y1="140" x2="50%" y2="105" fill="none"  stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
        <circle class="centerDot" cx="50%" cy="140" r="4" fill="#212121" stroke="#D6DADD"  stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
        <circle class="clockDragger" cx="50%" cy="99" r="70" fill="transparent"  stroke-width="0"/>
      </g>
 <text class="meridianLabel" x="50%" y="290">--</text>
 <clipPath id="bellBtnMask">
<rect class="bellBtnMask" width="105" height="42" x="108" y="319" fill="red" stroke="#D6DADD" rx="8" stroke-width="0"/>  
  </clipPath>
 <g class="bellBtnHitCirc" clip-path="url(#bellBtnMask)"/>
 <g class="bellBtn">
  <rect class="bellBtnRect" width="105" height="42" x="108" y="319" fill="transparent" stroke="#D6DADD" rx="8" stroke-width="2"/>

    <text class="bellBtnLabel" x="50%" y="348">SET ALARM</text>
  </g> 
</svg>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable.1.20.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ThrowPropsPlugin.min.js"></script>
<script >
    var xmlns = "http://www.w3.org/2000/svg",
 xlinkns = "http://www.w3.org/1999/xlink",
 select = function(s) {
  return document.querySelector(s);
 },
 selectAll = function(s) {
  return document.querySelectorAll(s);
 },
 bellBtnHitCirc = select('.bellBtnHitCirc'),
 alarmSVG = select('.alarmSVG'),
 bellBtnLabel = select('.bellBtnLabel'),
 alarmBell = select('.alarmBell'),
 bellBtn = select('.bellBtn'),
 clockGroup = select('.clockGroup'),
 dottedLine = select('.dottedLine'),
 meridianLabel = select('.meridianLabel'),
 hourHand = select('.hourHand'),
 minuteHand = select('.minuteHand'),
 timeLabel = select('.timeLabel'),
 timeLabelGroup = select('.timeLabelGroup'),
 timeScaleGroup = select('.timeScaleGroup'),
 timeScaleMarkerGroup = select('.timeScaleMarkerGroup'),
 maxMinutes = 1440,
 maxHours = 24,
 timeScaleInterval = 60,
 minutesInHour = 60,
 centerX = 160,
 minuteHandMaxRotation = 360 * maxHours,
 timeStep = 5,
 hourRotationStep = 360 / 12,
 timeScaleMarkerColor = '#7e7e7e',
 multiplier = 2,
 timeScaleMarkers = 5,
 maxDrag = maxMinutes * multiplier,
 alarmBellOffsetX = 151,
 alarmSetPosX,
 alarmIsSet = false,
 initTime = 7.5,
 selectedColor = '#3498DB',
 pt

TweenMax.set('svg', {
 visibility: 'visible'
})
TweenMax.set([hourHand, minuteHand], {
 transformOrigin: '50% 100%'
})

TweenMax.set('.timeScaleHit', {
 width: maxDrag
})
TweenMax.set(clockGroup, {
 y: -20
})

/* TweenMax.set(bellBtn, {
 svgOrigin:'160 350',
 scale:3
}) */

TweenMax.set(alarmBell, {
 attr: {
  x: alarmBellOffsetX
 }
})

function makeTimeScale() {

 var marker, labelGroup

 for (var i = 0; i <= maxMinutes; i++) {
  //console.log(i % 5) 
  marker = document.createElementNS(xmlns, 'line');
  timeScaleMarkerGroup.appendChild(marker);

  var posX = centerX + (i * multiplier);

  if (i % timeScaleInterval == 0) {

   labelGroup = timeLabelGroup.cloneNode(true);
   timeScaleMarkerGroup.appendChild(labelGroup);
   labelGroup.querySelector(�.........完整代码请登录后点击上方下载按钮下载查看