关于事件~
事件三要素 : 事件源 事件类型 事件处理程序
事件源: 事件被触发的对象 即按钮
事件类型: 鼠标点击事件 (onclick)
事件处理程序: 通过函数赋值的方式
执行步骤: 获取事件源 注册事件 添加事件处理程序
获取事件源: var btn = document.getElementById(‘btn’)
注册事件: btn.onclick
添加事件处理程序: function() { alert(‘点秋香’) }
点击按钮 弹出内容
分析: 1.创建按钮 2.获取到按钮 3.给按钮绑定事件
<button id='btn'>唐伯虎</button> //js代码 var btn = document.getElementById('btn') btn.onclick = function() { alert('点秋香') }
- 改变元素内容(点击按钮 显示当前时间)
分析: 1.创建div和按钮 2.获取到div和按钮 3.按钮绑定到div输出的函数 4.自定义函数
<div>显示当前时间</div> <button>显示时间</button> //js代码 var div = document.querySelector('div') var btn = document.querySelector('button') btn.onclick = function() { div.innerHTML = getDate() } function getDate(){ var date = new Date() var year = date.getFullYear() var month = date.getMonth() + 1 var dates = date.getDate() var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六',] var day = date.getDay() return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day] }
- 分时问候(不同时间不同的问候)
分析: 1.创建div 2.获取div 3.获取时间 4.时间绑定到if条件语句 按需输出
<div></div> //js代码 var div = document.querySelector('div') var date = new Date() var hour = date.getHours() if(hour < 12){ div.innerHTML = '早上好,写代码' }else if(hour < 18){ div.innerHTML = '下午好,继续写代码' }else{ div.innerHTML = '晚上好,依旧写代码' }
