HTML入门

最新推荐文章于 2023-05-03 22:19:26 发布

琉璃浅雪

最新推荐文章于 2023-05-03 22:19:26 发布

阅读量165

点赞数

分类专栏：个人搞事

本文链接：https://blog.csdn.net/qq_33646587/article/details/53132541

版权

个人搞事专栏收录该内容

2 篇文章 0 订阅

订阅专栏

不管怎么说，先上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <script type="text/javascript">
        var state = 0;//控制动画执行步骤
		var speed = 5;//动画速度
		//收起当前图片
        function close(){
            if(item.width>0) {
                item.width = item.width - Math.ceil(speed*Math.cos(item.width/con_wid*1.57));
            }
            else item.width=0;
        }
        function Step1(){
            if(state ==1) {
                if (item.width > 0) {
                    close();
                    var t = setTimeout("Step1()",10);
                }
                else
                    state = 2;
                    Step2();
                        }
        }
		//换上下一张图片
		function Step2() {
            if(state==2) {
                var a = Math.floor(Math.random() * 21) + 1;
                item.src = "onmyoji/" + a + ".png";
                state = 3;
                Step3();
            }
        }
		//铺开下一张图片
		function open(){
            if(item.width <con_wid) {
                item.width = item.width + Math.ceil(speed*Math.cos(item.width/con_wid*1.57));
            }
            else  item.width=con_wid;
        }
        function Step3() {
            if(state ==3){
                if(item.width < con_wid) {
                    open();
                    var t = setTimeout("Step3()",10);
                }
                else
                {
                    state=0;
                }
            }
        }
		//动画入口
		function Change(){
		if (state == 0)
		{
		state=1;
		Step1();
		}
		}
    </script>
</head>
<body>
<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;">    
<img src="onmyoji/bg.jpg"  width="100%" height="100%" left="0" top="0"/>
</div>    
<h1 align="center">
<br>
猜剪影游戏
<br></h1>
<p align="center">请猜出下面这个剪影的名字</p>
<div align="center">
<br>
<img src="onmyoji/1.png" id="pic" width="300" height="400" align="center">
</div>
<div align="center">
<br>
<input type="button" οnclick="Change();"  value="下一题" >
</div>
<script type="text/javascript"> 
//加载图片
	var item = document.getElementById("pic"); 
	var con_wid = item.width;
</script>
</body>
</html>

这里，主要是学习了一个万能的<div></div>的排版方法，并且单纯地用JS写了个小轮子。

CSS还没接触，所以暂时就这样子。

主要的网页的布置有这些。

1.body

<body>

中间就是会显示的内容

</body>

2.head

<head>

感觉有点像头文件的感觉

</head>

3.<div></div>能够形成一个区块。估计后面配合CSS使用可以搞事情。