<pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick、toUpperCase以及onkeyup</title>
<style>
button{width: 100px;height: 100px;font-size: 20px}
</style>
</head>
<body>
<button οnclick="test()">点击</button>
<input type="text" placeholder="请输入您的文字：" οnclick="this.value='谢谢'">
<input type="text" placeholder="统一变成大写" onkeyup = "changeBig()">
<!-- onkeyup是当键盘向上的时候 -->
<button οnclick="alert('123!')">弹出</button>
<button>显示</button>
<script>
function test(){
console.log('弹出了！')
}
var input = document.getElementsByTagName('input')[0];
var btn = document.getElementsByTagName('button')[2];
var i=0;
btn.onclick = function(){
i++;
console.log(input.value+i);
}
var input2 = document.getElementsByTagName('input')[1];
function changeBig(){
var bigX = input2.value.toUpperCase();
console.log('改为大写只后是：'+bigX)
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>confirm</title>
</head>
<body>
<button οnclick="test()" id="btn">点击按钮</button>
<script>
var btn = document.getElementById("btn");
function test(){
if(confirm("确定要改变按钮的颜色吗？"))
{
btn.innerHTML = '按钮点击';
btn.style.color = "red";
}
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange</title>
</head>
<body>
<input type="text" id="int1" οnchange="test()">
<script>
var int1 = document.getElementById('int1');
function test(){
alert("您改变了里面的内容！")
}
</script>
<!-- 当里面的内容改变是，触发事件 -->
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblur</title>
</head>
<body>
<input type="text" id="int1" value="获得焦点" οnfοcus="test1()"><input type="text" id="int2" value="失去焦点" οnblur="test2()">
<script>
var int1 = document.getElementById('int1');
var int2 = document.getElementById('int2');
function test1(){
console.log('第一个获得了焦点');
}
function test2(){
console.log("第二个失去了焦点")
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>noload</title>
<script>
function test(){
alert("正在加载，请稍等……")
}
</script>
</head>
<body οnlοad="test()">
<h2>高考成绩出来了……</h2>
</body>
</html>
<!-- 一、可以直接写在script里
例：<html>
<script>
function loadBody()
{
...
}
window.onLoad = "loadBody()";
</script>
二、可以写在body里
例：
<script>
function loadBody()
{
...
}
</script>
<body οnlοad="loadBody()">
三、可以把调用函数直接写在脚本里
<script>
function loadBody()
{
...
}
loadBody();
</script> -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onselect</title>
</head>
<body>
<input type="text" οnselect="test()" value="值1"><input type="text" οnselect="test2()" value="值2">
<script>
var input = document.getElementsByTagName('input');
function test(){
console.log(input[0].value);
}
function test2(){
console.log(input[1].value);
}
</script>
<!-- 选中输入框里面的文字的时候 -->
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onunload</title>
<script>
function test(){
alert("您确定要关闭吗？")
}
window.onunload = test;
</script>
</head>
<body>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
