cleoold/index.html

## index.html
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clock</title>
</head>

<body>
    <div id="root"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        function Clock() {
            const [time, setTime] = React.useState(new Date());

            React.useEffect(() => {
                let timeout = setTimeout(function fn() {
                    setTime(new Date());
                    timeout = setTimeout(fn, 1000);
                }, 1000);
                return () => clearTimeout(timeout);
            }, []);
            return (
                <span style={{
                    display: 'block',
                    position: 'absolute',
                    font: '100px "Century Gothic", Futura, sans-serif',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)'
                }}>
                    {`${('0' + time.getHours()).slice(-2)}:${('0' + time.getMinutes()).slice(-2)}:${('0' + time.getSeconds()).slice(-2)}`}
                </span>
            );
        }
        ReactDOM.render(
            <Clock />, document.querySelector('#root')
        );
    </script>
</body>

</html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Clock</title>
	</head>

	<body>
	<div id="root"></div>

	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

	<script type="text/babel">
	function Clock() {
	const [time, setTime] = React.useState(new Date());

	React.useEffect(() => {
	let timeout = setTimeout(function fn() {
	setTime(new Date());
	timeout = setTimeout(fn, 1000);
	}, 1000);
	return () => clearTimeout(timeout);
	}, []);
	return (
	<span style={{
	display: 'block',
	position: 'absolute',
	font: '100px "Century Gothic", Futura, sans-serif',
	top: '50%',
	left: '50%',
	transform: 'translate(-50%, -50%)'
	}}>
	{`${('0' + time.getHours()).slice(-2)}:${('0' + time.getMinutes()).slice(-2)}:${('0' + time.getSeconds()).slice(-2)}`}
	</span>
	);
	}
	ReactDOM.render(
	<Clock />, document.querySelector('#root')
	);
	</script>
	</body>

	</html>