parseInt(string, radix): 返回转换成整数的值
var test = parseInt(123); //123
test = parseInt(234, 0); //234
test = parseInt(0xabcdef); //自动转换成十六进制
test = parseInt(012344); //自动转换成八进制
字符串类型自动转换成整数型:
var test = parseInt(‘123’); //123
test = parseInt(‘234’, 0); //234
test = parseInt(‘0xabcdef’); //自动转换成十六进制
test = parseInt(‘012344’); //自动转换成八进制
test = parseInt(12, 2); //二进制
test = parseInt(45,8); //八进制
test = parseInt(45,16); //十六进制
test = parseInt(‘3king23’); //只能显示3,后面的23不能显示
test = parseInt(‘true‘); //非法的,显示:NaN
test = parseInt(true); //非法的, 显示:NaN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// oP.innerHTML => 读取p里面所有的html代码
// oP.innerHTML = 123; => 替换p里面所有的html代码
window.onload=function () {
var oBtn = document.getElementById('btn1'); //括号里放的是id值
var oText = document.getElementById('text1');
var oSelect = document.getElementById('select1');
var oImage = document.getElementById('img1');
var oP = document.getElementById('p1');
// oBtn.onclick = function(){
// alert(oBtn.type);
// alert(oBtn.id);
// };
// oBtn.onclick = function(){
// alert(oText.value); //文本框里输入的文字可以通过获取value值来弹出来
// };
// oBtn.onclick = function(){
// alert(oSelect.value);
// };
// oBtn.onclick = function(){
// // 字符串连接
// // '淘宝' + '北京' => '淘宝北京'
// // '淘宝' + '在' + '杭州' => '淘宝在杭州'
// alert(oText.value+'在'+oSelect.value);
// };
// oBtn.onclick = function () {
// // oBtn.value = 'button';
// // oText.value = '请输入';
// oText.value = oSelect.value;
// };
// oBtn.onclick = function () {
// oImage.src = oText.value; //可以换成其他图片
// };
oBtn.onclick = function () {
// alert(oP.innerHTML);
oP.innerHTML = oText.value;
alert(oP.innerHTML);
}
};
</script>
</head>
<body>
<input id="text1" type="text" value="">
<br/>
<select name="" id="select1">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
<input id="btn1" type="button" value="按钮">
<img id="img1" src="../1.jpg">
<br/>
<p id="p1">这是一段文字,可以改变</p>
</body>
</html>
js基本属性操作
1、获取id值、type值、value值
<script>
window.onload=function () {
var oBtn = document.getElementById('btn1'); //括号里放的是id值
var oText = document.getElementById('text1');
};
oBtn.onclick = function(){
alert(oBtn.type);
alert(oBtn.id);
};
oBtn.onclick = function(){
alert(oText.value); //文本框里输入的文字可以通过获取value值来弹出来
};
</script>
<body>
<input id="btn1" type="button" value="按钮">
<input id="text1" type="text" value="">
</body>
2、复选框的设置
<select name="" id="select1">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
3、实现输入的字符与复选框的value值连接
oBtn.onclick = function(){
// 字符串连接
// '淘宝' + '北京' => '淘宝北京'
// '淘宝' + '在' + '杭州' => '淘宝在杭州'
alert(oText.value + '在' + oSelect.value);
};
4、可以修改所有元素的value值
oBtn.onclick = function () {
// oBtn.value = 'button';
// oText.value = '请输入';
oText.value = oSelect.value;
};
5、改变网页上的图片,只要输入新的src
<script>
window.onload=function () {
var oText = document.getElementById('text1');
var oImage = document.getElementById('img1');
};
oBtn.onclick = function () {
oImage.src = oText.value; //可以换成其他图片
};
</script>
<body>
<input id="text1" type="text" value="">
<img id="img1" src="../1.jpg">
</body>
6、读取html代码
// oP.innerHTML => 读取p里面所有的html代码
// oP.innerHTML = 123; => 替换p里面所有的html代码
<script>
window.onload=function () {
var oText = document.getElementById('text1');
var oP = document.getElementById('p1');
};
oBtn.onclick = function () {
// alert(oP.innerHTML);
oP.innerHTML = oText.value;
alert(oP.innerHTML);
};
</script>
<body>
<input id="text1" type="text" value="">
<p id="p1">这是一段文字,可以改变</p>
</body>
利用上面知识创建:模拟手机短信发送
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 200px;
height: 300px;
border: solid 1px #000;
background: #f1f1f1;
padding: 20px;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oSelect = document.getElementById('select1');
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function () {
//添加:
// oDiv.innerHTML = oDiv.innerHTML + oSpan.innerHTML + oText.value + '<br/>';
oDiv.innerHTML += oSelect.value + oText.value + '<br/>';
oText.value = '';
};
};
</script>
</head>
<body>
<div id="div1"></div>
<select name="" id="select1">
<option value="王诠胜:">王诠胜</option>
<option value="李子维:">李子维</option>
<option value="黄雨萱:">黄雨萱</option>
</select>
<input id="text1" type="text">
<input id="btn1" type="button" value="提交">
</body>
</html>
文字放大缩小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oP = document.getElementById('p1');
var num = 15;
oBtn1.onclick = function () {
num -= 2;
oP.style.fontSize = num + 'px';
};
oBtn2.onclick = function () {
num += 2;
// oP.style.font-size;
// JS 不允许出现"-"
// font-size fontSize
// padding-top paddingTop
// margin-left marginLeft
oP.style.fontSize = num + 'px';
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="-">
<input id="btn2" type="button" value="+">
<p id="p1" style="font-size: 16px;">
这节课我学习到了如何在网页里增加文字大小
</p>
</body>
</html>
原始大小:
放大后:
缩小后: