您的位置：首页 > Web前端 > JavaScript

JavaScript初学笔记（记录自学）

2019-03-29 22:01 495 查看

什么是JavaScript ？

js简单的页面校验

<script>
function cheakForm(){
// 				var input1 = document.getElementById("111");
// 				var input2 = input1.value;
// 				if(input2.length >= 6){
// 					return true;
// 				}
// 				else{
// 					alert("用户名太短！");
// 				}
// 				return false;
//
//邮箱的校验
var email = document.getElementById("email");
var Uemail = email.value;
if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(Uemail)){
alert("校验成功");
}
else{
alert("校验失败");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="../../02-网站注册页面/网站注册页面.html" onsubmit="return cheakForm()">
用户名：<input type="text" id="111" /><br />
邮箱：<input type="text" id="email" /><br />
<input type="submit" value="提交" />
</form>
</body>

运行结果

点击之后

自动轮播图片之
切换图片

<script>
function changeImg(){
var img = document.getElementById("1001");
img.src = "../img/1-161104143944.gif";
}
</script>
</head>
<body>
<input type="button" value="点击切换"  onclick="changeImg()"/>
<br />
<img src="../img/222.jpg" id="1001"/>
</body>

运行结果

点击之后

自动轮播图片之
定时器

<script>
function test(){
console.log("setInterval被调用了");
}
var timerID;
function startDingshiqi(){
timerID = setInterval("test()",3000);
}

function stopDingshiqi(){
cleraInterval(timerID);
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startDingshiqi()"/>
<input type="button" value="关闭定时器" onclick="stopDingshiqi()"/>
</body>

运行结果

调出Console控制台之后，点开启定时器

图片自动轮播案例
步骤分析

<script>
var index = 0;
function changeImg(){
var img = document.getElementById("2333");
var curindex = index%3+1;//能得到 1  2  3
img.src = "../img/"+curindex+".jpg";
index = index + 1;
}

function init(){
setInterval("changeImg()",1500);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="2333" />
</body>

运行结果
点开之后，首先是

1.5秒之后

又1.5秒之后

完成了图片轮播

显示和隐藏图片

<script>
function hideImg(){
var img = document.getElementById("img1");
img.style.display = "none";
}

function showImg(){
var img = document.getElementById("img1");
img.style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="隐藏" onclick="hideImg()"/>
<input type="button" value="显示" onclick="showImg()"/><br />
<img src="../img/1-161104143944.gif" id="img1" />
</body>

运行结果

点击隐藏之后

再点击显示

综合案例：定时弹出广告

步骤分析

<script>

function hideAD(){
var img = document.getElementById("1001");
img.style.display = "none";
}

function showAD(){
var img = document.getElementById("1001");
img.style.display = "block";

setTimeout("hideAD()",2500);
}

function init(){
setTimeout("showAD()",2500);
}

</script>
</head>
<body onload="init()">
<img  id="1001"   src="../img/1-161104143944.gif" width="100%" style="display: none ; "/>
</body>

运行结果

2.5.秒之后

再2.5.秒之后

表单校验的改进版本
需求

代码

<script>
function showTips(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = msg;
}

function cheakUsername(){
var uValue = document.getElementById("username").value;
var span = document.getElementById("span_username");
if(uValue.length < 6){
span.innerHTML = "<font color = 'red' size = '2'>对不起，太短</font>";
}
else{
span.innerHTML = "<font color = 'red' size = '2'>输入的用户名可使用</font>";
}
}
//校验密码
function cheakPassword(){
var uValue = document.getElementById("password").value;
var span = document.getElementById("span_password");
if(uValue.length < 6){
span.innerHTML = "<font color = 'red' size = '2'>对不起，密码太短</font>";
}
else{
span.innerHTML = "<font color = 'red' size = '2'>输入的密码可使用</font>";
}
}

</script>
</head>
<body>
<form action="../02-网站定时弹出广告/显示和隐藏.html" >
用户名：<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于六') " onblur="cheakUsername()" onkeyup="cheakUsername()"/><span id="span_username"></span><br />
密码：<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于六') " onblur="cheakPassword()" onkeyup="cheakPassword()"/><span id="span_password"></span><br />
确认密码：<input type="password" id="repassword" /><br />
邮箱：<input type="text" id="email" /><br />
手机号：<input type="text" id="text" /><br />

<input type="submit" value="提交" />
</form>

运行结果

当光标点击用户名的框时，

当输入时

当输入完时

其他项和用户名项大同小异，就不一一展示了。

这样就达到了更好的用户体验。

表单校验的流程步骤

表格的隔行换色+全选，全不选
原因

全选全不选的步骤分析

代码

<script>
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到行,再遍历行
var rows = tab.rows;
for(var i=0;i<rows.length;i++){
var row = rows[i];

if(i%2==0){
row.bgColor = "yellow";
}
else{
row.bgColor = "red";
}
}
}

function checkAll(){
//首先该获得第一个checkbox
var check1 = document.getElementById("sb");
//再获得这个checkbox的状态
var checked = check1.checked;
//获得所有的checkbox
var checks = 	document.getElementsByName("checkyou");
//遍历并修改状态
for(var i=0;i<checks.length;i++){
var checkyou = checks[i];
checkyou.checked = checked;
}
}

</script>
</head>
<body onload="init()">
<table border="1px " width="600px" id="tab">
<tr>
<td>
<input type="checkbox" onclick="checkAll()" id="sb" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>

</tr>
<tr>
<td>
<input type="checkbox" name="checkyou" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkyou" />
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkyou" />
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkyou" />
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkyou" />
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>

</table>

运行结果

当点击第一个checkbox时，

再点击时

达到了全选全不选的功能

对DOM操作的分析，DOM树

DOM操作的实例代码
需求

代码

<script>
function dianwo(){
//找到目标元素
var div = document.getElementById("div1");
//添加元素<p></p>
var p =document.createElement("p");
//添加文本  文本内容
var textNode = document.createTextNode("我被创建好了");
//文本进去到元素里面  <p>文本内容</p>
p.appendChild(textNode);
//元素p接到元素div后面
div.appendChild(p);
}
</script>
</head>
<body>
<input type="button" value="点我添加内容" onclick="dianwo()"/>
<div id="div1">

</div>
</body>

运行结果

点击一次之后

多点击几次

省市联动案例

准备时的代码

接下里的步骤分析

完整代码

<!-- 1. 确定事件:  onchange
2. 函数: selectProvince()
3. 函数里面要搞事情了
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息

动态创建城市元素节点
添加到城市select中 -->
<script>
/*
准备工作 : 准备数据
*/
var provinces = [
["深圳市", "东莞市", "惠州市", "广州市"],
["长沙市", "岳阳市", "株洲市", "湘潭市"],
["厦门市", "福州市", "漳州市", "泉州市"]
];
/*
1. 确定事件:  onchange
2. 函数: selectProvince()
3. 函数里面要搞事情了
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息

动态创建城市元素节点
添加到城市select中

*/
function selectProvince() {
var province = document.getElementById("province");
//得到当前选中的是哪个省份
//alert(province.value);
var value = province.value;
//从数组中取出对应的城市信息
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;

for (var i = 0; i < cities.length; i++) {
//					alert(cities[i]);
var cityText = cities[i];
//动态创建城市元素节点   <option>东莞市</option>

//创建option节点
var option1 = document.createElement("option"); // <option></option>
//创建城市文本节点
var textNode = document.createTextNode(cityText); // 东莞市

//将option节点和文本内容关联起来
option1.appendChild(textNode); //<option>东莞市</option>

//					添加到城市select中
citySelect.appendChild(option1);
}

}
</script>
</head>
<body>
<!--选择省份-->
<select onchange="selectProvince()" id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city"></select>

</body>

运行结果

当点击了“请选择”，选择了湖南省时

接下来

大于号> ： &gt
小于号< ： &lt

multiple属性可使下拉选项变成如下所示的上下选项

商品左右选择的案例
步骤分析

代码

<!--
步骤分析
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
-->

<script>
function selectOne(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;

var rightSelect = document.getElementById("rightSelect");

//遍历找出被选中的option
for(var i=0;i<options.length;i++){
var option1 = options[i];
if(option1.selected){
// 2. 将选中的元素添加到右边的Select中就可以
rightSelect.appendChild(option1);
}
}
}
</script>

</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td>
<input type="text" value="手机数码"/>
</td>
</tr>
<tr>
<td>分类描述</td>
<td>
<input type="text" value="这里面都是手机数码"/>
</td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!-- 左边 -->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>黑莓</option>
<option>小米</option>
<option>OPPO</option>
</select>
<br />
<a href="#" onclick="selectOne()"> &gt;&gt;</a><br />
<a href="#"> &gt;&gt;&gt; </a>
</div>
<!-- 右边 -->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果</option>
<option>谷歌</option>
<option>vive</option>
<option>HTC</option>
</select>
<br />
<a href="#"> &lt;&lt;</a><br />
<a href="#"> &lt;&lt;&lt;</a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>

运行结果

当点击黑莓，再点右移时

黑莓就从已有商品移动到了未有商品

另外

ondbclick事件能使双击完成上述功能

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航