Element’s TREE component multi -keyword filtering and highlight the keyword

2023-01-23   ES  

first renderings:

When you click the lottery, the wheels will turn, the number of circles and time sets itself. There are two pictures in total, one is the background of the prize, and the other is the draw button.

html page structure:

 <div class=”wrapper”>
        <div class=”box”>
            <img src=”./img/pan.png” alt=””>
        </div>
        <div id=”button”>
            <img src=”./img/btn.png” alt=””>
        </div>

    </div>

CSS structure:

*{

    margin:0;
    padding:0;
}
.wrapper{

    position:relative;
    width:400px;
    height:400px;
    margin:100px auto;
}
.wrapper .box{

    width: 100%;
    height: 100%;
}
.wrapper .box img{

    width: 100%;
}
.wrapper #button{

    width:130px;
    height:130px;
    position:absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-top: -65px;
    margin-left: -65px;
}
.wrapper #button img{

    position: absolute;
    top:-23px;
    width:130px;

}

Next is the main JS part, first talk about thinking.

Writing is mainly written by the mimic jQuery source code. First of all, let’s execute the function immediately to ensure the closed -acting scope. The part that needs to be missed to the external need to be referenced is added to the attribute of Window. Create a constructor to expose the constructor into the Window object for subsequent calls. Win receives Window objects, and $ symbols receive jquery $ operators.

(function(win , $){

win.Lottery = Lottery;
function Lottery(){

}

})(window , $)

Thinking: For the process of turntable implementation, first of all, we need to know the elements of the click. Click the button to trigger the large background rotation. After the rotation is over, we will stay in a certain award. We need to make a callback function for how many prizes. In this way, the basic object of our structure function can already come out.

(function(win , $){

var defaultPar = {

rotate: 5, // The number of rotating circles
body: ‘body’, / / default element
CLICKCB: Function () {}, / / click the trigger event
randercb: fu of () {} // The recovery of the end of the rotation
}
win.Lottery = Lottery;
function Lottery(pars){

this.pars = $ .extend (true, {}, defaultPar, Pars); // If the value is passed, the original default value is covered, and the default value is not passed.
}

})(window , $)

Below we start to write the initial function of the constructor. We need to add a click event to the button, and after clicking, it will trigger the clickCB event and the operation of the animation. And we need a function of an animation execution process to control the display effect of the animation.

(function(win , $){

var defaultPar = {

rotate : 5 ,
body : ‘body’ ,
clickCb : function(){},
randerCb : function(){}
}
win.Lottery = Lottery;
function Lottery(pars){

this.pars = $.extend(true, {},defaultPar , pars);
this.isdoing = false; // switch, for controlling the click button, do not repeat the click
this.init (); // initialization function
}
Lottery.prototype.init = function(){

var $ this = this; // Keep the current this current this current point to the lottery object
$ (this.pars.body) .on (“click”, “#button”, function () {// Add a click event to the button
if(!$this.isDoing){     
$ this.isdoing = true; // If you have already clicked once, the opening will be closed
$ this.pars.clickcb (); // Perform the function operation of the click CLICKCB () clicks.
}
})
$ (this.pars.body) .find (“. Box”). On (“transitionnd”, function () {//
var deg = PARSEINT ($ ($ this.pars.body) .attr (“data-deg”); //
$($this.pars.body).find(“.box”).css({

Transform: “Rotate (” + DEG + “DEG)”, reset the angle of rotation
Transition: “None” // reset it back, but the user is not visible
})
$ this.isdoing = false; // The animation ends, the switch is turned on
$ this.pars.randercb (deg); // The animation end the execution recovery function
})

}

Lottery.prototype.gorotate = Function (DEG) {// The angle of receiving rotation
$ (this.pars.body) .attr (“data-deg”, deg); // Set the receiving rotation angle, for resetting after the animation is over
var rotatend = this.pars.rotatenum * 360 + deg; // The angle of rotation is required, and the number of circles is multiplied by 360 degrees plus setting angle.
$(this.pars.body).find(“.box”).css({

Transform: “Rotate (” + RotateEnd + “Deg” “, // The style of rotating animation.
transition : “all 5s”
})
}


})(window , $)

At this point we have the functions of our plug -in, so now start calling.

var Pars = {// Pass parameter, if not passed, it will use the default value, that is, the defaultPar object
rotateNum : “10”,
body : “.wrapper”,
clickCb : clickCbFun,
randerCb : randerCbFun
}
var Lottery = New Lottery (Pars); // Create a new object to inherit the constructor attribute method.

function clickcbfun () {// Click the function of the event.
var deg = math.floor (math.random () * 360); // Set the angle of the reason, 360 degrees
Lottery.gorotate (deg); // Perform the animation operation, and pass the settings of the settings to parameters.
}
Function RanderCBFUN (DEG) {// The callback function after the animation executes, DEG is the angle of rotation to determine the award
var str = “”;
if(deg >= 0 && deg < 45){

str = “Second Prize”;
}else if(deg >=90 && deg<135 || deg >= 270 && deg <315 ){

str = “third prize”;
}else if(deg >=180 && deg < 225){

str = “first prize”;
}else{

str = “Fourth Prize”;
}

console.log (“Congratulations to you to get:” + str);

}

Those who planned to write logic and ideas were originally annoyed by half of it. Haha, all the above functions were realized. If you want to add some probability, you can judge the setting angle in the rotating animation gorotate, and then let the rotating angle +45, or how much you can, control it yourself, remember to reset after the animation is over. If you can leave a message if you do n’t understand the text, you will reply as soon as possible if you see it. You can read my articleView the rules of this direction for objects.I believe it is very believed that if you want the source code and pictures, you can leave a message to your mailbox. I will send it to you. If the Canvas skills are good in the text, you can draw it with Canvas. The general logic is the same.

source

Related Posts

Use Charles to catch the HTTPS package on Android devices

State mode of design mode

Trailer: Participate in the “Earnings and Earn” workshop, understand the development of NERVOS DAPP, and win a bonus with a total value of 20W US dollars After long -term R & D, Nervos supports cross -chain and compatible Layer 2 solutions. In order to allow developers to explore and test the solution, we initiated “

ELASTICSEARCH Rendex Alias

Element’s TREE component multi -keyword filtering and highlight the keyword

Random Posts

Record a lot of errors in YOLOV5

ET framework — Playercomponent Learning Note Norman

CF1349F1 Slime and Sequences (Easy Version)

Install webshell open source fortress machine Gateone

POI import Excel analysis of various format unit grid public methods for finishing