· Simple way to realize the reward function

You can check out my personal homepage, see the effect -> www.yansongsong.cn/

Personal website github address: github.com/xiaosongshi…

In personal website blog, reward sponsorship is a kind of support and encouragement to the author, is a very common function. This article will share a very simple way to implement the tipping function.

Practice demonstration:

1 PC:

 

(2) the mobile end

Function implementation

Function implementation is very simple, no need to separate the introduction of external CSS and JS, just need to add the following HTML code to your web page:

<script src="http://static.tctip.com/tctip-1.0.0.min.js"></script>
  <script>  
  new tctip({
    top: '20%'.button: {
      id: 9.type: 'dashang',},list: [{type: 'alipay'.qrImg: 'Your Alipay qr code photo address'
      }, {
        type: 'wechat'.qrImg: 'Your wechat qr code photo address'
      }
    ]
  }).init()
  </script>
Copy the code

Parameters that

  • top

    • type: String
    • The default value: 10%
    • meaning: The distance between the top of the plug-in and the top of the page
    • note: format such as100pxor10%

  • button

    • Type: Object, containing two subarrays of ID and Type

    • id:

      • type: Number
      • The default value: 1
      • meaning: represents the color of the picture
      • note: The value ranges from 1 to 9

    • type:

      • type: String
      • The default value: dashang
      • meaning: Chinese characters on the button, yesexceptionalandsponsorshipTwo kinds of
      • note: can takedashangorzanzhu

  • list

    • Type: Array

    • Default value: []

    • Description: Key configuration, the right side of the reward display, cannot be empty

    • Note: A maximum of five elements can be passed into an array, and each element has the following configurations

    • type:

      • type: String
      • The default value: no
      • meaning: Reward type
      • note: The system comes with four default types.alipay.wechat.bitcon.tenpayIf it’s not one of these four, you can write whatever you want

    • qrImg:

      • type: String
      • The default value: no
      • meaning: Qr code picture address
      • note: Trim as much white space around the image as possible.Important but not essential

    • qrContent:

      • type: String
      • The default value: no
      • meaning: Content of QR code
      • noteAnd:qrImgOne of the two must be passed. If this parameter is passed in, the plug-in automatically generates a QR code

    • icon:

      • type: String
      • The default value: no
      • meaning: icon, listed in the Alipay icon
      • note: If type is one of the default four types, omit this parameter

    • name:

      • type: String
      • The default value: no
      • meaning: Payment name, such as Alipay, wechat, etc
      • note: If type is one of the default four types, omit this parameter

    • desc:

      • type: String
      • The default value: no
      • meaning: A phrase below the TWO-DIMENSIONAL code, similarDo me a favorSuch as
      • note: If type is one of the default four types, omit this parameter

  • stat

    • type: Boolean
    • The default value: true
    • meaning: Indicates whether to report the statistics
    • note: This parameter is just for the convenience of the author to count the usage of the plug-in

Welcome to visit myThe home pageTry it, if you think it helps, please give it a little encouragement.