- 基本点击事件
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
函数处理事件:
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
<h1 onclick="changetext(this)">点击文本!</h1>
函数的变换:显示当前的时间
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
//<em>指的是当前的字体显示为斜体
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
- 点击事件的后置
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
//通过getElementById给按钮增加点击函数
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
- 自定义检测浏览器的cookie是否可用
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
- 大小写的自动转换
<script>
function myFunction(){
var x=document.getElementById("fname");
//查找id
x.value=x.value.toUpperCase();
//将该部分的内容转换为大写
}
</script>
- 对鼠标移动的检测
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
//定义一个div框
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
- 颜色的改变—style
<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文本上</h1>