79a2f023e7
* Add the `onvisible` event using the IntersectionObserver * Add a visible example This example is based on https://codepen.io/ryanfinni/pen/VwZeGxN * Remove web-sys CustomEvent feature for html package * update js bindings and hash * Use dioxus doc instead of lorem ipsum * Fix clippy warning * Add get_target method to the event data * Make `get_time` return an Instant instead of a f64 * fix merge conflicts, compilinga * remove target * small nits * serialzie as time_ms * fix timing, works on desktop * remove latent nits, fix hash * box size clippy * fix browserlist cargo.lock --------- Co-authored-by: Evan Almloff <evanalmloff@gmail.com> Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>
43 lines
1.1 KiB
Rust
43 lines
1.1 KiB
Rust
//! A simple little clock that updates the time every few milliseconds.
|
|
|
|
use async_std::task::sleep;
|
|
use dioxus::prelude::*;
|
|
use web_time::Instant;
|
|
|
|
fn main() {
|
|
dioxus::launch(app);
|
|
}
|
|
|
|
fn app() -> Element {
|
|
let mut millis = use_signal(|| 0);
|
|
|
|
use_future(move || async move {
|
|
// Save our initial timea
|
|
let start = Instant::now();
|
|
|
|
loop {
|
|
sleep(std::time::Duration::from_millis(27)).await;
|
|
|
|
// Update the time, using a more precise approach of getting the duration since we started the timer
|
|
millis.set(start.elapsed().as_millis() as i64);
|
|
}
|
|
});
|
|
|
|
// Format the time as a string
|
|
// This is rather cheap so it's fine to leave it in the render function
|
|
let time = format!(
|
|
"{:02}:{:02}:{:03}",
|
|
millis() / 1000 / 60 % 60,
|
|
millis() / 1000 % 60,
|
|
millis() % 1000
|
|
);
|
|
|
|
rsx! {
|
|
document::Stylesheet { href: asset!("/examples/assets/clock.css") }
|
|
div { id: "app",
|
|
div { id: "title", "Carpe diem 🎉" }
|
|
div { id: "clock-display", "{time}" }
|
|
}
|
|
}
|
|
}
|