Placeholder Image

字幕表 動画を再生する

  • What time is it?

  • How am I supposed to use the amazing job script clock at?

  • I just created the ground yourself.

  • That's a great idea.

  • I mean, look at this amazing JavaScript clock at.

  • That's definitely not Photoshopped in place.

  • I can't wait to learn how to make this.

  • Theo.

  • On the right hand side, we can see the final version of our actual clock, which is just a typical analog clock.

  • And on the left, we have an empty index dot html file which contains a link for both our style sheet as well as a script tag for our JavaScript and now inside of his body tag.

  • The first thing we need to do is we needed to find a dip that is going to contain our clock.

  • So we're spending credit if we're gonna give it a class of clock and inside of here, this Div, we're going to put all of our different hands as well as all the different numbers for our clock.

  • So the first thing that we're gonna do is we're gonna define the hands.

  • We can just do that by creating a div with the class here of hand.

  • All of our hands are gonna share this hand class.

  • And then we also wanted to give it a class for which hand it is.

  • In our case, this one will be our hand.

  • We concocted that down, do the same thing for a minute, hint as bulls for a second hand, and this takes care of all three of the hands of our clock.

  • And the next thing we need to do is we need to create jobs for all of our different numbers.

  • For example, we want them to have a class of number as well as another class of number one, all the way down to number 12 and inside of here we need to put one.

  • And there's actually a really easy way to do this using Emmet.

  • So within it, we can say what HTML element we want in our case.

  • Div.

  • Then if we want classes, we just put dots.

  • So we want a dot number on all of these and we also want a dot number, But we want this to be implemented.

  • So if we put a dollar sign right here, this is going to replace it with a number, and we just say times 12 because we want there to be 12 different numbers in here one through 12 then inside of these curly brackets.

  • Whatever you put in here is going to go in between the two tags.

  • So in our case, all we want to do is again put a number, which we're going to increment 12 times.

  • Now, if we enter on this, you'll see that already generates here all of these different device for us.

  • So we don't have to manually typing out.

  • Let's delete the one we manually typed.

  • And that's all the HTML we need for this entire application.

  • We can just save that, and we can open this up using live sober.

  • So let's go over here right Click this open with live server and you'll see when this opens up that is really basic and pretty much completely useless right now, in order to make this actually more useful, let's go into our styles that CSS, which for now all I've done is I've changed everything to be using border box, and I've changed the font family to be gotten grounded or sand serves as a fallback.

  • You can use whatever font you want for this application.

  • But I highly recommend using border box for box sizing because it makes sizing things so much easier now to get started.

  • Let's first fly the background that we want to our body so we could just apply a background here and I actually just copied this straight over.

  • Essentially, all this is is a linear Grady in't going to the right with a light blue color on the left and the light green color on the right hand side.

  • You can use whatever colors that you want for this.

  • But when we say that you can see we get the same Grady int that we have over here, then the next thing that we want to work on is the actual clock itself.

  • So let's select that clock class that we just created.

  • The first thing you want to do is we want to set our with Anne Heche.

  • In our case, we're going to use 300 pixels as air within height because we need this to be a square and we're also going to give it a background color, this background color, I'm going to use our G ve A because I wanted to be partially transparent.

  • So I'm gonna use entirely white, but with an 80% transparency.

  • And essentially what that's going to do is that's going to make this blue and green colors shine through a little bit, which is just gonna make it look a little bit cleaner.

  • If, for example, we had no place to be here, if one you can see that it's much harsher.

  • But with the 80% it's much more blended in with the background.

  • Next, we want to make this a circle so we can do that by using Border radius 50% which is going to round all of our corners to make a perfect circle.

  • Lastly, what we want to do is we want at a border to this so they could just say a border.

  • Well, say to pixels solid black.

  • And this is just going to stand it out from the background and make it look more like a traditional analog clock.

  • Now the next thing we want to do is work on positioning our numbers in the correct positions on our clock.

  • So let's get on here.

  • We're gonna select our clock dot number and this is going to select every single one of our different numbers.

  • So we need to do all of our shared styles here.

  • And the first thing that we want to do is your own position.

  • These absolutely.

  • Which means if we want to make them relative to the clock, we had to make the clock a position of relative now inside of here for our numbers, we're gonna do a nice little trick to make rotating these around the clock really easy.

  • We're gonna set the with 2 100% and the height to 100%.

  • And if we say that, you see everything gets moved in its top left and have to visualize what we've just done, I'm going to apply a background court, this element.

  • So we're going to use the background color of red because it's really easy to see.

  • And as you can see, we have a giant red square but takes up the entire space of our clock.

  • So to get on numbers position to the very top, for example, number 12 what we need to do is set the textile line here to be centered.

  • Once we do that, you'll see there are 12 moves into the correct position inside the clock, and we remove this background color.

  • But how do we get all the rest of our elements positioned around the clock?

  • And to do that, we're going to use transform because with transform, we can use what's called the rotate property so we can rotate, for example, 30 degrees.

  • And this is going to be where the one position goes and again to visualize how this is working, what's add that background color back in?

  • So we could just say background color of red and you can see it's just rotated that entire rectangle.

  • So it's essentially acting like the top of the clock is up here, and it's going to do that no matter what we do.

  • So, for example, 60 degrees is gonna rotate a little bit farther and so on all the way around.

  • So what we need to do is we need to have a different value for rotate here for every one of our numbers, and to make that happen, we're going to use a variable.

  • We're gonna set this variable to be called rotation, and by default, we want this rotation value to be set to zero.

  • So We're gonna set that to zero here by default.

  • Remove this background color and again everything moves back to the tough.

  • But now we can come in here, we can select our individual numbers.

  • So we'll say Number one, for example.

  • We want this toe have a rotation of 30 degrees, so we can just type in 30 degrees here.

  • And if we say that you see one has moved over.

  • Now let's copy this down a bunch of times because we need to do 60 degrees, 90 degrees, 121 150 180.

  • And so on.

  • All these airs gonna be 30 degrees apart from each other.

  • 210 240.

  • Copy down a couple more times they have to 70 300.

  • And lastly, 3 30 We don't need to worry about 360 because that's what our 12 is already defaulted to.

  • Now we can change all these 123456789 10 and 11.

  • And if we say that boom.

  • All of our numbers are correctly positioned, and that's because of this rotate value.

  • We're just using this rotation variable to set the rotate of our giant red rectangle as we saw earlier.

  • Now that we have all that done, what's actually working, adding in the hands, which are going to be much easier than the numbers, Let's go back to the original example so we can look it exactly how we want these hands to look, Let's go down here.

  • We can select our hand by just saying clock dot hand This will select every single one of our hands and again we want to position these Absolutely.

  • So we can just say position absolute and inside of here we want these to be positioned so that they're centered essentially right here.

  • The bottom of them.

  • We want to be in the dead center so we could just come in here.

  • We can set the bottom to be 50% and this is going to put them dead in the bottom.

  • And we can also make the left here 50%.

  • And if we say but go back to her, you'll see nothing happens.

  • So we need to actually give them a little bit of a dimension.

  • We're gonna give them a with here, for example.

  • Let's say 10 pixels and we're also gonna give it a height, and in our case, we're just gonna get it.

  • How you hear of 40%.

  • And lastly, we need a background course that we can see it so back on color of black.

  • And if you say that we see we get our hand.

  • And when we say that you said that we get our hand, but it's a little bit offset from our 12.

  • If we make our height here 50% it'll be really easy to see that it's officer and not dead centered inside the 12.

  • To fix that, we again just want to use our transform translate this time, and we want to translate negative 50% on the X.

  • So we use translate X.

  • And if we say that, you'll see that it's now dead centered into 12.

  • And essentially this translate xnegative 50% just translated the object by 50% of its with backwards.

  • So that's exactly what we needed.

  • Also inside of here, we want to use that same rotation trick.

  • So where is going to say rotate?

  • And we're gonna use a variable called rotation and this we're going to actually set in the Java script for how We want our hands to rotate, but by default we just want this to be zero so that they actually show up on our screen.

  • And if we say that again, it's showing up just like we wanted to be to see how the rotation looks.

  • What's trained our rotation here 2 30 because that's how it'll be seven at Java script.

  • And to make sure that works down here, we need to make sure we use karaoke on.

  • We want to multiply by one degree just to convert that one value over here of 32 degrees.

  • And if we say that, you'll see that that definitely doesn't look right.

  • It's rotating around the center and not around the bottom.

  • So we need to set a property, which is called transform Origin.

  • I can spell properly, transform origin, and this transform origin allows you to say where you want to transform to be applied to.

  • In our case, we want it to come from the bottom.

  • If we say that you see that it is now just moved itself so that it transforms down here and it's rotated 30 degrees.

  • And if we change this to for example, 90 it'll be at 90 degrees and so on, which is perfect.

  • So let's set that back to zero and work on styling how we want our hand to look, Let's go back here.

  • And as you can see, our hands have a slight white border around the end and they're slightly curved at the end.

  • So let's come in here and do that.

  • We can just sit here a border, which is going to be one pixel, solid white, and we also want to set a border radius.

  • But we only want this on the top left.

  • So let's say border top left radius.

  • We just make this 10 pixels.

  • We're gonna do the same thing on the top right on this.

  • Just because we don't want to curve the bottom of it, we only want a curve the top.

  • Now, if you say that you said we get that nice, curved end of the top and the white border around it, which may be hard to see.

  • Lastly, without out of the way, we want to make sure that these always draw on top of her numbers.

  • So we're going to come in here.

  • We're gonna set ours E index.

  • We're just gonna make it 10.

  • So it'll always be on top of our numbers.

  • And now, as you can see, our hand is on top of the 12 and not behind it.

  • We want to make sure that the height and with hard to find her hand and not for all of the hands let's remove those from here and go in and actually selector individual hands.

  • So we have our clock that hand, not second, and this clocked out, hand out Second is going to hear have a width of five pixels.

  • It's goingto have a height of 45% and we also want to change the background color for this, which is just going to be read.

  • You say that we get a nice little secondhand here and it's looking a little large.

  • Let's actually changes down at three pixels, and that looks much better now.

  • We can copy this and did the exact same thing for other hands.

  • We're gonna have our minute hand in our our hand, and these are both going to be black instead of red.

  • So let's change this to be a black color.

  • Copy that down and now we need to change the heights and the wits are minute hand.

  • We're going to want this to be seven pixels and 40% tall.

  • And down here for our hand, we're gonna make this 10 pixels and 35% tall.

  • Now, if we say that you said that we get all of our different hands being shown up here they look a little bit weird because they're being drawn on top of each other.

  • But once we jump into the drive a script that will no longer be a problem because most of the time they won't all be lined up directly on top of each other.

  • The last thing we have left to do is if we go back to a previous example.

  • We have this nice around black circle in the center, and our entire clock is centered in our screen.

  • So we need to do that.

  • Now let's work on the Black circle first.

  • We can come in here.

  • We could just use a pseudo element.

  • So we're gonna say oclock after, and this is just going to add a new content to the dom.

  • We just say content said it to an empty string and this is going to add a new element, that weaken style.

  • And this new element we wanted again position?

  • Absolutely.

  • So we can say position absolute.

  • We want the background color here to be black because we wanted to be same color as the rest of our hands, and we also wanted to show above them.

  • So we're gonna set the Z Index here toe 11.

  • From there we can go and work on setting the width and the height.

  • So in our case, we're gonna have a width of 15 pixels, height of 15 pixels, and we're also going to want to center it.

  • So we'll say top 50% we're gonna do left 50% and also that same transform trick where we're going to translate negative 50% in both directions, which would just give us something that is nice and centered 100% as opposed to be slightly offset, make sure that's in the correct place.

  • And if we say that, usually we already get our Black Square.

  • We want it.

  • But as you already know, we want this to be a circle on a square so we can just use border radius and we can set that to 50%.

  • And now we get a nice black circle right in the center.

  • Now we can finally move on to center in everything, and we can use the body for this.

  • So instead of here, we wouldn't want to dissect the display to flex.

  • We want to justify our content in the center lips center.

  • And we want to align our items in the centre as well not be saved that it's only been aligned in the horizontal axis and we still want a line in the vertical access.

  • So what we need to do here is we need to set a min height, and this is just going to be 100 view heights.

  • If we say that we now sit, it centered.

  • We have this scroll bar which we do not want, so we can just come in here and set the overflow to hidden.

  • Save that and that's going to remove the scroll bar because it's going to prevent the page from being scroll herbal.

  • An hour clock right here is exactly the same as our clock over here is that for our numbers are a little bit small as you can see, they're much smaller over here.

  • So let's change our font size for our numbers.

  • We could go down to our number, come in here and change the font size.

  • We'll just make this 1.5 are in.

  • Now, if we say that our numbers have gotten quite a bit bigger and easier to read now all we have to do is actually move on to the Java script to make our hands move around as they do over here.

  • So let's jump into the Java script.

  • The first thing we need to do is we need to use set interval because we want to call a certain function.

  • Every second we're gonna call this set clock and every 1000 milliseconds, we're gonna call this function.

  • So it's to find that function called SAT clock.

  • And this function is just going to get a current date.

  • And we can do that by just saying const current date.

  • And if you just call the new date constructor for date, that's going to give you a current date, which is the exact current time that you run it on from here.

  • We can get the seconds from that.

  • So we can say that are seconds ratio is going to be equal to our current date dot get seconds and then since there's 60 seconds in a minute, we just wanted to buy back by 60 so that we know how far to rotate our seconds Hand was copy this down a few times because we need to do the same thing for minutes and we need to do the same thing for hours.

  • So we can just say get minutes and we can say here, get ours.

  • But since we don't want our minute and our hands to jump by entire hours and entire minutes at a time, we want them to slowly and gradually go through.

  • We need to use the seconds ratio, and we want to add that in so we can say seconds ratio plus the get minutes and essentially this seconds ratio is a percentage of a minute.

  • It's going to be like 0.5.

  • For example, we're at 30 seconds 0.75 if we're at 45 seconds and so on and it's going to allow our minutes hand to more gradually move around the clock, we can do the exact same thing with the hours.

  • We wanna have the minutes to it.

  • So we're gonna say or minutes ratio is going to be added to our get ours.

  • And this ours is going to be divided by 12 and not 60 because there's 12 hours on the clock and not 60 now what we want to do is we actually want to set the values for our rotation of our different hands in order to select these values.

  • What's as some data attributes to them?

  • So here's our our hand.

  • We can just say data our hand.

  • We did the exact same thing for a minute and second Delicious.

  • Copy that down.

  • We have a minute hand and lastly, our second hand.

  • Now we can actually select these so they can say, Const, our hand is going to equal to document that query selector and we just want to select that data attributes will say data our hand copy that down because we want to also get a minute hand.

  • And of course, the second hand we need to change these two minute hand and second hand.

  • Now we have all of our different elements that we need to use in order to set them.

  • So let's create a function that's going to do that setting force.

  • We could just call this function set, rotation, set rotation, and this is going to take the element that we want to rotate as well as the rotation that we want to use.

  • And this is just going to be a rotation ratio.

  • Now instead of here, we can take that element.

  • We could get the style of that element on.

  • We can call this set property method, and this set property method is going to take what property we want to set.

  • This isn't the CSS, so we want to set our rotation variable, and we want to set it to our rotation ratio times 360 sensors 360 degrees inside of our complete rotation.

  • Now we can call that function will say set rotation was do it first with the second hand and we want to use this second ratio.

  • Copy that down.

  • We're going to use the minutes ratio and the hour ratio, and we want to use the minute hand and, of course, the hour hand.

  • Now, if we save that, you'll see that over here our clock is starting to move.

  • But you will notice that it starts out at the top and then jumps to the actual position of the real time after a second and order to get around that we could just call set clock as soon as our page loads and then, as you can see, it won't be refreshed.

  • It will immediately put the hands in the correct position for us.

  • And now our clock right here is working exactly the same as our clock.

  • Over here, you can see they're even perfectly sync up, which is a great sign.

  • And now, if you want to improve your JavaScript skills even more, make sure she got my other projects linked over here and subscribe to the channel for more projects just like this.

  • Thank you all very much for watching this video and have a good day.

What time is it?

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

JavaScriptで時計を作る (Build A Clock With JavaScript)

  • 9 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語