Using JS to realize the function _javascript skills of blog playing rewards

A few days ago in a blog to see a play reward function. In fact, it is simply to add dynamic DOM nodes to the page, using simple HTML, CSS, JS, some simple knowledge of these front-end. There are open source code on the GitHub, where a little makeover can be used in your own blog.

The easiest way to use this is to add the following JS code to the page:

<script>
window.tctipconfig = {
    Staticprefix:  "http://static.tctip.com",
    buttonimageid:1,
    buttontip: "Zanzhu",
    list:{
      Alipay: {qrimg: "Yun_qi_img/alipayqr.png"},
      weixin:{qrimg: "Yun_qi_ Img/yeshen.png "},
    }
};
</script>
<script src= "Http://static.tctip.com/js/tctip.min.js" ></script>

One of the more important is the configuration has Staticprefix, is the original author to provide the static file relative path, used to store IMG and Css;list is the way to play, Qrimg is set to play the way two-dimensional code picture.

The next step is to use it in a blog park. Prepare the static files locally first:

JS file, tctip.min.js;

CSS style file, myreward.css;

Payment of two-dimensional code, ialipay.bmp, iweixin.bmp;

Payment method Pictures, Alipay.bmp, weixin.bmp;

Sponsor or Reward button picture, tab_4.bmp (corresponding to Buttonimageid).

Blog Park can only upload bmp pictures, so you want to modify the other format pictures, and then in their own blog park background upload files, so that the previous static file can be used just uploaded.

If you use your own uploaded static files, do not staticprefix the address when configured, providing Imageprefix and Cssprefix:

<script>
  window.tctipconfig = {
    imageprefix: "Relative path of picture file",
    cssprefix:   "relative path of Style file",
    // Staticprefix: "http://static.tctip.com",
    buttonimageid:4,
    buttontip:  "Dashang",
    list:{
      Alipay: {qrimg: "Alipay two dimensional Code absolute path"},
      Weixin: {qrimg: "micro-letter two-dimensional code absolute Path"},}
    ;
</script>
<script src= "JS file absolute path" ></script>

Of course, if just this is over, or did not see the source of the author JS code, the fact is not to modify the source can not be used, in fact, is mainly the problem of file path settings.

Open JS source code, is not compressed source Oh, unless you see the eyes, and no one to stop you.

Myconfig: {
    imageprefix  : "",
    cssprefix    : "",
    /***
     * When Staticprefix is not empty, Imageprefix and Cssprefix Failure
     * *
    staticprefix  : "",
    Buttonimageid  : "3",
    buttontip    : " Dashang ",
    cssurl:  "/myrewards.css "
  },

The original Cssurl is/css/myrewards.css, because the blog park uploaded files do not have folders, so remove CSS. Perhaps everyone thought that IMG has the same problem.

listconfig:{
        ' Alipay '  :   {icon: "Alipay.bmp", Name: "Alipay", desc: "Pay treasure play Reward", ClassName: ""},
        ' Tenpay '  :   {icon: "Img/tenpay.png", Name: "Tenpay", desc: "Tenpay Play Rewards", ClassName: ""},
        ' Weixin '  :   {icon: "Weixin.bmp", Name: "Micro-letter", desc: "Micro-letter play Reward", ClassName: ""},
        ' bitcoin '  :  {icon: "Img/bitcoin.png", Name: "bitcoin", desc: "Bitcoin play reward ", ClassName:" "},
        ' Litecoin '  :  {icon:" Img/litecoin.png ", Name:" The Wright Currency ", desc:" The Wright currency plays the reward ", ClassName:" "},
        ' Dogecoin '  :  {icon: "Img/dogecoin.png", Name: "Dog coin", desc: "Dog currency play Reward", ClassName: ""}
      ,

Payment method list, modify the picture relative path, because only use Alipay, micro-letter two ways, so only modify their path. In fact, you can add other means of payment here, do not repeat it.

Buttonimageurl:function () {
            var id = tctip.myConfig.buttonImageId;
            var tip = Tctip.myConfig.buttonTip;
            Return Tctip.imageurl ("" + Tip + "/tab_" + ID + ". bmp");
            Return Tctip.imageurl ("/tab_4.bmp");
        

The payment button's picture path, similarly modifies the returned relative path.

So in the blog Park background Settings page, at the top of the page HTML to add the above configuration file on it.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.