plannothing-CSDN博客

原创 JavaScript中用户注册时阅读条款后的事件练习

<html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #info{ width:300px; height: 500px; background-color: #cbd; overflow: auto; } </style> <script type="text/javascri

2020-08-15 15:56:46 765

原创 JavaScript中定时器的练习

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 使图片可以自动切换 */ //获取img标签 var img1 = document.getE

2020-08-22 10:49:08 786

原创 JavaScript中定时器

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //获取count var count = document.getElementById("count"); //使c

2020-08-22 09:50:31 260

原创 JavaScript中用方向键来移动方块

!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:100px; height: 100px; background-color:red ; position: absolute; } </style> <scr

2020-08-18 20:26:02 906

原创 JavaScript中键盘事件

<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 键盘事件 * onkeydown * - 按键被按下 * - 对于onkeydown来说如果一直按着某个按键不松手，则事件会.

2020-08-18 19:52:21 849

原创 javascript中滚轮事件

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script type="text/javas

2020-08-17 21:06:43 1824

原创 JavaScript中拖拽图片

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } #box2{ width:

2020-08-17 19:57:08 489

原创 JavaScript中拖拽

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } #box2{ width:

2020-08-17 18:57:30 151

原创 JavaScript中事件的传播

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:300px; height: 300px; background-color: yellowgreen; } #box2{ width:200px; height

2020-08-16 16:15:56 164

原创 JavaScript中事件的绑定

<html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 点击按钮以后弹出一个内容 */ //获取按钮对象 var btn01 = document.getElementById("btn01")

2020-08-16 15:39:25 138

原创 JavaScript中事件的委任

<html><head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ //点击按钮以后添加超链接 var u1 = document.getElementById("u1"); var btn01 = document.g

2020-08-16 14:41:24 114

原创 JavaScript中事件冒泡

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: #CCBBDD; } span{ background-color: yellow; }

2020-08-15 20:05:14 108

原创 JavaScript中鼠标移动加上相应的图片

<html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height: 2000px; } #box01{ width: 100px; height: 100px; background-color: red; /* * 开启box01的绝对定位 */ .

2020-08-15 19:20:52 556

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">#areaDiv { border: 1px solid black; width: 300px; height: 50px; margin-botto

2020-08-15 17:50:53 2217

原创 javascript中操作属性

<html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box01{ width:100px; height:100px; background-color:red; padding:10px; border:10px solid yellow; } #box02{ paddin

2020-08-15 15:52:22 142

原创 JavaScript中getstyle方法来读取元素的样式

<html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:; height:100px; background-color:yellow; } </style> <script type="text/javascript"> window.o

2020-08-14 21:26:10 1016

原创 JavaScript中使用dom操作css

<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:200px; height:200px; background-color:red !important; } </style> <script type="text/javascript"&

2020-08-14 19:44:15 156

转载 javascript中for循环中超链接a的问题

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">/* * 点

2020-08-11 06:28:39 879

原创 JavaScript中利用createElement添加元素

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">/* * .

2020-08-11 06:17:56 1310

原创 JavaScript中添加删除修改

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="styleshe

2020-08-10 20:56:50 893

原创 JavaScript中删除元素练习

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">/* * 点

2020-08-10 19:30:23 403

转载 JavaScript中增删改

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/javascript">

2020-08-09 15:28:22 166

原创 Javascript中dom查询的其他方法

!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //获取body标签 var body = document.getElementsByTagName("body")[0]; consol.

2020-08-09 14:55:16 87

原创 JavaScript中全选全不选实例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全选练习</title><script typ.

2020-08-09 09:37:54 339

原创 javascript中dom查询举例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link

2020-08-08 20:18:54 98

原创 JavaScript中运用dom来制作图片轮播

!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 500px; margin: 50px auto; padding: 10px; text-align:.

2020-08-06 21:30:04 325

原创 JavaScript中文档的加载

/* * 浏览器在加载一个页面时，是按照自上而下的顺序加载的 * 读取到一行就运行到一行，如果将script标签写到页面的上边 * 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载， * 会导致无法获取到DOM对象 */ //获得ID=btn的按钮 /* * onload事件会在整个页面加载完成之后才触发 * 为window绑定一个onload事件 * 该事件对应的响应函数将会在页面加载完成之后执行 * 这样可

2020-08-03 21:05:23 136

原创 JavaScript中事件

<!--<button id = "btn" onclick= "alert('讨厌你点我干嘛')">我是一个按钮</button> <button id = "btn" ondblclick= "alert('讨厌你点我干嘛')">我是一个按钮</button> <button id = "btn" onmousemove= "aler.

2020-08-03 20:39:15 116

原创 JavaScript中Dom

<button id = "btn01">我是一个按钮</button> <script type="text/javascript"> /* * 浏览器已经为我们提供文档节点对象这个对象是window对象的属性 * 可以在页面中直接使用，文档节点代表的是整个网页 */ console.log(document); var btn = document.getElementById("btn01"); //修改按钮的文字 .

2020-08-03 20:13:37 79

原创 javascript中的date方法

/** Date对象* - 在js中使用Date对象来表示一个时间*/ //创建一个Date对象 //如果直接是使用构造函数创建一个Date对象，则会封装为当前代码执行的时间 var d = new Date(); //创建一个指定的时间对象 //需要在构造函数中传递一个时间的字符串作为参数 //日期的格式月份/日/年时：分：秒 var d2 = new Date("12/2/2009 12:25:35") console.log(d2);

2020-08-02 16:04:19 773

原创 JavaScript中函数对象方法arguments

/* * 在调用函数时，浏览器每次都会传递进两个隐含参数 * 1.函数的上下文对象this * 2.封装实参的对象arguments * - arguments 是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度 * - 在调用函数时，我们所传递实参都会在arguments中保存 * - 我们即使不定义形参，也可以通过arguments来调用实参 * arguments[0]表示第一个实参 * arguments[1]表示..

2020-08-02 15:20:50 97

原创 javascript中call和apply方法

function fun(a,b){ console.log("a ="+a); console.log("b = "+b); alert(this.name); } /* * call()和apply（） * - 这两个方法都是函数对象的方法，需要通过函数对象来调用 * - 当对函数调用call（）和apply（）都会调用函数执行 * - 在调用call和apply（）可以向一对象指定第一个参数 * 此时这个对象会成为函数执行时的thi..

2020-08-02 14:53:24 215

原创 JavaScript中数组的方法

var arr = ["孙悟空","猪八戒","沙和尚"]; var arr2 = ["白骨精","玉兔精","蜘蛛精"]; var arr3 = ["玉皇大帝","玉兔精","蜘蛛精"]; /* * concat()可以连接两个或多个数组，并将新的数组返回 * - 该方法不会对原数组产生影响 */ var result = arr.concat(arr2,arr3,"铁扇公主"); console.log(result); /* * joi..

2020-08-02 11:29:23 104

原创 javascript中数组数字元素的去重

//创建一个数组 var arr = [1,2,3,2,2,3,4,2,5]; //去除数组中重复的数字 //获取数组中每一个元素 function quchong(){ for(var i = 0;i<arr.length;i++){ for(var j =i+1;j<arr.length;j++){ //判断两个数的值是否相等 if(arr[i] == arr[j]){ //如果相等则证明出现重复元素，则删除j对应的元素

2020-08-02 10:47:12 205

原创 JavaScript中数组方法之slice

/* * slice() * - 可以用来在我们的数组中提取指定的元素 * - 该方法不会改变原数组，只会将截取到元素封装到一个新数组 * - 参数： * 1.截取开始的位置的索引，包含开始索引 * 2.截取结束的位置的索引，不包括结束索引 * - 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素 * - 索引可以传递一个负值,如果传递一个负值，则从后往前计算 * -1倒数第一个 */ var arr ..

2020-08-02 09:52:14 551

原创 javascript中forEach方法

/** 一般我们都是用for循环进行遍历数组* JS中还为我们提供了一个方法，用来遍历数组* forEach（）* - 这个方法只支持IE8以上的版本* IE8及以下的浏览器都不支持该方法，所以如果需要兼容IE8，则不要使用forEach*/ var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; /* * forEach()方法需要一个函数作为参数 * - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数

2020-08-02 09:31:44 1084

原创 javascript中数组遍历的练习

function Person(name,age,gender){ this.name = name; this.age =age; this.gender = gender; } Person.prototype.toString = function(){ return "Person[name="+this.name+",age ="+this.age+"]"; } //创建一个Person对象 var per = new Person(

2020-08-02 08:34:04 262

原创 JavaScript中数组方法之二 pop，unshift，shift

/** pop()* - 该方法可以删除数组中最后的一个元素* - pop的返回值是弹出的元素*/ var arr = ["孙悟空","猪八戒","沙和尚"]; var result = arr.push("唐僧","蜘蛛精","白骨精"); result =arr.pop(); arr.pop(); arr.pop(); console.log(arr); console.log(result);输出结果[Web浏览器] “孙悟空,猪八戒,沙和尚” /初级教程07/

2020-08-02 06:07:02 180

原创 javascript中数组方法一 push

//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; /* * push() * - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度 * - 可以将要添加的元素作为方法的参数传递，这样这新添加的元素直接添加数组的末尾 * */ var result = arr.push("唐僧","蜘蛛精","白骨精"); console.log(arr); console.log(result);控..

2020-08-02 05:34:36 1074

原创 JavaScript中数组的字面量

//创建一个数组 var arr = new Array();// arr[0] = 123;// arr.hello = “hello”//数组也是支持属性这种创建模式的// // console.log(arr.hello);//输出结果为hello //使用字面量来创建数组 //语法使用：[] var arr = [] console.log(typeof arr); var arr = [1,2,3,4,5,10];

2020-07-24 22:01:44 390

python小白入门实操上课实录课件.docx

空空如也