Nick's Blog

JavaScript基础学习与实例

本篇将结合实例来介绍JavaScript基础。

具体会讲到的实例有以下:

利用Javascrip让窗口弹出消息框,关闭窗口,获得id为**的的对象,更改文字,更改样式,隐藏文字,显示文字,定义”改变颜色”的函数,定义”改变宽高”的函数,定义”隐藏内容”的函数,定义”显示内容”的函数以及定义”取消设置”的函数

//弹出消息框
function test(){
var proMessage = prompt("Please enter your name.");
if (proMessage != null){
alert("Welcome "+proMessage+"!");
}else{
alert("Hello My friend!");
}
}
//关闭窗口
function close(){
window.close();
}
//获得id为**的的对象
function getElem(){
var mychar= document.getElementById("con");
document.write("result:"+mychar);
}
//更改文字
function changeCon(){
var mychar= document.getElementById('con'); ;
document.write("Original Title:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML = "New text!";
document.write("New Title:"+mychar.innerHTML); //输出修改后h2标签内容
}
//更改样式
fucntion changeStyle(){
var mychar = document.getElementById("con");
mychar.style.color = 'red';
mychar.style.backgroundColor = '#CCC';
mychar.style.width = '200px';
}
//隐藏文字
function hideText(){
var char = document.getElementById ('con');
char.style.display = 'none';
}
//显示文字
function showText(){
var char = document.getElementById ('con');
char.style.display = 'block';
}
//定义"改变颜色"的函数
function changeColor(){
var colorElement = document.getElementById('con');
colorElement.style.color = 'red';
}

//定义"改变宽高"的函数
function changeWidHei(){
var widHeiElement = document.getElementById('txt');
widHeiElement.style.width = "500px";
widHeiElement.style.Height = "400px";
}
//定义"隐藏内容"的函数
function hideContent(){
var hContent = document.getElementById('txt');
hContent.style.display = 'none';
}
//定义"显示内容"的函数
function showContent(){
var sContent = document.getElementById('txt');
sContent.style.display = 'block';
}
//定义"取消设置"的函数
function resetSetting(){
var flag = confirm("Are you sure to reset the setting?");
alert (flag);
}