DF_jie-CSDN博客

原创 input框的获得与失去焦点

获得与失去焦点 <input type="text" value="abcd"> <script> //元素对象.属性名=新的值 //需求1. 当input框失去焦点时获取value值 var input = document.querySelector('input'); input.onblur = function () { //获取value值

2020-11-25 22:26:06 673

原创常用的键盘事件

键盘事件键盘事件事件案例： <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //2. keydown 按键按下的时候触发能识别功能键比如 ctrl shift 左右箭头啊 docu

2020-11-24 13:17:46 1066

注册事件（两种方式）给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统注册方式和监听注册方式。传统注册方式利用on开头的事件 onclickbtn.onclick = function(） {}特点：注册事件的唯一性同一元素同一事件只能设置一个处理函数，最后注册的处理函数讲覆盖前面注册的处理函数。监听注册方式addEventListener() 它是一个方法IE9 之前不支持此方法，可使用attachEvent（）代替特点：同一个元素同一个事件可以注册多个监听

2020-11-23 22:52:40 2004

原创倒计时效果

上一篇我们写了怎么获得倒计时，现在来写一个倒计时的效果写倒计时效果需要用到我们的定时器；定时器分为两种：一种是 setTimeout（）定时器，也叫爆炸定时器，顾名思义就是这个定时器只使用一次就结束了。另一种就是 setInterval （）定时器，也称为闹钟定时器，每间隔一段时间就会执行这个定时器的效果。setTimeout（）定时器setTimeout （）语法规范： window.setTimeout(调用函数, 延时时间);这个window在调用的时候可以省略这个延时时间单位

2020-11-22 17:04:18 389 1

原创获取倒计时

倒计时：就是你写一个时间到现在距离多久（亦可一个时间到另一个时间是多多久）这两种方法效果也是一样的。从最基本的开始制作倒计时效果：（写了第一种效果）第一步：获得当前时间 <script> // Date() 日期对象是一个构造函数必须使用new 来调用创建我们的日期对象 // 1. 使用Date 如果没有参数返回当前系统的当前时间 var date = new Date(); console.log(date)

2020-11-21 13:34:14 267 1

原创表单

1.表单目的：是为了收集用户信息。2.表单的组成：由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。3.表单域表单域是一个包含表单元素的区域。在 HTML 标签中，标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器.实现代码：<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>如： <form actio

2020-11-20 23:00:03 164

原创表格与列表

表格表格主要用于显示、展示数据。表格不是用来布局页面的,而是用来展示数据的。如图：展示出看一个很直观的数据。单元格用法: <table>  <tr> <th>姓名</th> <th>性别</th> <.

2020-11-20 22:40:11 2052

原创排他思想（点击它时，只有它一个做效果）

排他思想：排除其他元素，给自己添加效果（独享一份）；例如：先设置几个按钮，在写出JavaScript 显示效果；实现效果：点击任何一个按钮，只有当前按钮显示效果（如：添加背景颜色）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

2020-11-20 13:09:08 438

原创模态框的拖动

模态框的拖动效果：当我们点击模态框的时候，使用鼠标滑动，模态框跟着移动。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>模态框的拖动</title> <style> //写出简单的CSS样式随意即可 .login-header { width: 10

2020-11-19 21:38:51 327

DF_jie的博客