JavaScipt的一些小功能实例代码分享
JavaScipt的一些小功能实例代码分享

前言:

JavaScipt一些小功能代码分享，如果对你有帮助就看看吧。

正文:

一共有8个通过js实现的小功能，代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作者无陌然QQ263354420</title>
</head>
<body>
</body>
<!-- demo: -->
<script type="text/javascript">
//数组遍历:
//单遍历值不遍历出键的方法
var arr = ['第一','第二','第三','第四'];
for (key in arr){
document.write(arr[key]+'<br />');
}
//遍历全部值:
document.write('<br />');
var arr2 = ['第一','第二','第三','第四'];
arr2.forEach(function(value,key){
document.write(value+key);
});
// map遍历，map即是 “映射”的意思 用法与 forEach 相似
document.write('<br />');
var arr3 = ['第一','第二','第三','第四'];
arr3.map(function(value,index){
document.write(value+index);
});
</script>

<!-- demo1: -->
<script type="text/javascript">
//一些用法:
//document.write(),方法:向文档写入HTML代码
//单击事件 onclick 
//DOM获取对象
//getElementById(string id);
//getElementByTagName
//getElementsByTagName
document.write('<br />');
</script>

<!-- demo2: -->
<img src="http://wl.aidezy.com/2019051611182167008146.png" id="img" onclick="gai()">
<script type="text/javascript">
//onclick单击对图片简单处理

function gai(){
var gai = document.getElementById('img');
gai.src = "http://wl.aidezy.com/2019051614410274588451.jpg";
}
document.write('<br />');
</script>
<!-- demo3: -->
<img src="http://wl.aidezy.com/2019051611182167008146.png" id="pic" onclick="gai2()">
<script type="text/javascript">
//图片更换:
function gai2(){
var gai2 = document.getElementById('pic');
if (gai2.getAttribute('src') == 'http://wl.aidezy.com/2019051611182167008146.png') {
gai2.setAttribute('src', 'http://wl.aidezy.com/2019051614410274588451.jpg') ;
}else{
gai2.setAttribute('src','http://wl.aidezy.com/2019051611182167008146.png') 
}

}
document.write('<br />');
</script>
<!-- demo4: -->
<!-- 小选择按钮 -->
<input type="checkbox" id="fu">
<p>
<input type="button" value="确定" onclick="gai3()">
</p>
<script type="text/javascript">
//禁用复选框
function gai3(){
var gai3 = document.getElementById('fu');
//选中
gai3.checked = true;
//禁用
gai3.disabled = true;
}
document.write('<br />');
</script>
<!-- demo5: -->
<div>
<table>
<tr>
<td>
<input type="checkbox" name="controlCheckbox" id="controlCheckbox" onclick="gai4()">
</td>
<td>商品名称</td>
<td>价格</td>
</tr>
<tr>
<td>
<input type="checkbox" name="productCheckbox[]">
</td>
<td>精通JavaScript</td>
<td>98.00</td>
</tr>
<tr>
<td>
<input type="checkbox" name="productCheckbox[]">
</td>
<td>精通MySQL数据库</td>
<td>108.00</td>
</tr>
<tr>
<td>
<input type="checkbox" name="productCheckbox[]">
</td>
<td>精通PHP编程</td>
<td>96.00</td>
</tr>
<tr>
<td>
<input type="checkbox" name="productCheckbox[]">
</td>
<td>PHP编程100例</td>
<td>128.00</td>
</tr>
<tr>
<td>
<input type="checkbox" name="productCheckbox[]">
</td>
<td>初探数据库引擎--InnoDB、MyISAM</td>
<td>96.00</td>
</tr>
</table>
</div>
<script type="text/javascript">
function gai4(){
var gai4_1 = document.getElementById('controlCheckbox');
var gai4_2 = document.getElementsByName('productCheckbox[]');
var n = 0;
while(n<gai4_2.length){
var gai4_3 = gai4_2[n];
gai4_3.checked = gai4_1.checked;
n = n+1;
}
// for(n=0;n<gai4_2.lenghr;n++){
// var gai4_3 = gai4_2[n];
// gai4_3.checked = gai4_1.checked;
// }
}
document.write('<br />');
</script>
<!-- demo6: -->
<form action="index.html" id="from">
<imput type="txt" name="password">
<a href="#" onclick="gai5()">提交</a>
</form>
<script type="text/javascript">
//from提交表单
function gai5(){
var gai5 = document.getElementById('form');
gai5.submit();
}
document.write('<br />');
</script>
<div id="title">标题</div>
<input type="button" value="确定" onclick="gai6()">
<!-- demo6: -->
<script type="text/javascript">
function gai6(){
var gai6 = document.getElementById('title');
gai6.style.width = '500px';
gai6.style.height = '500px';
gai6.style.background = 'red';
}
document.write('<br />');
</script>
<!-- DOM: -->
<style type="text/css">
.title2{
font-size: 50px;
font-weight:bold;
text-align:center;
color:red;
margin-bottom: 50px;
font-family: '微软雅黑';
}
</style>
<div id="title2">新闻标题</div>
<input type="button" value="确定" onclick="gai7()">
<script type="text/javascript">
function gai7(){
var gai7 = document.getElementById('title2');
gai7.className = 'title2';

}
</script>
</html>
声明：所有内容均收集于网络，收集的内容仅供内部学习和讨论，建议您在下载后的24个小时之内从您的电脑或手机中删除上述内容，如果您喜欢该内容，请支持并购买正版资源。如若本站内容侵犯了原著者的合法权益，请联系邮箱3641180084@qq.com，我们将及时处理。