javascript-初级-day01-属性操作、图片切换、短信发送模拟
大多数js就是操作一些css和html的技巧，如果你会html和css学习js更加轻松哦！
js中如何获取元素：
通过id名称来获取元素;
document get element by id 'link'
document.getElementById("link"); 事件： 鼠标事件，键盘事件，系统事件，表单事件，自定义事件。
onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove 就像鼠标抚摸一样的事件
... onload 加载完成以后执行...
window.onload=事情
img.onload
body.onload
... 如何添加事件
元素.onmouseover 函数：命令，做一些事情
function abc(){//不会主动执行
....
}
//1.直接调用函数
abc();
//2.事件调用: 元素.事件=函数名 xxx.onclick=abc; function(){};//匿名函数
//匿名函数调用事件
元素.事件=function(){} 测试：
alert("ok");//"ok"字符串 alert确定按钮的警告框 变量：
var li=document.getElementById("lis");
var num 123;
var name="leo";
day01-小练习
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <script>
/*
HTML 的属性操作：读、写
属性名：
属性值： 读操作：获取、找到
元素.属性名 写操作：“添加”、替换、修改
元素.属性名 = 新的值 */
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oSelect = document.getElementById('select1'); oBtn.onclick = function (){
// alert(oBtn.value); // '按钮'
// alert( oText.value );//获取输入文本值
// alert( oSelect.value );//下拉选值 // 字符串连接
// oText.value oSelect.value
// '刘伟' + '北京' => '刘伟北京'
// '刘伟' + '在' + '北京' => '刘伟在北京' alert(oText.value + ' 在 ' + oSelect.value);
};
};
</script> </head> <body> <input id="text1" type="text" />
<select id="select1">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
<input id="btn1" type="button" value="按钮" /> </body>
</html>
day02 -文本输入路径-点击按钮-切换图片
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <script>
/*
HTML 的属性操作：读、写
属性名：
属性值： 读操作：获取、找到
元素.属性名 写操作：“添加？”、替换、修改
元素.属性名 = 新的值 */
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oImg = document.getElementById('img1'); oBtn.onclick = function (){
oImg.src = oText.value;
};
};
</script> </head> <body> <input id="text1" type="text" />
<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些文字</p>
<img id="img1" src="img/1.jpg" width="200" /> </body>
</html>
day03-test文本数据插入到p标签中
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <script>
/*
HTML 的属性操作：读、写
属性名：
属性值： 读操作：获取、找到
元素.属性名 写操作："添加？"、替换、修改
元素.属性名 = 新的值 oP.innerHTML => 读取p里面所有的html代码
oP.innerHTML = 123; => 替换p里面所有的html代码 */
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oP = document.getElementById('p1'); oBtn.onclick = function (){
// oImg.src = oText.value;
// alert( oP.innerHTML );
oP.innerHTML = oText.value;
};
};
</script> </head> <body> <input id="text1" type="text" />
<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些文字</p> </body>
</html>
day04-文字的放大缩小
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oP = document.getElementById('p1');
var num = 14; oBtn1.onclick = function (){
num -= 2;
oP.style.fontSize = num + 'px';
// JS 不允许出现"-"
// padding-top paddingTop
// margin-left marginLeft
};
oBtn2.onclick = function (){
// num = num + 2;
num += 2; oP.style.fontSize = num + 'px';
// JS 不允许出现“-“
};
};
</script>
</head> <body> <input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<p id="p1" style="font-size:16px;">10月28日晚，中央纪委监察部官网发布消息，贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串"打虎"行动中第十一位落马的副省部级以上高官。</p> </body>
</html>
day05-文字的放大缩小-旁边切换颜色
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oBtn4 = document.getElementById('btn4');
var oP = document.getElementById('p1');
var num = 14; oBtn1.onclick = function (){
num -= 2;
oP.style.fontSize = num + 'px';
// JS 不允许出现"-"
// padding-top paddingTop
// margin-left marginLeft
};
oBtn2.onclick = function (){
// num = num + 2;
num += 2; oP.style.fontSize = num + 'px';
// JS 不允许出现"-"
}; oBtn3.onclick = function (){
// oP.class = 'red';
// class => className
oP.className = 'red';
};
oBtn4.onclick = function (){
// oP.class = 'red';
// class => className
oP.className = 'yellow';
};
};
</script>
<style>
.red { width:400px; border:10px solid #333; background:red; padding:20px; color:yellow; }
.yellow { width:500px; border:5px solid #333; background:yellow; padding:10px; color:red; }
</style>
</head> <body> <input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<input id="btn3" type="button" value="红" />
<input id="btn4" type="button" value="黄" />
<p id="p1" style="font-size:16px;">10月28日晚，中央纪委监察部官网发布消息，贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串"打虎"行动中第十一位落马的副省部级以上高官。</p> </body>
</html>
day06-相对路径的问题-不能拿相对路径做判断
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oImg = document.getElementById('img1'); oImg.onclick = function (){
// alert( oImg.src );
// img/1.jpg
// file:///C:/Users/Administrator/Desktop/11-4-JS1/img/1.jpg
// if( oImg.src == 'img/1.jpg' ){
// 不能做为判断条件： // 1、所有的相对路径地址
/*
img src
href 2、颜色值：color: red #f00 rgb() rgba()
*/ if( oImg.src == 'www.baidu.com/img/1.jpg' ){
oImg.src = 'img/2.jpg';
}
};
};
</script>
</head> <body> <img id="img1" src="img/1.jpg" width="400" /> </body>
</html>
使用要用绝对路径判断
day07-关于表单元素的属性值修改问题
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head> <body> <input id="inp1" type="text" /> <script>
var oInp = document.getElementById('inp1'); oInp.onclick = function (){ oInp.type = 'checkbox'; // 咱们有仨位“祖宗”
/*
IE6 IE7 IE8
这仨不支持js直接修改type，另外ie浏览器和非ie js的float名称显示不同
*/
}; /*
oDiv.style.float = 'right'; oDiv.style.styleFloat = 'right'; // IE
oDiv.style.cssFloat = 'left'; // 非IE IE（styleFloat）
非IE（cssFloat） <div class="right"></div>
*/
</script> </body>
</html>
day08-聊天功能
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:240px; height:200px; border:1px solid #333; background:#f1f1f1; padding:10px; }
</style>
<script>
window.onload = function (){
var oDiv = document.getElementById('div1');
var oStrong = document.getElementById('strong1');
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn1'); oBtn.onclick = function (){
// 原来的内容，你得给我留着，然后再加上新内容
// a = a + b
// a += b // 添加：+=
// oDiv.innerHTML = oDiv.innerHTML + oText.value + '<br />';
oDiv.innerHTML += oStrong.innerHTML + oText.value + '<br />';
oText.value = '';
};
};
</script>
</head> <body> <div id="div1"></div>
<strong id="strong1">张三：</strong>
<input id="text1" type="text" />
<input id="btn1" type="button" value="提交" /> </body>
</html>
day09-if判断
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:240px; height:200px; border:1px solid #333; background:#f1f1f1; padding:10px; }
</style>
<script> /*
if(){} 在做这事之前，有个条件
if(){}else{} 2件事，根据条件，选一个来做
if(){}else if(){}else if(){}else if(){}
if(){}else if(){}else if(){}else if(){}else{}
*/ window.onload = function (){
var oDiv = document.getElementById('div1');
var oStrong = document.getElementById('strong1');
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn1'); oBtn.onclick = function (){
if( oText.value == '' ){
alert('没说话呢，别急着点~~');
}else{
oDiv.innerHTML += oStrong.innerHTML + oText.value + '<br />';
oText.value = '';
}
};
};
</script>
</head> <body> <div id="div1"></div>
<strong id="strong1">张三：</strong>
<input id="text1" type="text" />
<input id="btn1" type="button" value="提交" /> </body>
</html>
day10-图片切换
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> </head> <body> <img id="img1" src="img/2.jpg" width="200" /> <script>
var oImg = document.getElementById('img1');
var onOff = true; // 布尔值：true 1 false 0 oImg.onclick = function (){
// if( oImg.src == 'img/2.jpg' ){
// 有条件，就用现成的，如果没有，创造条件也得做事 if( onOff ){
oImg.src = 'img/4.jpg';
onOff = false;
} else {
oImg.src = 'img/2.jpg';
onOff = true;
}
}; </script> </body>
</html>
day11-数组
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <script>
var num = 1;
var str = '这是一句话'; // 用数组：
var arr = [ 1, 2, 3, 'img/1.jpg', 'bbb' ]; // 放数据的仓库
// alert( arr.length ); // 5
// alert( arr[3] );
// alert( arr[4] );
// alert( arr[arr.length-1] ); // 最后一个 arr.push('img/3.jpg'); // 往数组的最后一位添加"数据" </script> </head> <body>
</body>
</html>
day12-用数组切换图片
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oImg = document.getElementById('img1');
var arr = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var num = 0; oImg.onclick = function (){
// num = num + 2;
// num += 2;
num ++;
if(num == arr.length){
num = 0;
}
// alert( arr[num] );
oImg.src = arr[num];
}; }; </script>
</head> <body> <img id="img1" src="img/1.jpg" width="400" height="400" /> </body>
</html>
day13-图片切换综合实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p { margin:0; }
body { text-align:center; }
#box { width:400px; height:400px; border:10px solid #ccc; margin:50px auto 0; position:relative; }
a { width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; }
a:hover { filter:alpha(opacity:30); opacity:0.3; }
#prev { left:10px; }
#next { right:10px; }
#p1 { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; bottom:0; left:0; }
strong { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:0; left:0; }
#img1 { width:400px; height:400px; }
span { position:absolute; width:400px; height:30px; line-height:30px; text-align:center; top:-50px; left:0; font-family:'微软雅黑'; }
</style>
<script>
window.onload = function (){
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oP = document.getElementById('p1');
var oStrong = document.getElementById('strong1');
var oImg = document.getElementById('img1');
var aBtn = document.getElementsByTagName('input'); var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var arrText = [ '文字一', '文字二', '文字三', '识文断字' ];
var num = 0;
var onOff = true; aBtn[0].onclick = function (){ onOff = true; document.getElementsByTagName('span')[0].innerHTML = '图片可从最后一张跳转到第一张循环切换'; };
aBtn[1].onclick = function (){ onOff = false; document.getElementsByTagName('span')[0].innerHTML = '图片只能到最后一张\或只能到第一张切换'; }; // 初始化
function fnTab(){
oP.innerHTML = arrText[num];
oStrong.innerHTML = num+1 + ' / ' + arrText.length;
oImg.src = arrUrl[num];
}
fnTab(); oPrev.onclick = function (){
num --;
if( num == -1 ){
if(onOff){num = arrText.length-1;}else{
alert('这已经是第一张了，不能再往前了~~');
num = 0;
}
//num = arrText.length-1;
}
fnTab();
};
oNext.onclick = function (){
num ++;
if( num == arrText.length ){
if(onOff){num = 0;}else{
alert('已经到最后一张啦~');
num = arrText.length-1;
}
}
fnTab();
}; };
</script>
</head> <body> <input type="button" value="循环切换" />
<input type="button" value="顺序切换" /> <div id="box"><span>图片可从最后一张跳转到第一张循环切换</span>
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="p1">图片文字加载中……</p>
<strong id="strong1">图片数量计算中……</strong>
<img id="img1" />
</div> </body>
</html>
javascript-初级-day01-属性操作、图片切换、短信发送模拟的更多相关文章
- [妙味JS基础]第一课：属性操作、图片切换、短信发送模拟
知识点总结 HTML的属性操作:读.写 元素.属性名 => “读” 元素.属性名＝新的值 => “写” 例如: oBtn.value => “读” oBtn.value='按钮' = ...
- C#利用Web Service实现短信发送（转）
通过编程方式实现短信息的发送对很多人来说是一件比较烦杂的事情,目前一般的解决方法是通过计算机和手机的连线,通过可对手机编程的语言编写相关的手机短信息程序来实现,而这种方法对于一般人来说是很难达到的,因 ...
- PhpSms 稳定可靠的php短信发送库
可能是目前最聪明.优雅的PHP短信发送库了.从此不再为各种原因造成的个别短信发送失败而烦忧! phpsms的任务均衡调度功能由toplan/task-balancer提供. GitHub地址:http ...
- Android短彩信源码解析-短信发送流程（三）
3.短信pdu的压缩与封装 相关文章: ------------------------------------------------------------- 1.短信发送上层逻辑 2.短信发送f ...
- C# 编写短信发送Window服务
我们做项目过程中,一般都会有发送短信的需求.最常见的就是户注册或者登录时发送短信验证码.不同类型的短信发送,我们都可以放到到一张短信表中,然后通过一个定时的作业去执行短信发送.而定时作业的执行,我们就 ...
- c#简单易用的短信发送服务 悠逸企业短信服务
悠逸企业短信发送服务,是一种比较简单易操作的短信发送服务,使用POST的方式,请求相应地址就可以实现短信发送功能 1 /// <summary> /// 短信发送服务 /// </ ...
- 短信发送接口被恶意访问的网络攻击事件(四)完结篇--搭建WAF清理战场
前言 短信发送接口被恶意访问的网络攻击事件(一)紧张的遭遇战险胜 短信发送接口被恶意访问的网络攻击事件(二)肉搏战-阻止恶意请求 短信发送接口被恶意访问的网络攻击事件(三)定位恶意IP的日志分析脚本 ...
- Android系统应用Mms之Sms短信发送流程(Mms应用部分)二
1. 新建一条短信, 在发送短信之前, 首先创建的是一个会话Conversation, 以后所有与该接收人(一个或多个接收人)的消息交互, 都在该会话Conversation中. ComposeMes ...
- 4、下行短信发送WebService、下行短信发送服务 -功能详细设计 --短信平台
3. 下行短信发送WebService 开发一个WebService,供第三方系统调用,用于发送短信.WebService接收数据后,将信息存储入数据库的短信发送数据表中. WebService参数 ...
随机推荐
- k8s学习笔记（3）- kubectl高可用部署，扩容，升级，回滚springboot应用
前言:上一篇通过rancher管理k8s,部署服务应用扩容,高可用,本篇介绍kubectl命令行部署高可用集群节点,测试升级.扩容等 1.测试环境:3节点k3s,使用其中2节点(ubuntunode1 ...
- 关于takin-data，你想知道的都在这里（一）启动命令篇
通过docker部署体验takin的小伙伴都应该知道,在安装部署手册中有提到:在启动surge-deploy任务前,需要将启动命令中的ip参数替换为docker容器所在宿主机的ip,很多小伙伴都在这里 ...
- 6月2日 Scrum Meeting
日期:2021年6月2日 会议主要内容概述: 取消账单类别自定义 图表属性分析取消函数输入 增加新的主题模板 一.进度情况 组员 负责 两日内已完成的工作 后两日计划完成的工作 工作中遇到的困难 徐宇 ...
- Mac上安装Grafana
Mac上安装Grafana 一.背景 二.安装步骤 1.通过 Home Brew 安装 2.通过二进制包进行安装 1.下载 2.grafana配置文件的路径 3.修改grafana配置 1.修改默认的 ...
- 使用flink实现一个简单的wordcount
使用flink实现一个简单的wordcount 一.背景 二.需求 三.前置条件 1.jdk版本要求 2.maven版本要求 四.实现步骤 1.创建 flink 项目 2.编写程序步骤 1.创建Str ...
- Noip模拟81 2021.10.20
T1 语言 比较简单的题,然后就瞎写了,所以考场上就我一个写了线段树的,所以我的常数.... 所以就枚举动词的位置,找前面后面有没有出现$4$即可 1 #include<bits/stdc++. ...
- Noip模拟17 2021.7.16
我愿称这场考试为STL专练 T1 世界线 巧妙使用$bitset$当作vis数组使用,内存不会炸,操作还方便,的确是极好的. 但是这个题如果不开一半的$bitset$是会炸内存的,因为他能开得很大,但 ...
- STM32串口通信配置（USART1+USART2+USART3+UART4） （转）
一.串口一的配置(初始化+中断配置+中断接收函数) 1 /*====================================================================== ...
- 小白自制Linux开发板 十. NES游戏玩起来
本篇基于我们制作的Debian文件系统而展开,而且我们这会玩一些高级的操作方式--用我们的小电脑进行程序编译. 所以本篇操作全部都在我们个的开发板上完成. 1. 开发环境搭建 首先安装gcc, ...
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...