Εμφάνιση 1-7 από 7

Θέμα: Javascript

  1. #1
    Εγγραφή
    22-12-2017
    Μηνύματα
    28
    Downloads
    0
    Uploads
    0
    ISP
    ΟΤΕ Conn-x
    Την καλησπέρα μου μάγκες

    Ερώτησις

    Έστω ο κάτωθι κώδικας

    Κώδικας:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        position:absolute;
        top:72%;
        left:5px;
        
    </style>
    </head>
    <body>
    
    <canvas id="canvas" width="400" height="400"
    style="background-color:#333">
    </canvas>
    
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var radius = canvas.height / 2;
    ctx.translate(radius, radius);
    radius = radius * 0.90
    setInterval(drawClock, 1000);
    
    function drawClock() {
      drawFace(ctx, radius);
      drawNumbers(ctx, radius);
      drawTime(ctx, radius);
    }
    
    function drawFace(ctx, radius) {
      var grad;
      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, 2*Math.PI);
      ctx.fillStyle = 'white';
      ctx.fill();
      grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
      grad.addColorStop(0, '#333');
      grad.addColorStop(0.5, 'white');
      grad.addColorStop(1, '#333');
      ctx.strokeStyle = grad;
      ctx.lineWidth = radius*0.1;
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
      ctx.fillStyle = '#333';
      ctx.fill();
    }
    
    function drawNumbers(ctx, radius) {
      var ang;
      var num;
      ctx.font = radius*0.15 + "px arial";
      ctx.textBaseline="middle";
      ctx.textAlign="center";
      for(num = 1; num < 13; num++){
        ang = num * Math.PI / 6;
        ctx.rotate(ang);
        ctx.translate(0, -radius*0.85);
        ctx.rotate(-ang);
        ctx.fillText(num.toString(), 0, 0);
        ctx.rotate(ang);
        ctx.translate(0, radius*0.85);
        ctx.rotate(-ang);
      }
    }
    
    function drawTime(ctx, radius){
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        //hour
        hour=hour%12;
        hour=(hour*Math.PI/6)+
        (minute*Math.PI/(6*60))+
        (second*Math.PI/(360*60));
        drawHand(ctx, hour, radius*0.5, radius*0.07);
        //minute
        minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
        drawHand(ctx, minute, radius*0.8, radius*0.07);
        // second
        second=(second*Math.PI/30);
        drawHand(ctx, second, radius*0.9, radius*0.02);
    }
    
    function drawHand(ctx, pos, length, width) {
        ctx.beginPath();
        ctx.lineWidth = width;
        ctx.lineCap = "round";
        ctx.moveTo(0,0);
        ctx.rotate(pos);
        ctx.lineTo(0, -length);
        ctx.stroke();
        ctx.rotate(-pos);
    }
    </script>
    
    <input type="button" class="button" value="Play / Stop">
    
    </body>
    </html>
    Πως μπορώ με μια συνάρτηση/ σκριπτάκι (onClick) να κάνω το ρολόι να σταματάει και να ξαναρχίζει όποτε θέλω;

    Ευχαριστώ προκαταβολικά

  2. #2
    Το avatar του μέλους Red Yonko
    Red Yonko Guest
    Όταν λες να ξαναρχίζει εννοείς από κει που σταμάτησε ή γενικώς να συνεχίζει κανονικά την παγκοσμια ώρα;

  3. #3
    Εγγραφή
    22-12-2017
    Μηνύματα
    28
    Downloads
    0
    Uploads
    0
    ISP
    ΟΤΕ Conn-x
    Παράθεση Αρχικό μήνυμα από Red Yonko Εμφάνιση μηνυμάτων
    Όταν λες να ξαναρχίζει εννοείς από κει που σταμάτησε ή γενικώς να συνεχίζει κανονικά την παγκοσμια ώρα;
    Από εκεί που σταμάτησε

    Το ρολόι είναι ενδεικτικό. Απλά θέλω να σταματάω και να ξαναξεκινάω μια συνάρτηση που ήδη τρέχει μέσω ενός κουμπιού

  4. #4
    Εγγραφή
    13-11-2011
    Περιοχή
    Χολαργός
    Ηλικία
    37
    Μηνύματα
    1.440
    Downloads
    1
    Uploads
    0
    Τύπος
    VDSL2
    Ταχύτητα
    24000 / 4500
    ISP
    Wind
    DSLAM
    Wind - ΧΟΛΑΡΓΟΣ
    Path Level
    Interleaved
    Όπως υπάρχει η setinterval, υπάρχει και η clearinterval() για να το σταματήσεις.

  5. #5
    Εγγραφή
    22-12-2017
    Μηνύματα
    28
    Downloads
    0
    Uploads
    0
    ISP
    ΟΤΕ Conn-x
    Παράθεση Αρχικό μήνυμα από MitsakosGR Εμφάνιση μηνυμάτων
    Όπως υπάρχει η setinterval, υπάρχει και η clearinterval() για να το σταματήσεις.


    - - - Updated - - -

    Με δύο κουμπιά μπορώ να το κάνω. Nα φτιάξω δηλαδή ένα κουμπί για κάθε συνάρτηση

    Το θέμα είναι ότι εγώ θέλω να το κάνω με ένα κουμπί (play/pause)

  6. #6
    Εγγραφή
    13-11-2011
    Περιοχή
    Χολαργός
    Ηλικία
    37
    Μηνύματα
    1.440
    Downloads
    1
    Uploads
    0
    Τύπος
    VDSL2
    Ταχύτητα
    24000 / 4500
    ISP
    Wind
    DSLAM
    Wind - ΧΟΛΑΡΓΟΣ
    Path Level
    Interleaved
    Τι σε αποτρεπει απο το να το κανεις με ενα κουμπί; απλα χρειάζεσαι έναν έλεγχο για το αν "τρέχει" το ρολόι ή όχι.

  7. #7
    Το avatar του μέλους Red Yonko
    Red Yonko Guest
    Έχω διαβάσει πως όταν βάλεις var dokimh, η dokimh θα ισχύει μόνο για το συγκεκριμένο function.

    Και τώρα τεστάρω αυτό:

    Spoiler:
    Κώδικας:
    <meta charset="utf-8"/><script>
    
    
    function ages(){
    
    var age = 28
    if ( age => 18)
    	document.write("You are an adult")
    	}
    	
    function ages1(){
    
    if ( age => 18)
    	document.write("You are an adult")
    	}
    
    </script>
    <form>
    <input type="button" onclick="ages1()" value="CLICK">
    </form>


    και βλέπω πως είναι το ίδιο με αυτό:

    Spoiler:
    Κώδικας:
    <meta charset="utf-8"/><script>
    
    
    function ages(){
    
    age = 28
    if ( age => 18)
    	document.write("You are an adult")
    	}
    	
    function ages1(){
    
    if ( age => 18)
    	document.write("You are an adult")
    	}
    
    </script>
    <form>
    <input type="button" onclick="ages1()" value="CLICK">
    </form>


    Κάνω κάτι λάθος; Θέλω αυτά που παίρνουν var να ισχύουν μονο για το συγκεκριμένο function

Παρόμοια Θέματα

  1. Γίνεται να φτιάξεις apk που να περιέχει μόνο ένα javascript?
    Από Red Yonko στο φόρουμ Προγραμματισμός και γλώσσες προγραμματισμού
    Μηνύματα: 5
    Τελευταίο Μήνυμα: 10-04-18, 12:03
  2. Βοήθεια σε JavaScript
    Από NikosB98 στο φόρουμ Προγραμματισμός και γλώσσες προγραμματισμού
    Μηνύματα: 7
    Τελευταίο Μήνυμα: 28-01-18, 16:39
  3. Javascript ερωτήσεις αρχάριου
    Από 8anos στο φόρουμ Προγραμματισμός και γλώσσες προγραμματισμού
    Μηνύματα: 2
    Τελευταίο Μήνυμα: 16-11-17, 23:12
  4. Μηνύματα: 7
    Τελευταίο Μήνυμα: 28-09-17, 08:19

Bookmarks

Bookmarks

Δικαιώματα - Επιλογές

  • Δεν μπορείτε να δημοσιεύσετε νέα θέματα
  • Δεν μπορείτε να δημοσιεύσετε νέα μηνύματα
  • Δεν μπορείτε να αναρτήσετε συνημμένα
  • Δεν μπορείτε να επεξεργαστείτε τα μηνύματα σας
  •  
  • Τα BB code είναι σε λειτουργία
  • Τα Smilies είναι σε λειτουργία
  • Το [IMG] είναι σε λειτουργία
  • Το [VIDEO] είναι σε λειτουργία
  • Το HTML είναι εκτός λειτουργίας