Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <h2>{{now}}</h2> <button @click="vypocitat">vypočítat</button> <label>Dnů <input v-model="dny" /></label> <label>Hodin <input v-model="hour" /></label> <label>Minut <input v-model="minute" /></label> <label>Vteřin <input v-model="second" /></label> <label>Milisec <input v-model="milisec" /></label> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { background-color: #222222; color: white; font: 2em sans-serif; display: flex; justify-content: center; align-items: center; } #app { display: flex; justify-content: center; flex-flow: column wrap; } #app input { margin: 10px; padding: 10px; border-radius: 50px; border: none; outline: none; width: 200px; } #app label { margin: 10px; color: #08f79b; }
CSS
Autoformát
CSS reset
Až na konci
new Vue({ el: "#app", data: { now: new Date().toLocaleString(), dny: 0, hour: 0, minute: 0, second: 0, milisec: 0 }, methods: { vypocitat: function(){ this.now = new Date().getTime(++ this.milisec).toLocaleString(); } }, watch: { dny: function(v) { this.minute = v * 1440; }, // Hour hour: function(v) { this.minute = v * 60; }, // Minute minute: function(v) { this.hour = v / 60; this.second = v * 60; this.milisec = v * 60000; this.dny = v / 1440; }, // Second second: function(v) { this.minute = v / 60; } } });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>