JavaScript 的文档输出

h1>我的的案例!

<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>

大家可以看下,P标签是直接写在 JS语句里面的;

标签: Javascript

Thinkphp 发布于 2021-11-17 14:34

JavaScript 改变 HTML 元素的样式

大家可以看到,直接使用: id的 获取,然后 加符号 . 点,直接可以改变 元素的样式;

标签: Javascript

Thinkphp 发布于 2021-11-17 14:33

javascript点击事件实现文本内容的改变

</head>
<body>
<h1 onclick="changetext(this)">   点击</h1>

<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>

在JS中, 这个函数里面的 ID  ,给ID 一个 值;当  文字点击行为,触发  JS的点击事件成立,则ID的值 出现;
标签: Javascript

Thinkphp 发布于 2021-11-17 14:32

javascript表单验证案例一

unction check(){
if(document.getElementById("user").value=="") {
alert("请输入姓名!");
return false;
} else if(document.getElementById("phone").value=="") {
alert("请输入手机号码!");
return false;
} else {
alert("提交订单成功!")
return true;
}
}

标签: Javascript

Thinkphp 发布于 2021-11-17 14:29

javascript邮件表单验证案例一

function validateForm(){
var x=document.forms["myForm"]["email"].value; //表单字段值的获取
var atpos=x.indexOf("@"); // 用indexof() 方法检索 首出现
var dotpos=x.lastIndexOf("."); // 用lastIndexOf() 方法检索 最后出现
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){ //判断,如果 @符合没有或者<1, 符合.的检索也不符合, 长度检索不符合
alert("不是一个有效的 e-mail 地址");
return false;
}
}

<form name="myForm" action="demo-form" onsubmit="return validateForm();" method="post">   // 返回 函数
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
标签: Javascript

Thinkphp 发布于 2021-11-17 14:29

JS判断提交表单不能为空的等的验证

function beforeSubmit(form){
if(form.username.value==''){
alert('用户名不能为空!');
form.username.focus();
return false;
}
if(form.password.value==''){
alert('密码不能为空!');
form.password.focus();
return false;
}
if(form.password.value.length<6){
alert('密码至少为6位,请重新输入!');
form.password.focus();
return false;
}
if(form.password.value!=form.password2.value) {
alert('你两次输入的密码不一致,请重新输入!');
form.password2.focus();
return false;
}
return true;
}

----------------------------------------------------------------------
<fieldset>
   <legend>用户注册</legend>
    <form method="post" name="form" action="user.do?method=register" onSubmit="return beforeSubmit(this);">
     <table border="1" width="100%" cellspacing="0" cellpadding="0">
      <tr><td><label>用户名:<input type="text" name="username" value=""></label></td></tr>
      <tr><td><label>密   码:<input type="password" name="password" value=""></label></td></tr>
      <tr><td><label>重复密码:<input type="password" name="password2" value=""></label></td></tr>
      <tr><td><input value="注册" type="submit"> <input type="reset" value="重置"></td></tr>      
     </table>
    </form>
</fieldset>
标签: Javascript

Thinkphp 发布于 2021-11-17 14:28

jQuery+CSS鼠标放图片上滑动显示文字特效

<script type="text/javascript">
$(document).ready(function(){
 $(".imgtext").hide();
 $(".imgbox").hover(function(){
  $(".imgtext",this).slideToggle(500);
 });
});
</script>

================================

<ul>
    <li>
        <div class="imgbox"><a href="#" target="_blank"><img src="images/111.jpg"></a>
            <div class="text">
                <div class="imgtext"> 2012新品男T恤韩版短袖男士夏装男装翻领t恤POLO衫 货到付款 T93 </div>
            </div>
        </div>
    </li>
    <li>
        <div class="imgbox"><a href="#" target="_blank"><img src="images/222.jpg"></a>
            <div class="text">
                <div class="imgtext"> 风景图片效果,水光山色 </div>
            </div>
        </div>
    </li>
</ul>
标签: Javascript

Thinkphp 发布于 2021-11-17 14:27

短信验证倒计时

<style type="text/css">

.btn { 
    border: 0;
    width:120px;
    height:40px;  
    line-height: 40px; 
    float:left;
    color: white;
    background-color: #08c;
    border-radius: 20px;
    text-align: center;
    text-decoration: none;
}
</style>
</head>
<body>
<input type="button" class="btn" id="code" value="获取验证码" onclick="codeButton()">
</body>
<script type="text/javascript">
function codeButton(){
    var code = $("#code");
    code.attr("disabled","disabled");
    setTimeout(function(){
     code.css("opacity","0.8");
    },1000)
    var time = 60;
    var set=setInterval(function(){
    code.val("("+--time+")秒后重新获取");
    }, 1000);
    setTimeout(function(){
    code.attr("disabled",false).val("重新获取验证码");
    clearInterval(set);
    }, 60000);
}
</script>
标签: Javascript

Thinkphp 发布于 2021-11-17 14:23

JS倒计时效果

还剩

<script>
function FreshTime()
{

var endtime=new Date("2019/8/15,12:20:12");//结束时间

var nowtime = new Date();//当前时间

var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); 

d=parseInt(lefttime/3600/24);

h=parseInt((lefttime/3600)%24);

m=parseInt((lefttime/60)%60);

s=parseInt(lefttime%60);

document.getElementById("LeftTime").innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";

 if

(lefttime<=0){
document.getElementById("LeftTime").innerHTML="团购已结束";

clearInterval(sh);
 }
}
FreshTime()
var sh;

sh=setInterval(FreshTime,1000);

</script>
标签: Javascript

Thinkphp 发布于 2021-11-17 14:21