Fork me on GitHub

html_001 

<!DOCTYPE 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>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>
<body>
    <div id = 'example'> </div>
    <script type = 'text/babel'>
            // const  element = <h1>hello world!</h1>
            // ReactDOM.render(
            //     element,
            //     document.getElementById('example')
            // )



            function  tick() {
                const elemet = (
                    <div>
                        <h1>hello world!</h1>
                        <h2>现在是{new Date().toLocaleTimeString()}.</h2>
                    </div>
                );
                ReactDOM.render(
                    elemet,
                    document.getElementById('example')
                );
            }
            setInterval(tick, 1000);


            function NumberDescriber(props){
                let description;
                if(props.number % 2 == 0){
                    description = <strong>even</strong>
                }else{
                    description = <i> odd </i>;
                }
                return <div>{  props.number } is an  {description}number</div>
            }

            function NumberDescriber1(props){
                let description;
                if(props.number % 2 == 0){
                    description = <strong>even</strong>
                }else{
                    description = <i>odd </i>
                }
                return <div>{ props.number} is an {description} number </div>
            }


    </script>

    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
    <h1>这是一个标题</h1>
    <h2>这是一个标题</h2>
    <h3>这是一个标题</h3>

    <p>这是一个段落</p>
    <p>这是另外一个段落</p>

    <a href="http://www.baidu.com"  target="_blank">百度一下</a>
  
</body>
</html>

　　

posted @ 2021-03-27 21:51  ZZZZW  阅读(29)  评论(0)  编辑  收藏  举报
AmazingCounters.com