day 53 练习
1 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>王岩的跑马灯</title>
</head>
<body>
<sapan id="i1">我的家在河北保定</sapan>
</body>
<script>
function run() {
var ele = document.getElementById('i1');
var ele_text=ele.innerText;
var first_str=ele_text.charAt(0);
var backstr=ele_text.slice(1);
//此时获得是除了第一个元素之外的全部元素的的家在河北保定
var new_text=backstr + first_str;
// 一定要把第一个元素放在后边才行 才能起到循环的作用
ele.innerText=new_text;
}
// run();
var timer =setInterval(run,1000);
//这里的run不用加括号类似匿名函数
// clearInterval(timer);
//停止循环 </script>
</html>
------------------
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<select name="" id="s1" onchange="loadData()">
<option value="">请选择省份</option>
</select>
<select name="" id="s2">
<option value="">请先选择省份</option>
</select>
</body>
<script>
//第一步把省份的option标签及文本内容添加到s1
//得到的结果是<option>河北<option><option>湖南<option><option>四川<option>
var s1Ele=document.getElementById('s1');
var data = {"河北": ["石家庄", "保定", "邯郸"], "湖南": ["长沙", "岳阳", "张家界"],
"四川": ["成都", "绵阳", "攀枝花"]};
var str='';
for(var key in data){
// console.log(key);
var s ='<option>' + key + '<option>';
// console.log(s)
str += s;
s1Ele.innerHTML=str;
}
console.log(str); function loadData() { var s2Ele=document.getElementById('s2');
s2Ele.options.length=0;
//清空数组 为何变成空 因为opttions 城市数量太多了 最后一步在添加
// 否则就叠加了 耦合了原本是[0,1,2]
//取出索引值省份的索引值
var indexvalue =s1Ele.selectedIndex;
//重要 根据索引取值 如果s2Ele.selectedIndex; 只能是[0,1,2]1是河北 2 是湖南
// options 是个数组[option，option，option]
// s1Ele.options[0].text 就是河北
// s1Ele.options[0].htmal <option>河北<option> // 取出省份的数组
var optionsEle=s1Ele.options; // 省份的内的文档就是保定 攀枝花
var key =optionsEle[indexvalue].innerText;
// console.log(key)
var data2=data[key]; //循环出来的就是城市名称 for(var i=0;i<data2.length;i++){
//创建了一个元素标签
var optionEle=document.createElement('option');
//城市的名称属于文本内容 和索引确定一个城市
optionEle.innerText=data2[i];
//s2
s2Ele.appendChild(optionEle);
}
}
</script> </html>
<!--onchange 域的内容被改变 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）-->
<!--selectedIndex;-->
<!--options.length=0;-->
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 80%;
height: 100px;
background-color: aqua;
margin:0 auto;
/*居中对齐*/
}
</style> </head> <body>
//双击
<div class="c1" ondblclick="showalert()"></div>
<div>
//注意 注意注意 placeholder 占位符,占位,占位文本 和zhis 必须写不能别的参数代替
<input type="text" placeholder="我是失去聚焦实现的-小王" onfocus="f1(this);" onblur="blur1(this);">
</div>
</body>
<script>
//双击点击背景后显示
function showalert() {
// console.log(alert('双击后显示'))
alert('双击后显示');
}
//聚焦后不显示 点击后不显示
function f1(a){
a.setAttribute('name','');
}
//失去焦点后显示内容
function blur1(q) {
q.setAttribute('name','我是失去聚焦实现的-小王');
}
</script>
</html>
<!--onfocus 元素获得焦点。 // 练习：输入框-->
<!--onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.-->
<!--onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）-->
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*全覆盖*/
.cover{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: lightgray;
}
/*隐藏*/
.hide{
display: none;
}
/*模态框*/
.modal{
position: fixed;
top:50%;
left:50%;
width: 600px;
height: 400px;
background-color: red;
margin-left: -300px;
margin-top: -200px;
}
</style>
</head>
<body>
<input type="button" value="显示模态框" onclick="showmodal()">
<div class="cover hide"></div>
<div class="modal hide">
<input type="text" name="技师姓名"> <input type="text" name="出生年月">
<input type="button"value="提交"> <input type="button" onclick='cancer()' value="取消">
</div>
</body>
<script>
//显示
function showmodal() {
//显示全局
var coverEle=document.getElementsByClassName('cover')[0];
coverEle.classList.remove('hide');
//显示模态
var modalEle=document.getElementsByClassName('modal')[0];
modalEle.classList.remove('hide');
}
//取消
function cancer() {
//取消模态
var modalEle=document.getElementsByClassName('modal')[0];
modalEle.classList.add('hide');
//取消全局
var coverEle=document.getElementsByClassName('cover')[0];
coverEle.classList.add('hide');
}
</script>
</html>
5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>反选 全选 取消</title>
<style>
.tab{
text-align: center;
}
</style>
</head>
<body>
<table class="tab" border="1">
<thead>
<tr>
<th>#</th>
<th width="150px">技师姓名</th>
<th width="150px">技师年龄</th>
</tr>
</thead>
<tbody>
<tr> <td><input class='c1' type="checkbox"></td>
<td>德胜</td>
<td>22</td>
</tr>
<tr>
<td><input class='c1' type="checkbox"></td>
<td>建超</td>
<td>25</td>
</tr>
<tr>
<td><input class='c1' type="checkbox"></td>
<td>大伟</td>
<td>33</td>
</tr>
</tbody>
</table>
<div><input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="rervrse()">
<input type="button" value="取消" onclick="canceAll()"></div>
</body>
<script>
//全选
function checkAll() {
var checkAllEles=document.getElementsByClassName('c1');
for(var i =0;i<checkAllEles.length;i++){
checkAllEles[i].checked=true
}
}
// //反选
function rervrse() {
var checkAllEles=document.getElementsByClassName('c1');
for(var i =0;i<checkAllEles.length;i++){
checkAllEles[i].checked = !checkAllEles[i].checked
}
} function canceAll(){
var checkAllEles=document.getElementsByClassName('c1');
for(var i =0;i<checkAllEles.length;i++){
checkAllEles[i].checked = false
}
} </script>
</html>
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定示例要求鼠标点到数字的位置就显示相应的数字</title>
</head>
<body>
<!--//注意100个li的生成是 li{$}*100 形成一百个列表-->
<ul id="i1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
</ul>
<script>
// var i1Ele=document.getElementsByTagName('li');
// 注意是标签的长度
// for (var i=0;i<i1Ele.length;i++){
// i1Ele[i].onclick =function(){
// // alert(123);
// alert(this.innerText);
// // 此时想表示点击在某一个数字就是专用的this 显示文档的内容就是text
// }
// }
// 第二种方法 通过id找到父类 冒泡
var i1Ele=document.getElementById('i1');{
i1Ele.onclick=function (ev) {
// console.log(ev.target);
// target 是个目标值 此时的目标值
var targetEle=ev.target;
alert(targetEle.innerText)
}
} </script>
</body>
</html>
day 53 练习的更多相关文章
- 53. 特殊的O(n)时间排序[sort ages with hashtable]
[本文链接] http://www.cnblogs.com/hellogiser/p/sort-ages-with-hashtable.html [题目] 某公司有几万名员工,请完成一个时间复杂度为O ...
- APK瘦身记，如何实现高达53%的压缩效果
作者:非戈@阿里移动安全 1.我是怎么思考这件事情的 APK是Android系统安装包的文件格式,关于这个话题其实是一个老生常谈的题目,不论是公司内部,还是外部网络,前人前辈已经总结出很多方法和规律. ...
- 【leetcode】Maximum Subarray (53)
1. Maximum Subarray (#53) Find the contiguous subarray within an array (containing at least one nu ...
- 【原创】loadrunner12.53 录制脚本时 打不开网页或者打开网页慢？
问题描述: 之前刚装12.5版本时候,用 WebTours测试过,应用程序选择自己本地IE浏览器.exe程序,输入url地址就可以成功录制了 . 但是由于公司网络配置环境改变了(猜测),现 ...
- 【原创】安装LoadRunner12.53 版本时出现Critical error的解决方法
步骤: 1.在官网上下载LoadRunner12.53正版,只不过要注册,然后官网会给个序列号. 2.安装成功之后,快捷键已创建,打开Virtual User Generator时,提示如下错误: 此 ...
- [译] OpenStack Liberty 版本中的53个新变化
一个新的秋季,一个新的OpenStack 版本.OpenStack 的第12个版本,Liberty,在10月15日如期交付,而且目前发行版本已经备好了.那么我们期望能从过去六个月时间的开发中获得些什么 ...
- AWS国际版的Route 53和CloudFront
注册AWS国际版账号后,却发现Route 53和CloudFront功能是无法使用的.于是提交了一个Service Request,得到的答复是这两个功能需要验证后才能激活. 在控制台中点击进入Rou ...
- Joomla![1.5-3.4.5]反序列化远程代码执行EXP（直接写shell）
Usage:x.py http://xxx.com # coding=utf-8# author:KuuKi# Help: joomla 1.5-3.4.5 unserialize remote co ...
- Scala 深入浅出实战经典 第53讲：Scala中结构类型实战详解
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- 重新想象 Windows 8 Store Apps (53) - 绑定: 与 ObservableCollection CollectionViewSource VirtualizedFilesVector VirtualizedItemsVector 绑定
[源码下载] 重新想象 Windows 8 Store Apps (53) - 绑定: 与 ObservableCollection CollectionViewSource VirtualizedF ...
随机推荐
- 架构探险笔记12-安全控制框架Shiro
什么是Shiro Shiro是Apache组织下的一款轻量级Java安全框架.Spring Security相对来说比较臃肿. 官网 Shiro提供的服务 1.Authentication(认证) 2 ...
- laravel安装Excel安装不上
1.生明版本号 composer require maatwebsite/excel 2.1我的PHP是7.0安装Excel得2.1 2.在composer.json中加入 "maatweb ...
- Luffy之Xadmin以及首页搭建(轮播图,导航)
1. 首页 1.1 轮播图 admin站点配置支持图片上传 pip install Pillow 默认情况下,Django会将上传的图片保存在本地服务器上,需要配置保存的路径.我们可以将上传的文件保存 ...
- kohana操作数据库
一.读取数据库记录 读取数据库记录需要使用到 DB::select() 方法 // 返回一个结果对象 $result = DB::select('column')->from('table_na ...
- 【LeetCode】最大子序列和
要求时间复杂度 O(n). e.g. 给定数组 [-2,1,-3,4,-1,2,1,-5,4],其中有连续子序列 [4,-1,2,1] 和最大为 6. 我完全没有想法,看了答案. C++实现: int ...
- Boost.PropertyTree读取ini文件（Linux环境）
昨天因为需要读取配置文件略略伤神.网上很多例子但是我用都会报错,很多人把Boost.PropertyTree的函数写很麻烦的包所以报错我也不知道什么问题,所以今天整理下. 头上附上官网链接:Boost ...
- linux命令--文件查询
ls [ -lahid ] [ /* ] ls -- 默认查询当前目录下的显性文件 -l -- 显示文件的详细信息 -a -- 显示所有文件(包括隐藏文件) -h -- 文件大小显示为 ...
- Win10系列：JavaScript 数据绑定
使用数据绑定可以使页面中元素的属性值与数据源中的数据同步,其中数据源可以来自数据库.文件以及自定义的数据等.在常用的数据绑定方法中,简单对象绑定是将HTML元素与一个仅包含数据的简单对象相绑定,模板绑 ...
- linux 安装 DenyHosts 防止密码被暴力破解
DenyHosts DenyHosts是Python语言写的一个程序,它会分析sshd的日志文件(/var/log/secure),当发现重 复的攻击时就会记录IP到/etc/hosts.deny文件 ...
- 2.BIND服务基础及域主服务器配置
一.BIND 现今使用最晚广泛的DNS服务器软件是BIND(Berkeley Internet Name Domain),最早由伯克利大学的一名学生编写,现在最新的版本是9,由ISC(Internet ...