demo.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottery Wheel</title>
    <link href="css/demo.css" rel="stylesheet">
    <script src="js/lottery-wheel.min.js"></script>
  </head>
  <body>
  	 <div class="main">
	     <section>
	     	<h2>H2U轉轉樂</h2>
	     </section>
	     <div class="showcase">
	         <svg id="wheel1"></svg>
	     </div>
     </div>
     <script type="text/javascript">
		 function isMobile() {
  			try{ 
  				document.createEvent("TouchEvent"); 
  				return true; 
  			}catch(e){ 
  				return false;
  			}
  			return false;
		 }
		 const radius = isMobile()? document.body.clientWidth /2 * 0.8: document.body.clientWidth /2 * 0.4;
	     new Wheel({
	       el: document.getElementById('wheel1'),
	       data: ['早安嚴選折價卷', 'H2U藍芽體重計', 'H2U除臭噴霧', 'H2U點數', '日益沛益生菌', '蔘沛飲滋補禮盒'],
	       theme: 'light',
	       buttonText: '點選',
	       radius,
	       onButtonHover(anime, button) {
	   	    anime({
	   	      targets: button.node,
	   	      scale: 1.2,
	   	      duration: 500
	   	    });
	   	  },
	       onSuccess(data) {
	         alert(data.text);
	       }
	     });
     </script>
  </body>
</html>