网页设计第十章总结

最新推荐文章于 2025-04-24 17:30:45 发布

damaoyoo

最新推荐文章于 2025-04-24 17:30:45 发布

阅读量191

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/damaoyoo/article/details/143981839

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>head中定义的JS函数</title>
		<script type="text/javascript">
			function message() {
				alert("调用JS函数！sum(100,200)=" + sum(100, 200));
			}
 
			function sum(x, y) {
				return x + y;
			} //返回函数计算结果
		</script>
	</head>
	<body>
		<h4>head标记内定义两个JS函数</h4>
		<p>无返回值函数：message()</p>
		<p>有返回值函数：sum(x,y)</p>
		<form>
			<input name="btncal" type="button" onclick="message();" value="计算并显示两个数的和">
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>body中的JavaScript脚本</title>
	</head>
	<body>
		<p id="clk">Clicke Here</p>
		<script type="text/javascript">
			var demo = document.getElementById("clk");
			demo.onclick = msg;
 
			function msg() {
				alert("我是body中的JavaScript脚本");
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>调用外部js文件的JavaScript函数</title>
		<script type="text/javascript" src="js/demo.js">
			document.write("这条语句没有执行，被忽略掉了！");
		</script>
	</head>
	<body>
		<form>
			<input name="btn1" type="button" onclick="message()" value="调用外部js文件的JavaScript函数">
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>直接在事件处理代码中加入JavaScript代码</title>
	</head>
	<body>
		<form>
			<input type="button" onclick="alert('happy');" value="直接调用JavaScript代码">
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数调用</title>
		<script type="text/javascript">
			function sayHello() {
				alert("Hello World!");
			}
		</script>
	</head>
	<body>
		<button onclick="sayHello()">单击这里</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>onchange事件</title>
		<script type="text/javascript">
			function myFunction() {
				var x = document.getElementById("fname");
				x.value = x.value.toUpperCase();
			}
		</script>
	</head>
	<body>
		请输入英文字符:<input type="text" id="fname" onchange="myFunction()" />
		<p>当您离开输入字段时,会触发将输入文本转换为大写的函数.</p>
	</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图示例</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}
body {
    padding: 20px;
}
#container {
    position: relative;
    width: 600px;
    height: 400px;
    border: 1px solid #333;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
#list {
    position: absolute;
    z-index: 1;
    width: 4200px;
    height: 400px;
}
#list img {
    float: left;
    width: 600px;
    height: 400px;
}
#buttons {
    position: absolute;
    left: 250px;
    bottom: 20px;
    z-index: 2;
    height: 10px;
    width: 100px;
}
#buttons span {
    float: left;
    margin-right: 5px;
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
}
#buttons span.on {
    background: orangered;
}
.arrow {
    position: absolute;
    top: 180px;
    z-index: 2;
    display: none;
    width: 40px;
    height: 40px;
    font-size: 36px;
    font-weight: bold;
    line-height: 39px;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, .3);
    cursor: pointer;
}
.arrow:hover {
    background-color: rgba(0, 0, 0, .7);
}
#container:hover .arrow {
    display: block;
}
#prev {
    left: 20px;
}
#next {
    right: 20px;
}
</style>
<script type="text/javascript">
window.onload = function() {
    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;
    var timer;
 
    function animate(offset) {
        var newLeft = parseInt(list.style.left) + offset;
        list.style.left = newLeft + 'px';
 
        if (newLeft > -600) {
            list.style.left = -3000 + 'px';
        }
        if (newLeft < -3000) {
            list.style.left = -600 + 'px';
        }
    }
 
    function play() {
        timer = setInterval(function() {
            next.onclick();
        }, 2000);
    }
 
    function stop() {
        clearInterval(timer);
    }
 
    function buttonsShow() {
        for (var i = 0; i < buttons.length; i++) {
            if (buttons[i].className == "on") {
                buttons[i].className = "";
            }
        }
        buttons[index - 1].className = "on";
    }
 
    prev.onclick = function() {
        index -= 1;
        if (index < 1) {
            index = 5;
        }
        buttonsShow();
        animate(600);
    };
 
    next.onclick = function() {
        index += 1;
        if (index > 5) {
            index = 1;
        }
        animate(-600);
        buttonsShow();
    };
 
    for (var i = 0; i < buttons.length; i++) {
        (function(i) {
            buttons[i].onclick = function() {
                var clickIndex = parseInt(this.getAttribute('index'));
                var offset = 600 * (index - clickIndex);
                animate(offset);
                index = clickIndex;
                buttonsShow();
            };
        })(i);
    }
 
    container.onmouseover = stop;
    container.onmouseout = play;
    play();
}
</script>
</head>
<body>
<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/3693fea1713ada83be79dd8a79ff518.jpg" alt="5" />
        <img src="img/4caa50a5343d04247f90434d67e6e70.jpg" alt="1" />
        <img src="img/52f6f8c4781f29c08f38e0d290ef0cc.jpg" alt="2" />
        <img src="img/6995e40936c41c5676d9101f9265be2.jpg" alt="3" />
        <img src="img/dbbf9099e39fc92fd9e20a05ea341f6.jpg" alt="4" />
        <img src="img/3693fea1713ada83be79dd8a79ff518.jpg" alt="5" />
        <img src="img/4caa50a5343d04247f90434d67e6e70.jpg" alt="1" />
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    &lt;
    &gt;
</div>
</body>
</html>