Maison > Article > interface Web > Utilisez JS pour implémenter une fonction de pourboire simple

Utilisez JS pour implémenter une fonction de pourboire simple

php中世界最好的语言original: 2018-04-18 14:02:462139parcourir

Cette fois, je vais vous présenter comment utiliser JS pour implémenter une fonction de pourboire simple. Quelles sont les précautions pour utiliser JS pour implémenter une fonction de pourboire simple. , jetons un coup d'oeil.

<!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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment convertir les types JS

js empêche le compte à rebours d'actualisation

Tableau JS supprimer l'élément spécifié

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Type de données JS + type de référence, copie profonde et superficielle et problèmes d'allocation de mémoireArticle suivant：Type de données JS + type de référence, copie profonde et superficielle et problèmes d'allocation de mémoire

Articles Liés

Voir plus