SOURCE

$(".submitBut").click(function(){
  			var url = $('.url').val();
  			let str = url.charAt(url.length-1);
        if(str !== '?' && url){
          url =url+'?'
        }
        var urlVal = '您生成的网址如下:'+url;
  		
        let $utmUl = $('.utmUl li');
  			let valArr=[];
		for(let i=0; i<$utmUl.length; i++){
        let $utmInput = $utmUl.eq(i).find('input'),
            $utmInputVal = $utmInput.val(),
            utmClass='utm_'+$utmInput.attr("class"),
            urlV='';
      	
        if($utmInputVal){
					if(i===2){
            urlV=utmClass+'='+encodeURIComponent($utmInputVal);
          }else{
            urlV=utmClass+'='+$utmInputVal;
          }
          valArr.push(urlV);
        }
       
		}
    $('.urlText').text(url+valArr.join('&')) 
  })

<div class='form' >
          <div class='title'>网页广告参数构建</div>
          <div>
          <div class='firstStep'>
            <div><b>第一步:</b>输入您网站的网址</div>
            <ul>
              <li>
                <p><span>网站网址</span><input class="url" type="input"/>(如 https://www.sensorsdata.cn/index.html)</p>
              </li>
            </ul>
          </div>

          <div class ='secondStep'>
            <div><b>第二步:</b>填写下面的各个字段(带*号的是必填字段)</div>
            <ul class="utmUl">
              <li><span>*广告系列来源</span><input class="source" type="input" />(引荐来源网址: baidu、sina、sohu)</li>
              <li><span>*广告系列媒介</span><input class="medium" type="input" />(营销媒介:cpc、banner、edm)</li>
              <li><span>&nbsp;广告系列字词</span><input class="term" type="input" />(标识付费关键字,主要适用于SEM)</li>
              <li><span>&nbsp;广告系列内容</span><input class="content" type="input"/>(用于区分广告)</li>
              <li><span>*广告系列名称</span><input class="campaign" type="input"/>(产品、促销代码或标语)</li>

            </ul>

          </div>
          <div class ='submitBut'>
            <input type="button" value="生成网址" />
          </div>
          <div class ='urlText'></div>
          </div>
        </div>

$fontSize: 14px;
$pixel-20px: 20px;
$side : left;
.form{
				width: 100%;
				height: 100%;
				font-size:  $fontSize;
				&>div{
					padding: $pixel-20px;

					&>div{
						margin-bottom: $pixel-20px;
						&>ul{
							margin:$pixel-20px 0 0 $pixel-20px;

							li{
								height: 25px;
								line-height: 25px;
								list-style: none;
								margin-top: 10px;
									span{
										width: 110px;
										margin-right: $pixel-20px;
										float: $side;
                    text-align: right;
									}
									input{
										margin: 0 $pixel-20px 0 $pixel-20px;
										float: $side;
										width: 300px;
										height: $pixel-20px;
									}
							}
						}
					}
					&.submitBut{
						input{
							width: 88px;
							height: 36px;
							padding: 2px;
							color: #fff;
							border-radius: 5px;
							background: rgb(0, 190, 255);
							cursor: pointer;
						}
					}
					&.urlText{
						border: 1px solid #ccc;
						width: 100%;
						height: $pixel-20px;
					}
				}
			}