js学习-基本属性操作
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
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><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>利用上面知识创建：模拟手机短信发送
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><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 + '
';oDiv.innerHTML += oSelect.value + oText.value + '
';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>
文字放大缩小
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><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 marginLeftoP.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>原始大小：
放大后：
缩小后：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！