jQuery模仿阿里云购买服务器选择购买时间长度的代码

2024-11-30 23:30:05

jQuery仿阿里云购买服务器选择时间长度,操作简单，只需点击所要选的时间段。下面给大家展示下效果图，就什么都明白了，如果大家觉得不错，请参考实现代码。

效果图如下：

代码：

<!doctype html>
<html lang="en">
<head>
<!-- 效果：http://hovertree.com/texiao/jquery// -->
<meta charset="UTF-">
<title>jQuery点击选择购买年月时长 - 何问起</title><base target="_blank" />
<meta name="author" content="何问起" />
<style>
/*reset部分 start*/
* {
padding: ;
margin: ;
}
html {
font-family: "Microsoft Yahei",Arial,sans-serif;
font-size: px;
}
body, div, dl, dt, dd, ul, ol, li, h, h, h, h, h, h, form, fieldset, input, button, textarea, p, th, td {
padding: ;
margin: ;
font-family: "Microsoft YaHei",sans-serif,Arial;
}
table {
border-collapse: collapse;
border-spacing: ;
}
fieldset, img {
border: ;
}
a {
text-decoration: none;
color: #;
outline: none;
}
li {
list-style: none;
}
caption, th {
text-align: left;
}
h, h, h, h, h, h {
font-weight: normal;
}
input, button, textarea, select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
outline: medium;
}
input, button, textarea, select {
*font-size: %;
}
/*a{-webkit-transition:all .s linear;-moz-transition:all .s linear;-ms-transition:all .s linear;-o-transition:all .s linear}*/
.fl {
float: left;
}
.fr {
float: right;
}
.clear:after {
display: block;
content: "clear";
height: ;
clear: both;
overflow: hidden;
visibility: hidden;
}
.clear {
zoom: ;
}
/*reset部分 end*/
.hovertreeBar {
margin: px auto;
width: px;
border: px solid #FFCC;
background: #FFF;
}
.hovertreeBar li {
position: relative;
float: left;
width: px;
height: px;
line-height: px;
border-right: px solid #FFCC;
text-align: center;
}
.hovertreeBar li:last-child {
border: none;
}
.hovertreeBar li:hover {
background: #FCFE;
cursor: pointer;
cursor:pointer;
}
.hovertreeBar li p {
text-align: center;
}
.phovertreeindex {
display: none;
position: absolute;
left: %;
top: -px;
margin-left: -px;
width: px;
height: px;
line-height: px;
border: px solid #FFCC;
background: #FCFE;
}
.hovertreeBar li:hover .phovertreeindex { /*display: block;*/
}
.keleyitriangle-out {
position: absolute;
right: px;
width: ;
height: ;
border-width: px;
border-style: solid;
border-color: #ffcc transparent transparent transparent;
}
.keleyitriangle-inner {
position: absolute;
right: px;
width: ;
height: ;
border-width: px;
border-style: solid;
border-color: #FCFE transparent transparent transparent;
}
.hovertreeinfo{text-align:center;}
</style>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-...min.js"></script>
</head>
<body>
<div class="hovertreeinfo"><h>jQuery点击选择购买年月时长</h><a href="http://hovertree.com/h/bjaf/njmbkd.htm">原文</a>
<a href="http://hovertree.com/" target="_blank">首页</a>
<a href="http://hovertree.com/texiao/" target="_blank">特效</a>
</div>
<div>
<ul class="hovertreeBar clear" id="hovertreeindex">
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
<div class="phovertreeindex">
<div>购买个月</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
年
<div class="phovertreeindex">
<div>购买年</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
年
<div class="phovertreeindex">
<div>购买年</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
<li>
年
<div class="phovertreeindex">
<div>购买年</div>
<div class="keleyitriangle-out"></div>
<div class="keleyitriangle-inner"></div>
</div>
</li>
</ul>
</div>
<!-- JS部分 -->
<script>
var arOB = [];
var ULobj = $('#hovertreeindex>li');
for(var i=;i<ULobj.length;i++){
arOB.push(ULobj[i]);
}
function changeCS(ints){
for(var i=;i<arOB.length;i++){
if( i <= ints ){
arOB[i].style.backgroundColor="#FCFE";
}else{
arOB[i].style.backgroundColor="#FFF";
}
}
}
$(function(){
$("#hovertreeindex>li").each(function(){
$(this).click(function(){
$(this).children(".phovertreeindex").show();
$(this).siblings().children(".phovertreeindex").hide();
var number=$(this).index();
var $j=$("#hovertreeindex>li").length;
changeCS(number);
// var li=new Array([$j]);
// for(k=;k<$i.length;k++){
// alert(li[k]);
// }
})
})
})
</script>
</body>
</html>

jQuery模仿阿里云购买服务器选择购买时间长度的代码到此就写完了，代码比较简单就没写注释，如果大家有疑问欢迎给我留言，小编会及时给大家回复的！

jQuery模仿阿里云购买服务器选择购买时间长度的代码

jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段.下面给大家展示下效果图,就什么都明白了,如果大家觉得不错,请参考实现代码. 效果图如下: 代码: <!doctype html> <html lang="en"> <head>  <meta charset="UTF-"> <ti
SpringBoot实现阿里云短信接口对接的示例代码

前言公司最近项目需要一个手机验证码的功能,任务确定后,倍感亚历山大,以为和第三方对接的都好麻烦,查阿里的API.网上大神写的博客,各种查之后才发现,简单的一塌糊涂,这里想说个问题,不知道其他的攻城狮们是不是和我一样的心里,刚接触个没做过的任务时,会一脸懵里的着急,无从下手的感觉,后来会了,就觉得简单的一*,在这里我说一下自己的体会,遇到任何难点,先理思路.任务拆分.逐个查资料,其实一套下来,就不会那种一脸懵逼的干着急... 所需条件 1.阿里云账户 2.开通云通讯中的短信服务 3.申请短信签名
详解J2EE开发的网站部署到阿里云服务器的方法

呐呐呐,做Java呢,最重要是要把自己的"作品" 部署到公网上去啦. 特别是初学者,需要向面试官证明自己会什么,这个真的就很重要啦,空口无凭,为什么面试官就相信你的简历内容是真的呢? 最好的办法当然就是把作品放在公网上,show 他一脸啦对于已经参加工作的同事,这个反倒是比较简单的,因为在工作中,部署一个项目无非就是通过ftp把.war(或者其他形式)传递上去,然后重启tomcat, 等一等就完成了. 可是,如果是学习者,比已经工作的人员面临的挑战更大,为什么呢? 因为手上没有一个已
.net core 使用阿里云分布式日志的配置方法

前言好久没有出来夸白了,今天教大家简单的使用阿里云分布式日志,来存储日志,没有阿里云账号的,可以免费注册一个开通阿里云分布式日志(有一定的免费额度,个人测试学习完全没问题的,香) 阿里云日志地址:https://sls.console.aliyun.com/lognext/profile 先开通阿里云日志,这个比较简单授权就可以了选择接入数据,我们这里选 .NET 选择项目名称,没有项目的可以去创建一个,项目名称后面会用到,如果你有购买阿里云ECS,项目区域最好选择跟ECS同一个区域(每个
详解Nodejs 部署到阿里云全过程

整个部署过程学到了不少东西,记录一下. 1. 到阿里云购买云服务器 ECS . https://www.aliyun.com/product/ecs 如果是在校学生,在淘宝有实名认证,且在学信网有注册,可以试试抢学生的首月优惠套餐. https://www.aliyun.com/act/aliyun/campus.html 作为一个穷逼+不熟悉服务器配置的菜鸟.选了最便宜的套餐: CPU: 1核 / 内存: 1024 MB / 带宽:1Mbps / 操作系统: CentOS 7.0 购买环节会设
mac下配置和访问阿里云服务器（Ubuntu系统）的图文教程

1.购买云服务器(http://www.aliyun.com/?spm=5176.3047821.1.1.vHFBuw) 注册帐号,在产品页面选择合适的服务器,进入详细页面选择配置,购买. 购买完成后进入管理控制台--云虚拟主机.ECS云服务器查看服务器状态. 2.注册域名.阿里云也提供域名注册和购买的功能,输入域名查询后购买即可.(国内注册域名后需要网络备案,备案操作和流程在阿里云里面有教程,有点麻烦) 3.域名解析.进入管理控制台--云解析,选择已注册的域名,点击后面的"解析"按钮
教你使用Typora + 阿里云OSS + PicGo 搭建私人图床(最新)

目录使用Typora + 阿里云OSS + PicGo 打造自己的图床为什么要打造图床? 购买阿里云OSS 使用PicGo Typora设置进入Typora偏好设置 -> 图像使用Typora + 阿里云OSS + PicGo 打造自己的图床为什么要打造图床? 让笔记远走高飞试问以下场景: 我们要把 markdown 笔记放到某博客上,直接进行复制即可.但因你的图片存储在本地,博客上的图片因无法找到本地路径而无法显示,因此需要到本地找到图片一个个上传我们要把 markdown 笔记共
在阿里云购买云服务器并安装宝塔面板的步骤

阿里云购买服务器购买云服务器,服务器版本选择centos 7.5版本,之后在控制台打开实例 2,设置root密码如果你购买时没有设置root密码这里需要重置下下载软件并安装宝塔本地下载putty 链接工具填入你的公网ip 然后open 账号填root 密码就是刚才设置的那个密码然后执行宝塔面板安装sh 参考地址:https://www.jb51.net/article/180576.htm yum install -y wget && wget -O install.sh h
阿里云服务器购买搭建过程的方法步骤

1.购买服务器在示例中购买的为阿里云服务器,在校大学生可以购买阿里云的学生认证特权服务器 (云翼计划)网址:https://promotion.aliyun.com/ntms/act/campus2018.html 购买云服务器ECS 价钱比较便宜,一年的费用也就一百多块钱,这款服务器需要进行学生学信网认证,按照要求认证就行(此服务器比较抢手,会有一些服务器贩子天天抢,你不一定能抢上). 注意: 1.购买服务器的预装环境选择你自己电脑对应的系统 2.地域选择你相对应的地区比如: 2.阿里云配
详解阿里云LINUX服务器配置HTTPS(NGINX)

背景说明服务器为阿里云 ECS,操作系统为 CentOS 6.5. 部署配置说明第一步,安装nginx 之所以要先安装 nginx,是因为下面配置域名解析的时候可以直接在浏览器看到效果,当然了,先配置域名,然后 ping 一下也是可以的下载Nginx源码包,解压源码包,进入解压后的目录,编译配置,命令如下: ./configure --prefix=/usr/local/nginx --with-http_ssl_module 以上命令将nginx安装到usr/local/nginx目录下

jQuery模仿阿里云购买服务器选择购买时间长度的代码

相关推荐

随机推荐