原生js
特效以及问题
菜鸟一个abc122619
这个作者很懒,什么都没留下…
展开
-
拖拽操作
代码区<!DOCTYPE html><html><meta charset="UTF-8"><title>拖拽操作</title><style> .div1 { width:300px; height:300px; background-color:green; border:1px solid red; float:left; } div > p {原创 2020-06-14 15:53:03 · 143 阅读 · 0 评论 -
animation做时钟
html代码<DOCTYPE html><html><meta charset="UTF-8"><title>时钟</title><link rel="stylesheet" style="text/css" href="css/clock.css"><body> <div class="clock"> <div class="clock1"></div>原创 2020-06-14 16:12:40 · 298 阅读 · 0 评论 -
js做选项卡效果
代码区<!DOCTYPE html><html><head><meta charset="UTF-8"><title>选项卡</title><style> *{ padding:0px; margin:0px; } .box{ width:600px; height:500px; background-color:green; margin:100p原创 2020-06-14 15:28:19 · 154 阅读 · 0 评论 -
表单登录正则验证test()
代码如下: var regPhone = document.getElementById(“regPhone”);//手机号码var regPassword = document.getElementById(“regPassword”);//密码var textPhone = document.getElementById(“textPhone”);//手机号码文本提示框var textPassword = document.g原创 2020-10-25 13:31:16 · 778 阅读 · 0 评论 -
利用js做活动时间到期的时候,让倒计时停止跳动
//闪购活动var clocks = document.getElementById("clock");// alert(clocks);function leftTimer(){ var now = new Date(); //创建一个新日期 var endDate=new Date('2020/6/20 22:58'); //创建一个指定日期 var leftTime = (endDate.getTime()-now.getTime())/1000; // alert(原创 2020-06-14 15:41:51 · 786 阅读 · 1 评论 -
正则表达式入门简单理解
1.入门介绍简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具。我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影,例如,vi编辑器,Perl或PHP脚本语言,以及awk或sed shell程序等。此外,象JavaScript这种客户端的脚本语言也提供了对正则表达式的支持。由此可见,正则表达式已经超出了某种语言或某个系统的局限,成为人们广为接受的概念和功能。正则表达式可以让用户通过使用一系列的特殊字符构建匹配模式,然后把匹配模式与数据文件、程序输入以及WEB页面的表单输入等目标原创 2020-08-10 11:47:25 · 533 阅读 · 0 评论 -
利用js实现右侧悬浮框
例子:屏幕右侧悬浮框原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + “px”;浏览器窗体的高度document.documentElement.clientHeight浏览器滚动的高度var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;html内容区<原创 2020-06-14 14:42:06 · 1112 阅读 · 0 评论 -
js自动轮播
html代码区<div class="chart"> <ul class="chartlist" id="list"> <li class="chartitem"><a href=""><img src="images/chart_01.jpg" alt=""></a></li> <li class="chartitem"><a href=""><img src="images/ch原创 2020-06-14 15:07:51 · 286 阅读 · 0 评论 -
利用js代码写日历
css代码区<style> *{ padding:0px; margin:0px; } .box{ margin:100px auto; width:400px; height:600px; background-color:#ccc; } ul{ width:350px; height:400px; margin:0px auto; list-style:none; d原创 2020-06-14 15:17:07 · 341 阅读 · 0 评论 -
js菜单栏移入移出
html和css内容区<!DOCTYPE html><html><head> <title>分享到</title> <style type="text/css"> *{ padding:0px; margin:0px; } #box{ width:150px; height:200px; background-color:pink;原创 2020-06-14 14:50:39 · 289 阅读 · 0 评论 -
js无缝滚动效果
代码区<html><head><meta charset="UTF-8"><title>无缝滚动</title><style> *{ padding:0px; margin:0px; } #box{ width:800px; height:200px; background-color:green; position:relative; margin:100px au原创 2020-06-14 15:31:31 · 115 阅读 · 0 评论 -
js检验表单不通过不提交
校验表单的时候有两种方式:**1.**通过onsubmit()方式来检查用户密码是否输入<script> function ch() { var username = document.getElementById("name");//获取用户名的输入元素标签 if(username.value=="")//如果用户名为空,提示并返回false { alert("用户名不能为空"); return false; } pwd = document.getEl原创 2020-10-25 12:30:51 · 725 阅读 · 0 评论 -
运用js获取短信验证码倒计时
html代码部分 <form action=" " method="post"> <input id="phone" name="phone" placeholder="手机号码" autofocus/> <input id="code" placeholder="短信验证码"/> <button id="btn>获取验证码</button> <input type="submit" val原创 2020-10-25 12:59:35 · 235 阅读 · 0 评论 -
原生js做购物车全选选中商品显示价格和小计的计算
html代码<div class="contain"> <table class="table table-bordered"> <thead > <tr> <th style="width:100px;"><label><input type="checkbox"id="selectAll" /> 全选</label></th>原创 2021-06-07 15:01:44 · 2238 阅读 · 0 评论