Verwenden Sie JS, um eine einfache Belohnungsfunktion zu implementieren-js-Tutorial-php.cn

Verwenden Sie JS, um eine einfache Belohnungsfunktion zu implementieren

php中世界最好的语言

Freigeben： 2018-04-18 14:02:46

Original

2206 Leute haben es durchsucht

Dieses Mal werde ich Ihnen vorstellen, wie Sie JS verwenden, um eine einfache Trinkgeldfunktion zu implementieren. Was sind die Vorsichtsmaßnahmen für die Verwendung von JS, um eine einfache Trinkgeldfunktion zu implementieren? Schauen Sie mal rein.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <metahttp-equiv="Content-Type"content="text/html;"/>
  <title>打赏</title>
  <styletype="text/css">
    #dsSidebar {
      z-index: 999999;
      top: 18%;
      width: 200px;
      height: 200px;
      position: fixed;
      right: -200px;
    }
 
    #dsBtn {
      z-index: 999999;
      width: 30px;
      height: 58px;
      left: -30px;
      top: 80px;
      line-height: 28px;
      position: absolute;
    }
 
    .dsPanels {
      margin: 0px auto;
      overflow: hidden;
    }
 
    .dsPanel {
      float: left;
      margin: 0px 0px;
      padding: 12px 0px;
      text-align: center;
      background: #ffeedd;
      border-color: #ffeedd;
      border-radius: 8px;
    }
 
    .dsPanel-highlight {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 10px;
      padding-right: 10px;
      width: 160px;
      border: 8px solid #fd935c;
    }
 
    .dsPanel-button {
      display: block;
      font-size: 16px;
      font-weight: 500;
      color: #ffeedd;
      text-align: center;
      text-decoration: none;
      text-shadow: 0 1px rgba(black, .1);
      background: #fd935c;
      border-bottom: 2px solid #cf7e3b;
      border-color: rgba(black, .15);
      border-radius: 4px;
    }
 
    .dsPanel-title {
      width: 128px;
      margin: -15px auto 15px;
      padding-bottom: 0px;
      line-height: 22px;
      font-size: 14px;
      font-weight: bold;
      color: #ffeedd;
      text-shadow: 0 1px rgba(black, .05);
      background: #fd935c;
      border-radius: 0 0 4px 4px;
    }
  </style>
  <script>
    function moveBtn() {
      var dsBtn = document.getElementById("dsBtn");
      var now = new Date();
      var times = now.getTime();
      var offsetSize = Math.sin(times / 380.0) * 15 + 45;
      var radius = Math.sin(times / 380.0) * 18 + 24;
      dsBtn.style.left = -offsetSize + 'px';
      dsBtn.style.width = offsetSize + 'px';
      dsBtn.style.borderRadius = radius + 'px';
      setTimeout(moveBtn, 60);
    }
 
    var dsSidebarTimer = null;
    var dsSidebarOffsetRight = -200;
    function startMove(dsSidebarTarget, dsSidebarSpeed) {
      clearTimeout(dsSidebarTimer);
      function doMove() {
        var dsSidebar = document.getElementById('dsSidebar');
        dsSidebarSpeed *= 0.9;
        if (dsSidebarSpeed > -1 && dsSidebarSpeed <0) {
          dsSidebarSpeed = -1;
        } else if (dsSidebarSpeed < 1 && dsSidebarSpeed > 0) {
          dsSidebarSpeed = 1;
        }
        dsSidebarOffsetRight = dsSidebarOffsetRight + dsSidebarSpeed;
        if (dsSidebarSpeed > 0 && dsSidebarOffsetRight >= dsSidebarTarget) {
          dsSidebarOffsetRight = dsSidebarTarget;
          dsSidebar.style.right = dsSidebarOffsetRight + 'px';
        } else if (dsSidebarSpeed <0&& dsSidebarOffsetRight <= dsSidebarTarget) {
          dsSidebarOffsetRight=dsSidebarTarget;
          dsSidebar.style.right=dsSidebarOffsetRight+ &#39;px&#39;;
        } else {
          dsSidebar.style.right=dsSidebarOffsetRight+ &#39;px&#39;;
          dsSidebarTimer=setTimeout(doMove, 30);
        }
      }
      doMove();
    }
    document.getElementById(&#39;dsImg&#39;).onload=function() {
      vardsSidebar=document.getElementById(&#39;dsSidebar&#39;);
      dsSidebar.onmouseover=function() {
        startMove(0, 24);
      }
      dsSidebar.onmouseout=function() {
        startMove(-200, -24);
      }
      moveBtn();
    }
  </script>
</head>
 
<body>
  <pid="dsSidebar">
    <pclass="dsPanels">
      <pclass="dsPanel dsPanel-highlight">
        <pclass="dsPanel-title">喜欢请用微信打赏</p>
        <imgid=&#39;dsImg&#39;src="http://files.cnblogs.com/files/eritpang/weixin.bmp"alt=""width="160"height="160"/>
      </p>
    </p>
    <spanclass="dsPanel-button"id=&#39;dsBtn&#39;><b>打<br/>赏</b></span>
  </p>
</body>
 
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So konvertieren Sie JS-Typen

js verhindert den Aktualisierungs-Countdown

JS-Array löscht das angegebene Element

Das obige ist der detaillierte Inhalt vonVerwenden Sie JS, um eine einfache Belohnungsfunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!