您的位置：首页 > Web前端 > JavaScript

JS的一些简单实例用法

2016-10-20 12:33 381 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../javascript/OutSideJs.js"></script>
<style>
.myStyle{
background-color: red;
width: 500px;
height: 500px;
border: 1px solid;
}
</style>
<script>
// alert(width);//输出信息
var height = 200;
function test() {
alert(width);
}
function test1() {
alert(height);
}
//document.write 打印指定的文本内容到页面上
function load(count,str) {
for (var i = 0; i < count; i++) {
document.write("<h1>"+str+"</h1>")
}
//prompt 输出一个输入框（让你输入东西）
var s= prompt("提示信息","输入框的默认信息");
document.write("<h2>"+s+"</h2>")
}
function cleanValue(obj) {
obj.value="";
}
function getValue(obj) {
var a=obj.value;
if (a!="") {
alert(a.length);//长度
alert(a.substring(0,1));//截取
try{

}catch (e){
e.message;
}finally {

}
//split分割字符串
var strs=a.split(",");//分割字符串
for (var i=0;i<strs.length;i++){
alert(strs[i]);
}
}
}
function checkUser() {
//document 根据文档找元素
var name=document.getElementById("name");
var pwd=document.getElementById("pwd");
alert("用户名:"+name.value+"\n"+"密码:"+pwd.value);
}
//获取Json数据
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
//parse()方法的作用是：解析
function getJson() {
var obj=JSON.parse(text);
alert(obj.employees[0].firstName+"\n"+obj.employees[0].lastName);
}
//获取日期
function getDate() {
var date=new Date();
alert(date);
}
//对话框
function getdel() {
//confirm（）弹出确认框（确定取消）
var s=confirm("您确定要删除吗？")
if (s){
alert("删除成功");
}else {
alert("已取消");
}
}
//定时的函数,每隔一秒就运行一次 setInterval 动作的作用是在播放动画时，每隔一定的时间就调用函数或方法或对象
var id= window.setInterval(function () {
var obj=document.getElementById("time");
obj.value=new Date().getMinutes()+":"+new Date().getSeconds()
},1000);
//设定一个时间时间到了就执行指定的方法
window.setTimeout(function () {
//clearInterval（）方法取消setInterval（）方法设置的定时器
window.clearInterval(id);
window.close();
},10000);
//打开新窗口
function getopenWindow() {
window.open("http://www.baidu.com","我的百度",400,500);
}
//关闭窗口
function getcloseWindow() {
window.close();
}
//获取屏幕的高度和宽度
function getWindowHeight() {
alert(screen.availHeight);
alert(screen.height);
alert(screen.availWidth);
alert(screen.width);
}
function setCookie() {
var d=new Date();
document.cookie="King"+":"+d.getDay();
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;

}
function getCookie() {
var str=document.cookie;
alert(str);
}
function getBackgroundColor() {
var div1=document.getElementById("div1");
// div1.style.backgroundColor="red";
div1.className="myStyle";//？？？？？？？不好使
// div1.innerText="King&Queen" //插入内部文本
div1.innerHTML="<h1>HTML</h1>"//插入HTML
}
//增加行数
function addrow() {
var tab1=document.getElementById("tab1")
var row=tab1.insertRow();
var c1=row.insertCell(0);
var c2=row.insertCell(1);
var c3=row.insertCell(2);
c1.innerText="a";
c2.innerText="b";
c3.innerText="c";
}
//获取X Y的坐标
function getXY(event) {
alert(event.clientX+":"+event.clientY);
}
//删除元素
function deleteTable() {
var tab1=document.getElementById("tab1");
document.body.removeChild(tab1);
}
//下拉列表
function getItem(obj) {
alert(obj.value);
}
//跳转画面
function go() {
// 第一种方法 window.location.href="边走边乔.html";
window.open("边走边乔.html","","0,0,1200,1200")
}
</script>
</head>
<body>
<h1 ondblclick="load(10,'hello King')">点击我</h1>
<input type="text" onfocus="cleanValue(this)" onblur="getValue(this)" value="我是输入框">
<input type="text" id="time">
用户名：<input type="text" id="name">
密码：<input type="password" id="pwd">
<input type="button" value="测试" onclick="checkUser()">
<input type="button" value="Json" onclick="getJson()">
<input type="button" value="获取日期" onclick="getDate()">
<input type="button" value="对话框" onclick="getdel()">
<input type="button" value="打开新窗口" onclick="getopenWindow()">
<input type="button" value="关闭新窗口" onclick="getcloseWindow()">
<input type="button" value="屏幕的尺寸" onclick="getWindowHeight()">
<input type="button" value="设置Cookie" onclick="setCookie()">
<input type="button" value="读取Cookie" onclick="getCookie()">
<input type="button" value="改变DIV背景色" onclick="getBackgroundColor()">
<input type="button" value="增加行数" onclick="addrow()">
<input type="button" value="删除table" onclick="deleteTable()">
<input type="button" value="跳转" onclick="go()">
<div id="div1" style="width: 200px;height: 200px;"></div>
<table id="tab1" style="border: 1px solid red;width: 300px;">
<tr style="border: 1px solid black">
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
</table>
<select style="width: 100px;height: auto" onchange="getItem(this)">
<option value="0">--请选择--</option>
<option value="1">江西省</option>
<option value="2">山东省</option>
<option value="3">福建省</option>
</select>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航