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);
}