how2j.cn


工具版本兼容问题
JavaScript用于网页和用户之间的交互,比如提交的时候,进行用户名是否为空的判断。

完整的javascript由语言基础BOMDOM组成。本模块主要讲解javascript语言本身和BOM, DOM的内容请参考HTML DOM


示例 1 : 通过javascript向文档中输出文本   
示例 2 : javascript和DOM结合的一个简单例子   
示例 3 : 语言基础,BOM和DOM   

示例 1 :

通过javascript向文档中输出文本

edit
document是javascript的内置对象,代表浏览器的文档部分
document.write("Hello Javascript"); 向文档写入字符串
运行效果
<script> document.write("Hello Javascript"); </script>
<script>
  document.write("Hello Javascript");
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

javascript和DOM结合的一个简单例子

edit
这是一个javascript和DOM结合的一个简单例子

onclick="..." 表示点击button之后做的事情
document.getElementById 根据id获取指定的元素
.style.display='none' 隐藏
.style.display='block' 显示(准确的讲,以block的形式显示)

onclick,getElementById,style.display 这些内容,是HTML DOM 应该到才会用到的知识和概念
运行效果
<button onclick="document.getElementById('text').style.display='none'">隐藏文本</button> <button onclick="document.getElementById('text').style.display='block'">显示文本</button> <p id="text"> 这个是一段可以被javascript隐藏的文本</p>
<button onclick="document.getElementById('text').style.display='none'">隐藏文本</button>

<button onclick="document.getElementById('text').style.display='block'">显示文本</button>

<p id="text"> 这个是一段可以被javascript隐藏的文本</p>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

语言基础,BOM和DOM

edit
完整的javascript由语言基础BOMDOM组成。

只有通过javascript操作DOM对象的时候,才会带来很好的实用效果,而本章节只会涉及到语言基础 和 BOM部分,DOM部分在下个章节展开
语言基础,BOM和DOM


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2019-01-23 交作业
BeanGo



交作业
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js复利计算器</title>
	<script type="text/javascript">
	
	function cal(){
	var Capital = document.getElementById('Capital').value;
	var yearRevenue = document.getElementById('yearRevenue').value / 100;
	var year = document.getElementById('year').value;
	var InvestYear = document.getElementById('InvestYear').value;
     

    var CapitalIntotal = parseInt(Capital) + parseInt(InvestYear*(year-1));

    document.getElementById('CapitalIntotal').value = CapitalIntotal;

    var RevenueCapitalIntotal = TotalRevenue(Capital,year,yearRevenue,InvestYear);

    document.getElementById('RevenueCapitalIntotal').value = parseFloat(RevenueCapitalIntotal);

    var RevenueIntotal = RevenueCapitalIntotal - CapitalIntotal;

    document.getElementById('RevenueIntotal').value = RevenueIntotal;


	function TotalRevenue(Capital,year,yearRevenue,InvestYear){

       var result = Capital*exponent(year,yearRevenue);

       for (var i = year-1 ; i >0; i--) {
               
           result = InvestYear*exponent(i,yearRevenue) + result;

       }

       return result;

	}
	function exponent(year,yearRevenue){

		var result = 1;

		if (year==0) {

			return 1;
		}

		else if (true) {
			for (var i = year - 1; i >= 0; i--) {
				
			result = (1 + yearRevenue) * result;
			
			}
		}

		return result;	
		
		}

	}

	</script>
	<style type="text/css">
	table{
		border-color: lightgrey;
		width: 300px;
		font-family: 宋体;
		border-style: solid;
		border-width: 1px; 
		border-spacing:0; 
	}
	table tr,table td{
		border:1px solid lightgrey; 
	}
	.font{
		color: grey;

	}
	span{
		display: inline-block;
		text-align: center;
		margin-left: 2px;
	}
	input{
		 width: 150px
	}

	</style>
</head>
<body>
	<form method="get">
		<table class="font" >
			<tr>
				<td>起始资金</td>
				<td width="60%"><input type="text" id="Capital"><span>¥</span></td>
			</tr>
			<tr>
				<td>每年收益</td>
				<td><input type="text" id="yearRevenue"><span>%</span></td>
			</tr>
			<tr>
				<td>复利年数</td>
				<td><input type="text" id="year"><span>年</span></td>
			</tr>
			<tr>
				<td>每年追加资金</td>
				<td><input type="text" id="InvestYear"><span>¥</span></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="button" value="计算" onclick="cal()"><span>¥</span></td>
			</tr>
			<tr>
				<td>本金和</td>
				<td><input type="text" id="CapitalIntotal"><span>¥</span></td>
			</tr>
			<tr>
				<td>利息和</td>
				<td><input type="text" id="RevenueIntotal"><span>¥</span></td>
			</tr>
			<tr>
				<td>本息和</td>
				<td><input type="text" id="RevenueCapitalIntotal"><span>¥</span></td>
			</tr>
		</table>
	</form>
	
</body>
</html>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-10-23 无基础,javascript也是写在.html格式的文件中吗
唏嘘不已
如标题







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-06-20 实例二
2018-06-14 ·······
2017-09-08 示例二代码没用。。。。