先保存下来,这么强势。说不定以后用得上
代码
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | // JavaScript Document var Dianji=0; window.onload=function(){ var buhao = document.getElementById("buhao"); var hao = document.getElementById("hao"); buhao.onclick=function(){ Dianji++; if(Dianji==1){ alert("小姐姐在考虑一下呗"); }else if(Dianji==2){ alert("你是我见过的最帅气善良可爱的男孩"); }else if(Dianji==3){ alert("一生一世爱你"); }else if(Dianji==4){ alert("家务我全干"); }else if(Dianji==5){ alert("不藏私房钱"); }else if(Dianji==6){ alert("房子写你名"); }else if(Dianji==7){ alert("工资全上交"); Dianji=1; } } hao.onclick=function(){ alert("小姐姐终于同意了,我爱你"); } } |
样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | @charset "utf-8"; /* CSS Document */ /*电脑版本*/ @media screen and (min-width:501px){ .box{ width: 600px; background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); border-radius: 10px; margin: 0 auto; color: aliceblue; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .box img{ width: 200px; height: 200px; border-radius: 5px; } .box p{ padding-top: 30px; font-weight: bold; } .bottom{ margin-top:30px; width: 99%; height: 80px; } .left{ display: inline-block; width: 150px; height: 40px; background-color: #5cb85c; border-color: #4cae4c; margin-right: 100px; border-radius: 5px; line-height: 40px; font-size: 18px; font-weight: bold; cursor: pointer; } .left:hover{ background-color:#328732; } .right{ cursor: pointer; display: inline-block; width: 150px; height: 40px; background-color: #c9302c; border-color: #ac2925; border-radius: 5px; line-height: 40px; font-size: 16px; } .right:hover{ border-color:#B11C18; } } /*手机端*/ @media screen and (max-width:500px){ .box{ width: 100%; background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); margin: 0 auto; color: aliceblue; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .box img{ width:150px; height: 150px; border-radius: 5px; } .box p{ padding-top: 30px; font-weight: bold; } .bottom{ margin-top:3%; width: 99%; height: 80px; } .left{ display: inline-block; width: 40%; height: 40px; background-color: #5cb85c; border-color: #4cae4c; margin-right: 10%; border-radius: 5px; line-height: 40px; font-size: 18px; font-weight: bold; cursor: pointer; } .left:hover{ background-color:#328732; } .right{ cursor: pointer; display: inline-block; width: 40%; height: 40px; background-color: #c9302c; border-color: #ac2925; border-radius: 5px; line-height: 40px; font-size: 16px; } .right:hover{ border-color:#B11C18; } } |
效果演示请移步——---http://blog.mlldxe.cn/gwcdx.html